diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 7b5bc5976..f657adf28 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,7 +1,6 @@
 const reload = require('require-nocache')(module);
 
 const cssVarsFiles = [
-  './src/Styles/Variables/colors',
   './src/Styles/Variables/dimensions',
   './src/Styles/Variables/fonts',
   './src/Styles/Variables/animations',
diff --git a/frontend/src/Activity/Queue/ProtocolLabel.css b/frontend/src/Activity/Queue/ProtocolLabel.css
index 259fd5c65..110c7e01c 100644
--- a/frontend/src/Activity/Queue/ProtocolLabel.css
+++ b/frontend/src/Activity/Queue/ProtocolLabel.css
@@ -1,13 +1,13 @@
 .torrent {
   composes: label from '~Components/Label.css';
 
-  border-color: $torrentColor;
-  background-color: $torrentColor;
+  border-color: var(--torrentColor);
+  background-color: var(--torrentColor);
 }
 
 .usenet {
   composes: label from '~Components/Label.css';
 
-  border-color: $usenetColor;
-  background-color: $usenetColor;
+  border-color: var(--usenetColor);
+  background-color: var(--usenetColor);
 }
diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeries.css b/frontend/src/AddSeries/AddNewSeries/AddNewSeries.css
index fa28540cd..d41571320 100644
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeries.css
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeries.css
@@ -6,12 +6,12 @@
 .searchIconContainer {
   width: 58px;
   height: 46px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
   border-right: none;
   border-radius: 4px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  background-color: #edf1f2;
+  background-color: var(--searchIconContainerBackgroundColor);
   text-align: center;
   line-height: 46px;
 }
@@ -25,7 +25,7 @@
 }
 
 .clearLookupButton {
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
   border-left: none;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.css b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.css
index 1ece5b8e9..2311e70bf 100644
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.css
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.css
@@ -4,7 +4,7 @@
 
 .year {
   margin-left: 5px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .poster {
diff --git a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
index cd7869c3e..1fdf7d358 100644
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css
@@ -9,13 +9,15 @@
 .underlay {
   @add-mixin cover;
 
-  background-color: $white;
+  background-color: var(--addSeriesBackgroundColor);
   transition: background 500ms;
 
   &:hover {
-    background-color: #eaf2ff;
+    background-color: var(--pageBackground);
+    box-shadow: 0 0 12px var(--black);
     color: inherit;
     text-decoration: none;
+    transition: all 200ms ease-in;
   }
 }
 
@@ -54,7 +56,7 @@
 
 .year {
   margin-left: 10px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .icons {
@@ -70,7 +72,7 @@
 
   margin-top: -4px;
   margin-left: auto;
-  color: $textColor;
+  color: var(--textColor);
 }
 
 .tvdbLinkIcon {
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css
index 4a2792b61..70a646cab 100644
--- a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css
@@ -4,7 +4,7 @@
   width: 100%;
 
   &:hover {
-    background-color: $menuItemHoverBackgroundColor;
+    background-color: var(--menuItemHoverBackgroundColor);
   }
 }
 
@@ -17,7 +17,7 @@
   composes: link from '~Components/Link/Link.css';
 
   margin-left: auto;
-  color: $textColor;
+  color: var(--textColor);
 }
 
 .tvdbLinkIcon {
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css
index 6bdfd093e..d087f508b 100644
--- a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.css
@@ -6,10 +6,10 @@
   padding: 6px 16px;
   width: 100%;
   height: 35px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
   border-radius: 4px;
-  background-color: $white;
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+  background-color: var(--inputBackgroundColor);
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
 }
 
 .loading {
@@ -39,9 +39,9 @@
 
 .content {
   padding: 4px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--inputBackgroundColor);
 }
 
 .searchContainer {
@@ -50,12 +50,12 @@
 
 .searchIconContainer {
   width: 58px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
   border-right: none;
   border-radius: 4px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  background-color: #edf1f2;
+  background-color: var(--searchIconContainerBackgroundColor);
   text-align: center;
   line-height: 33px;
 }
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.css b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.css
index 222623179..ed00effa7 100644
--- a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.css
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.css
@@ -12,7 +12,7 @@
 .year {
   margin-right: 5px;
   margin-left: 5px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .existing {
diff --git a/frontend/src/App/App.js b/frontend/src/App/App.js
index d8a83b1c0..2690d1856 100644
--- a/frontend/src/App/App.js
+++ b/frontend/src/App/App.js
@@ -4,6 +4,7 @@ import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import PageConnector from 'Components/Page/PageConnector';
+import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
 function App({ store, history }) {
@@ -11,9 +12,11 @@ function App({ store, history }) {
     <DocumentTitle title={window.Sonarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <PageConnector>
-            <AppRoutes app={App} />
-          </PageConnector>
+          <ApplyTheme>
+            <PageConnector>
+              <AppRoutes app={App} />
+            </PageConnector>
+          </ApplyTheme>
         </ConnectedRouter>
       </Provider>
     </DocumentTitle>
diff --git a/frontend/src/App/ApplyTheme.js b/frontend/src/App/ApplyTheme.js
new file mode 100644
index 000000000..5e02d5a0c
--- /dev/null
+++ b/frontend/src/App/ApplyTheme.js
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React, { Fragment, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import themes from 'Styles/Themes';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.ui.item.theme || window.Sonarr.theme,
+    (
+      theme
+    ) => {
+      return {
+        theme
+      };
+    }
+  );
+}
+
+function ApplyTheme({ theme, children }) {
+  // Update the CSS Variables
+  function updateCSSVariables() {
+    const arrayOfVariableKeys = Object.keys(themes[theme]);
+    const arrayOfVariableValues = Object.values(themes[theme]);
+
+    // Loop through each array key and set the CSS Variables
+    arrayOfVariableKeys.forEach((cssVariableKey, index) => {
+      // Based on our snippet from MDN
+      document.documentElement.style.setProperty(
+        `--${cssVariableKey}`,
+        arrayOfVariableValues[index]
+      );
+    });
+  }
+
+  // On Component Mount and Component Update
+  useEffect(() => {
+    updateCSSVariables(theme);
+  }, [theme]);
+
+  return <Fragment>{children}</Fragment>;
+}
+
+ApplyTheme.propTypes = {
+  theme: PropTypes.string.isRequired,
+  children: PropTypes.object.isRequired
+};
+
+export default connect(createMapStateToProps)(ApplyTheme);
diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.css b/frontend/src/Calendar/Agenda/AgendaEvent.css
index 38b4f50f3..a6bc8dd83 100644
--- a/frontend/src/Calendar/Agenda/AgendaEvent.css
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.css
@@ -2,11 +2,11 @@
   display: flex;
   overflow-x: hidden;
   padding: 5px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
   font-size: $defaultFontSize;
 
   &:hover {
-    background-color: $tableRowHoverBackgroundColor;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }
 
diff --git a/frontend/src/Calendar/Day/CalendarDay.css b/frontend/src/Calendar/Day/CalendarDay.css
index 79eb67ae7..22d1b1ccf 100644
--- a/frontend/src/Calendar/Day/CalendarDay.css
+++ b/frontend/src/Calendar/Day/CalendarDay.css
@@ -2,8 +2,8 @@
   flex: 1 0 14.28%;
   overflow: hidden;
   min-height: 70px;
-  border-bottom: 1px solid $calendarBorderColor;
-  border-left: 1px solid $calendarBorderColor;
+  border-bottom: 1px solid var(--calendarBorderColor);
+  border-left: 1px solid var(--calendarBorderColor);
 }
 
 .isSingleDay {
@@ -12,14 +12,14 @@
 
 .dayOfMonth {
   padding-right: 5px;
-  border-bottom: 1px solid $calendarBorderColor;
+  border-bottom: 1px solid var(--calendarBorderColor);
   text-align: right;
 }
 
 .isToday {
-  background-color: $calendarTodayBackgroundColor;
+  background-color: var(--calendarTodayBackgroundColor);
 }
 
 .isDifferentMonth {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
diff --git a/frontend/src/Calendar/Day/CalendarDays.css b/frontend/src/Calendar/Day/CalendarDays.css
index b6dd2100c..507dd0ede 100644
--- a/frontend/src/Calendar/Day/CalendarDays.css
+++ b/frontend/src/Calendar/Day/CalendarDays.css
@@ -1,6 +1,6 @@
 .days {
   display: flex;
-  border-right: 1px solid $calendarBorderColor;
+  border-right: 1px solid var(--calendarBorderColor);
 }
 
 .day,
diff --git a/frontend/src/Calendar/Day/DayOfWeek.css b/frontend/src/Calendar/Day/DayOfWeek.css
index 8c3552e55..bb73fa3ba 100644
--- a/frontend/src/Calendar/Day/DayOfWeek.css
+++ b/frontend/src/Calendar/Day/DayOfWeek.css
@@ -1,6 +1,6 @@
 .dayOfWeek {
   flex: 1 0 14.28%;
-  background-color: #e4eaec;
+  background-color: var(--calendarBackgroudColor);
   text-align: center;
 }
 
@@ -9,5 +9,5 @@
 }
 
 .isToday {
-  background-color: $calendarTodayBackgroundColor;
+  background-color: var(--calendarTodayBackgroundColor);
 }
diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
index fb7a39855..962da393f 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/frontend/src/Calendar/Events/CalendarEvent.css
@@ -4,8 +4,8 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
   overflow-x: hidden;
   margin: 4px 2px;
   padding: 5px;
-  border-bottom: 1px solid $borderColor;
-  border-left: 4px solid $borderColor;
+  border-bottom: 1px solid var(--calendarBorderColor);
+  border-left: 4px solid var(--calendarBorderColor);
   font-size: 12px;
 
   &:global(.colorImpaired) {
@@ -19,7 +19,7 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 }
 
 .episodeInfo {
-  color: $calendarTextDim;
+  color: var(--calendarTextDim);
 }
 
 .seriesTitle,
@@ -30,7 +30,7 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 }
 
 .seriesTitle {
-  color: #3a3f51;
+  color: var(--calendarTextDimAlternate);
   font-size: $defaultFontSize;
 }
 
@@ -48,7 +48,7 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 }
 
 .airTime {
-  color: $calendarTextDim;
+  color: var(--calendarTextDim);
 }
 
 /*
@@ -56,19 +56,19 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
  */
 
 .downloaded {
-  border-left-color: $successColor !important;
+  border-left-color: var(--successColor) !important;
 
   &:global(.fullColor) {
     background-color: rgba(39, 194, 76, 0.4) !important;
   }
 
   &:global(.colorImpaired) {
-    border-left-color: color($successColor, saturation(+15%)) !important;
+    border-left-color: color(#27c24c saturation(+15%)) !important;
   }
 }
 
 .downloading {
-  border-left-color: $purple !important;
+  border-left-color: var(--purple) !important;
 
   &:global(.fullColor) {
     background-color: rgba(122, 67, 182, 0.4) !important;
@@ -76,14 +76,14 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 }
 
 .unmonitored {
-  border-left-color: $gray !important;
+  border-left-color: var(--gray) !important;
 
   &:global(.fullColor) {
     background-color: rgba(173, 173, 173, 0.5) !important;
   }
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
   }
 
   &:global(.fullColor.colorImpaired) {
@@ -92,14 +92,14 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 }
 
 .onAir {
-  border-left-color: $warningColor !important;
+  border-left-color: var(--warningColor) !important;
 
   &:global(.fullColor) {
     background-color: rgba(255, 165, 0, 0.6) !important;
   }
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
   }
 
   &:global(.fullColor.colorImpaired) {
@@ -108,15 +108,15 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 }
 
 .missing {
-  border-left-color: $dangerColor !important;
+  border-left-color: var(--dangerColor) !important;
 
   &:global(.fullColor) {
     background-color: rgba(240, 80, 80, 0.6) !important;
   }
 
   &:global(.colorImpaired) {
-    border-left-color: color($dangerColor saturation(+15%)) !important;
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    border-left-color: color(#f05050 saturation(+15%)) !important;
+    background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
   }
 
   &:global(.fullColor.colorImpaired) {
@@ -125,14 +125,14 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
 }
 
 .unaired {
-  border-left-color: $primaryColor !important;
+  border-left-color: var(--primaryColor) !important;
 
   &:global(.fullColor) {
     background-color: rgba(93, 156, 236, 0.4) !important;
   }
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
   }
 
   &:global(.fullColor.colorImpaired) {
diff --git a/frontend/src/Calendar/Events/CalendarEventGroup.css b/frontend/src/Calendar/Events/CalendarEventGroup.css
index e5be0fd92..96b23bc58 100644
--- a/frontend/src/Calendar/Events/CalendarEventGroup.css
+++ b/frontend/src/Calendar/Events/CalendarEventGroup.css
@@ -2,8 +2,8 @@
   overflow-x: hidden;
   margin: 4px 2px;
   padding: 5px;
-  border-bottom: 1px solid $borderColor;
-  border-left: 4px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
+  border-left: 4px solid var(--borderColor);
   font-size: 12px;
 }
 
@@ -22,12 +22,12 @@
 
 .airTime {
   flex: 1 0 1px;
-  color: $calendarTextDim;
+  color: var(--calendarTextDim);
 }
 
 .episodeInfo {
   margin-left: 10px;
-  color: $calendarTextDim;
+  color: var(--calendarTextDim);
 }
 
 .absoluteEpisodeNumber {
diff --git a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js
index 7440b9d67..60282d7ed 100644
--- a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js
+++ b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js
@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import colors from 'Styles/Variables/colors';
-import CircularProgressBar from 'Components/CircularProgressBar';
 import QueueDetails from 'Activity/Queue/QueueDetails';
+import CircularProgressBar from 'Components/CircularProgressBar';
 
 function CalendarEventQueueDetails(props) {
   const {
@@ -34,7 +33,7 @@ function CalendarEventQueueDetails(props) {
             progress={progress}
             size={20}
             strokeWidth={2}
-            strokeColor={colors.purple}
+            strokeColor={'#7a43b6'}
           />
         </div>
       }
diff --git a/frontend/src/Components/Alert.css b/frontend/src/Components/Alert.css
index 312fbb4f2..135d1ee2b 100644
--- a/frontend/src/Components/Alert.css
+++ b/frontend/src/Components/Alert.css
@@ -7,25 +7,25 @@
 }
 
 .danger {
-  border-color: $alertDangerBorderColor;
-  background-color: $alertDangerBackgroundColor;
-  color: $alertDangerColor;
+  border-color: var(--alertDangerBorderColor);
+  background-color: var(--alertDangerBackgroundColor);
+  color: var(--alertDangerColor);
 }
 
 .info {
-  border-color: $alertInfoBorderColor;
-  background-color: $alertInfoBackgroundColor;
-  color: $alertInfoColor;
+  border-color: var(--alertInfoBorderColor);
+  background-color: var(--alertInfoBackgroundColor);
+  color: var(--alertInfoColor);
 }
 
 .success {
-  border-color: $alertSuccessBorderColor;
-  background-color: $alertSuccessBackgroundColor;
-  color: $alertSuccessColor;
+  border-color: var(--alertSuccessBorderColor);
+  background-color: var(--alertSuccessBackgroundColor);
+  color: var(--alertSuccessColor);
 }
 
 .warning {
-  border-color: $alertWarningBorderColor;
-  background-color: $alertWarningBackgroundColor;
-  color: $alertWarningColor;
+  border-color: var(--alertWarningBorderColor);
+  background-color: var(--alertWarningBackgroundColor);
+  color: var(--alertWarningColor);
 }
diff --git a/frontend/src/Components/Card.css b/frontend/src/Components/Card.css
index b54bbcdf4..49a9abd76 100644
--- a/frontend/src/Components/Card.css
+++ b/frontend/src/Components/Card.css
@@ -3,9 +3,9 @@
   margin: 10px;
   padding: 10px;
   border-radius: 3px;
-  background-color: $white;
-  box-shadow: 0 0 10px 1px $cardShadowColor;
-  color: $defaultColor;
+  background-color: var(--cardBackgroundColor);
+  box-shadow: 0 0 10px 1px var(--cardShadowColor);
+  color: var(--defaultColor);
 }
 
 .underlay {
diff --git a/frontend/src/Components/CircularProgressBar.js b/frontend/src/Components/CircularProgressBar.js
index 95c84f59a..3af5665a9 100644
--- a/frontend/src/Components/CircularProgressBar.js
+++ b/frontend/src/Components/CircularProgressBar.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import colors from 'Styles/Variables/colors';
 import styles from './CircularProgressBar.css';
 
 class CircularProgressBar extends Component {
@@ -132,7 +131,7 @@ CircularProgressBar.defaultProps = {
   containerClassName: styles.circularProgressBarContainer,
   size: 60,
   strokeWidth: 5,
-  strokeColor: colors.sonarrBlue,
+  strokeColor: '#35c5f4',
   showProgressText: false
 };
 
diff --git a/frontend/src/Components/FieldSet.css b/frontend/src/Components/FieldSet.css
index 6da64f0e0..9ea0dbab1 100644
--- a/frontend/src/Components/FieldSet.css
+++ b/frontend/src/Components/FieldSet.css
@@ -13,7 +13,7 @@
   width: 100%;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
-  color: #3a3f51;
+  color: var(--textColor);
   font-size: 21px;
   line-height: inherit;
 
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModalContent.css b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css
index 7ddb9e806..db31d6f86 100644
--- a/frontend/src/Components/FileBrowser/FileBrowserModalContent.css
+++ b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css
@@ -13,7 +13,7 @@
 }
 
 .faqLink {
-  color: $alertWarningColor;
+  color: var(--alertWarningColor);
   font-weight: bold;
 }
 
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRow.css b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css
index c5471b253..bcfc3b04e 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRow.css
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css
@@ -3,7 +3,7 @@
   margin-bottom: 5px;
 
   &:hover {
-    background-color: $tableRowHoverBackgroundColor;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }
 
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
index 86ef9e73a..807f383dd 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css
@@ -17,6 +17,6 @@
 
 .or {
   margin: 0 3px;
-  color: $themeDarkColor;
+  color: var(--themeDarkColor);
   line-height: 31px;
 }
diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFilter.css b/frontend/src/Components/Filter/CustomFilters/CustomFilter.css
index 7acb69dc7..e2b8c72bf 100644
--- a/frontend/src/Components/Filter/CustomFilters/CustomFilter.css
+++ b/frontend/src/Components/Filter/CustomFilters/CustomFilter.css
@@ -4,7 +4,7 @@
   padding: 5px;
 
   &:hover {
-    background-color: $tableRowHoverBackgroundColor;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }
 
diff --git a/frontend/src/Components/Form/AutoSuggestInput.css b/frontend/src/Components/Form/AutoSuggestInput.css
index 0f3279cb9..7dc416960 100644
--- a/frontend/src/Components/Form/AutoSuggestInput.css
+++ b/frontend/src/Components/Form/AutoSuggestInput.css
@@ -27,10 +27,10 @@
     overflow-y: auto;
     max-height: 200px;
     width: 100%;
-    border: 1px solid $inputBorderColor;
+    border: 1px solid var(--inputBorderColor);
     border-radius: 4px;
-    background-color: $white;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+    background-color: var(--inputBackgroundColor);
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
   }
 }
 
@@ -46,5 +46,5 @@
 }
 
 .suggestionHighlighted {
-  background-color: $menuItemHoverBackgroundColor;
+  background-color: var(--menuItemHoverBackgroundColor);
 }
diff --git a/frontend/src/Components/Form/CheckInput.css b/frontend/src/Components/Form/CheckInput.css
index e0b05eca3..171121482 100644
--- a/frontend/src/Components/Form/CheckInput.css
+++ b/frontend/src/Components/Form/CheckInput.css
@@ -32,21 +32,21 @@
   height: 20px;
   border: 1px solid #ccc;
   border-radius: 2px;
-  background-color: $white;
-  color: $white;
+  background-color: var(--white);
+  color: var(--white);
   text-align: center;
   line-height: 20px;
 }
 
 .checkbox:focus + .input {
   outline: 0;
-  border-color: $inputFocusBorderColor;
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+  border-color: var(--inputFocusBorderColor);
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
 }
 
 .dangerIsChecked {
-  border-color: $dangerColor;
-  background-color: $dangerColor;
+  border-color: var(--dangerColor);
+  background-color: var(--dangerColor);
 
   &.isDisabled {
     opacity: 0.7;
@@ -54,8 +54,8 @@
 }
 
 .primaryIsChecked {
-  border-color: $primaryColor;
-  background-color: $primaryColor;
+  border-color: var(--primaryColor);
+  background-color: var(--primaryColor);
 
   &.isDisabled {
     opacity: 0.7;
@@ -63,8 +63,8 @@
 }
 
 .successIsChecked {
-  border-color: $successColor;
-  background-color: $successColor;
+  border-color: var(--successColor);
+  background-color: var(--successColor);
 
   &.isDisabled {
     opacity: 0.7;
@@ -72,8 +72,8 @@
 }
 
 .warningIsChecked {
-  border-color: $warningColor;
-  background-color: $warningColor;
+  border-color: var(--warningColor);
+  background-color: var(--warningColor);
 
   &.isDisabled {
     opacity: 0.7;
@@ -82,15 +82,15 @@
 
 .isNotChecked {
   &.isDisabled {
-    border-color: $disabledCheckInputColor;
-    background-color: $disabledCheckInputColor;
+    border-color: var(--disabledCheckInputColor);
+    background-color: var(--disabledCheckInputColor);
     opacity: 0.7;
   }
 }
 
 .isIndeterminate {
-  border-color: $gray;
-  background-color: $gray;
+  border-color: var(--gray);
+  background-color: var(--gray);
 }
 
 .helpText {
diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css b/frontend/src/Components/Form/EnhancedSelectInput.css
index f971f6517..56f5564b9 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.css
+++ b/frontend/src/Components/Form/EnhancedSelectInput.css
@@ -39,7 +39,7 @@
 .dropdownArrowContainerDisabled {
   composes: dropdownArrowContainer;
 
-  color: $disabledInputColor;
+  color: var(--disabledInputColor);
 }
 
 .optionsContainer {
@@ -50,9 +50,9 @@
 .options {
   composes: scroller from '~Components/Scroller/Scroller.css';
 
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--inputBackgroundColor);
 }
 
 .optionsModal {
@@ -76,9 +76,9 @@
 .optionsModalScroller {
   composes: scroller from '~Components/Scroller/Scroller.css';
 
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--inputBackgroundColor);
 }
 
 .loading {
@@ -90,7 +90,7 @@
   display: flex;
   justify-content: flex-end;
   height: 40px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
 }
 
 .mobileCloseButton {
@@ -100,6 +100,6 @@
   line-height: 40px;
 
   &:hover {
-    color: $modalCloseButtonHoverColor;
+    color: var(--modalCloseButtonHoverColor);
   }
 }
diff --git a/frontend/src/Components/Form/EnhancedSelectInputOption.css b/frontend/src/Components/Form/EnhancedSelectInputOption.css
index f6b6136ae..8dcfa25d5 100644
--- a/frontend/src/Components/Form/EnhancedSelectInputOption.css
+++ b/frontend/src/Components/Form/EnhancedSelectInputOption.css
@@ -7,7 +7,7 @@
   cursor: default;
 
   &:hover {
-    background-color: #f8f8f8;
+    background-color: var(--inputHoverBackgroundColor);
   }
 }
 
@@ -24,17 +24,17 @@
 }
 
 .isSelected {
-  background-color: #e2e2e2;
+  background-color: var(--inputSelectedBackgroundColor);
 
   &:hover {
-    background-color: #e2e2e2;
+    background-color: var(--inputSelectedBackgroundColor);
   }
 
   &.isMobile {
     background-color: inherit;
 
     .iconContainer {
-      color: $primaryColor;
+      color: var(--primaryColor);
     }
   }
 }
@@ -49,7 +49,7 @@
 
 .isMobile {
   height: 50px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
 
   &:last-child {
     border: none;
diff --git a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css
index 6b8b73af9..908126689 100644
--- a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css
+++ b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css
@@ -3,5 +3,5 @@
 }
 
 .isDisabled {
-  color: $disabledInputColor;
+  color: var(--disabledInputColor);
 }
diff --git a/frontend/src/Components/Form/FormInputGroup.css b/frontend/src/Components/Form/FormInputGroup.css
index 1a1b104e6..32d91e29b 100644
--- a/frontend/src/Components/Form/FormInputGroup.css
+++ b/frontend/src/Components/Form/FormInputGroup.css
@@ -40,7 +40,7 @@
 }
 
 .pendingChangesIcon {
-  color: $warningColor;
+  color: var(--warningColor);
   font-size: 20px;
   line-height: 35px;
 }
diff --git a/frontend/src/Components/Form/FormInputHelpText.css b/frontend/src/Components/Form/FormInputHelpText.css
index 756fd90db..0a6897d27 100644
--- a/frontend/src/Components/Form/FormInputHelpText.css
+++ b/frontend/src/Components/Form/FormInputHelpText.css
@@ -1,14 +1,14 @@
 .helpText {
   margin-top: 5px;
-  color: $helpTextColor;
+  color: var(--helpTextColor);
   line-height: 20px;
 }
 
 .isError {
-  color: $dangerColor;
+  color: var(--dangerColor);
 
   .link {
-    color: $dangerColor;
+    color: var(--dangerColor);
 
     &:hover {
       color: #e01313;
@@ -17,10 +17,10 @@
 }
 
 .isWarning {
-  color: $warningColor;
+  color: var(--warningColor);
 
   .link {
-    color: $warningColor;
+    color: var(--warningColor);
 
     &:hover {
       color: #e36c00;
diff --git a/frontend/src/Components/Form/FormLabel.css b/frontend/src/Components/Form/FormLabel.css
index 236f4aab0..074b6091d 100644
--- a/frontend/src/Components/Form/FormLabel.css
+++ b/frontend/src/Components/Form/FormLabel.css
@@ -7,11 +7,11 @@
 }
 
 .hasError {
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
 
 .isAdvanced {
-  color: $advancedFormLabelColor;
+  color: var(--advancedFormLabelColor);
 }
 
 @media only screen and (max-width: $breakpointLarge) {
diff --git a/frontend/src/Components/Form/HintedSelectInputOption.css b/frontend/src/Components/Form/HintedSelectInputOption.css
index 74d1fb088..74bf6a86e 100644
--- a/frontend/src/Components/Form/HintedSelectInputOption.css
+++ b/frontend/src/Components/Form/HintedSelectInputOption.css
@@ -18,6 +18,6 @@
   @add-mixin truncate;
 
   margin-left: 15px;
-  color: $darkGray;
+  color: var(--darkGray);
   font-size: $smallFontSize;
 }
diff --git a/frontend/src/Components/Form/HintedSelectInputSelectedValue.css b/frontend/src/Components/Form/HintedSelectInputSelectedValue.css
index a31970a9e..f779b83d7 100644
--- a/frontend/src/Components/Form/HintedSelectInputSelectedValue.css
+++ b/frontend/src/Components/Form/HintedSelectInputSelectedValue.css
@@ -18,7 +18,7 @@
 
   flex: 1 10 0;
   margin-left: 15px;
-  color: $gray;
+  color: var(--gray);
   text-align: right;
   font-size: $smallFontSize;
 }
diff --git a/frontend/src/Components/Form/Input.css b/frontend/src/Components/Form/Input.css
index e9ca23d8f..dd9ee888d 100644
--- a/frontend/src/Components/Form/Input.css
+++ b/frontend/src/Components/Form/Input.css
@@ -2,26 +2,27 @@
   padding: 6px 16px;
   width: 100%;
   height: 35px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
   border-radius: 4px;
-  background-color: $white;
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+  background-color: var(--inputBackgroundColor);
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+  color: var(--textColor);
 
   &:focus {
     outline: 0;
-    border-color: $inputFocusBorderColor;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+    border-color: var(--inputFocusBorderColor);
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
   }
 }
 
 .hasError {
-  border-color: $inputErrorBorderColor;
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputErrorBoxShadowColor;
+  border-color: var(--inputErrorBorderColor);
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputErrorBoxShadowColor);
 }
 
 .hasWarning {
-  border-color: $inputWarningBorderColor;
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputWarningBoxShadowColor;
+  border-color: var(--inputWarningBorderColor);
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputWarningBoxShadowColor);
 }
 
 .hasButton {
diff --git a/frontend/src/Components/Form/KeyValueListInput.css b/frontend/src/Components/Form/KeyValueListInput.css
index 8bf23610b..d86e6a512 100644
--- a/frontend/src/Components/Form/KeyValueListInput.css
+++ b/frontend/src/Components/Form/KeyValueListInput.css
@@ -7,8 +7,8 @@
 
   &.isFocused {
     outline: 0;
-    border-color: $inputFocusBorderColor;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+    border-color: var(--inputFocusBorderColor);
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
   }
 }
 
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css b/frontend/src/Components/Form/KeyValueListInputItem.css
index 7365e9f1d..75d37b74f 100644
--- a/frontend/src/Components/Form/KeyValueListInputItem.css
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css
@@ -1,7 +1,7 @@
 .itemContainer {
   display: flex;
   margin-bottom: 3px;
-  border-bottom: 1px solid $inputBorderColor;
+  border-bottom: 1px solid var(--inputBorderColor);
 
   &:last-child {
     margin-bottom: 0;
diff --git a/frontend/src/Components/Form/RootFolderSelectInputOption.css b/frontend/src/Components/Form/RootFolderSelectInputOption.css
index fe0dd914b..ff544556a 100644
--- a/frontend/src/Components/Form/RootFolderSelectInputOption.css
+++ b/frontend/src/Components/Form/RootFolderSelectInputOption.css
@@ -19,17 +19,17 @@
 
 .seriesFolder {
   flex: 0 0 auto;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .freeSpace {
   margin-left: 15px;
-  color: $darkGray;
+  color: var(--darkGray);
   font-size: $smallFontSize;
 }
 
 .isMissing {
   margin-left: 15px;
-  color: $dangerColor;
+  color: var(--dangerColor);
   font-size: $smallFontSize;
 }
diff --git a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css
index 2645b8e78..da6eefca5 100644
--- a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css
+++ b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css
@@ -20,13 +20,13 @@
 .seriesFolder {
   @add-mixin truncate;
   flex: 0 1 auto;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .freeSpace {
   flex: 0 0 auto;
   margin-left: 15px;
-  color: $gray;
+  color: var(--gray);
   text-align: right;
   font-size: $smallFontSize;
 }
diff --git a/frontend/src/Components/Form/TagInput.css b/frontend/src/Components/Form/TagInput.css
index 9328c762a..eeddab5b4 100644
--- a/frontend/src/Components/Form/TagInput.css
+++ b/frontend/src/Components/Form/TagInput.css
@@ -7,8 +7,8 @@
 
   &.isFocused {
     outline: 0;
-    border-color: $inputFocusBorderColor;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+    border-color: var(--inputFocusBorderColor);
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
   }
 }
 
@@ -28,4 +28,6 @@
   width: 0%;
   height: 31px;
   border: none;
+  background-color: var(--inputBackground);
+  color: var(--textColor);
 }
diff --git a/frontend/src/Components/Form/TextInput.css b/frontend/src/Components/Form/TextInput.css
index 80503704d..a3d9692c6 100644
--- a/frontend/src/Components/Form/TextInput.css
+++ b/frontend/src/Components/Form/TextInput.css
@@ -3,7 +3,7 @@
 }
 
 .readOnly {
-  background-color: #eee;
+  background-color: var(--inputReadOnlyBackgroundColor);
 }
 
 .hasError {
diff --git a/frontend/src/Components/Form/UMaskInput.css b/frontend/src/Components/Form/UMaskInput.css
index 695af6384..91486687e 100644
--- a/frontend/src/Components/Form/UMaskInput.css
+++ b/frontend/src/Components/Form/UMaskInput.css
@@ -49,5 +49,5 @@
 }
 
 .readOnly {
-  background-color: #eee;
+  background-color: var(--inputReadOnlyBackgroundColor);
 }
diff --git a/frontend/src/Components/HeartRating.css b/frontend/src/Components/HeartRating.css
index b414183af..14a20019d 100644
--- a/frontend/src/Components/HeartRating.css
+++ b/frontend/src/Components/HeartRating.css
@@ -1,6 +1,6 @@
 .heart {
   margin-right: 5px;
-  color: $themeRed;
+  color: var(--themeRed);
 }
 
 .rating {
diff --git a/frontend/src/Components/Icon.css b/frontend/src/Components/Icon.css
index 3f0022c6c..69ffc40f5 100644
--- a/frontend/src/Components/Icon.css
+++ b/frontend/src/Components/Icon.css
@@ -1,5 +1,5 @@
 .danger {
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
 
 .default {
@@ -7,33 +7,33 @@
 }
 
 .disabled {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .info {
-  color: $infoColor;
+  color: var(--infoColor);
 
   &:global(.darken) {
-    color: color($infoColor shade(30%));
+    color: color(var(--infoColor) shade(30%));
   }
 }
 
 .pink {
-  color: $pink;
+  color: var(--pink);
 
   &:global(.darken) {
-    color: color($pink shade(30%));
+    color: color(var(--pink) shade(30%));
   }
 }
 
 .success {
-  color: $successColor;
+  color: var(--successColor);
 }
 
 .warning {
-  color: $warningColor;
+  color: var(--warningColor);
 }
 
 .purple {
-  color: $purple;
+  color: var(--purple);
 }
diff --git a/frontend/src/Components/Label.css b/frontend/src/Components/Label.css
index e2b8e7e07..f3ff83993 100644
--- a/frontend/src/Components/Label.css
+++ b/frontend/src/Components/Label.css
@@ -3,7 +3,7 @@
   margin: 2px;
   border: 1px solid;
   border-radius: 2px;
-  color: $white;
+  color: var(--white);
   text-align: center;
   white-space: nowrap;
   line-height: 1;
@@ -13,78 +13,78 @@
 /** Kinds **/
 
 .danger {
-  border-color: $dangerColor;
-  background-color: $dangerColor;
+  border-color: var(--dangerColor);
+  background-color: var(--dangerColor);
 
   &.outline {
-    color: $dangerColor;
+    color: var(--dangerColor);
   }
 }
 
 .default {
-  border-color: $themeLightColor;
-  background-color: $themeLightColor;
+  border-color: var(--themeLightColor);
+  background-color: var(--themeLightColor);
 
   &.outline {
-    color: $themeLightColor;
+    color: var(--themeLightColor);
   }
 }
 
 .disabled {
-  border-color: $disabledColor;
-  background-color: $disabledColor;
+  border-color: var(--disabledColor);
+  background-color: var(--disabledColor);
 
   &.outline {
-    color: $disabledColor;
+    color: var(--white);
   }
 }
 
 .info {
-  border-color: $infoColor;
-  background-color: $infoColor;
-  color: $themeLightColor;
+  border-color: var(--infoColor);
+  background-color: var(--infoColor);
+  color: var(--infoTextColor);
 
   &.outline {
-    color: $infoColor;
+    color: var(--infoColor);
   }
 }
 
 .inverse {
-  border-color: $lightGray;
-  background-color: $lightGray;
-  color: $defaultColor;
+  border-color: var(--inverseLabelColor);
+  background-color: var(--inverseLabelColor);
+  color: var(--inverseLabelTextColor);
 
   &.outline {
-    background-color: $defaultColor !important;
-    color: $lightGray;
+    background-color: var(--inverseLabelTextColor) !important;
+    color: var(--inverseLabelColor);
   }
 }
 
 .primary {
-  border-color: $primaryColor;
-  background-color: $primaryColor;
+  border-color: var(--primaryColor);
+  background-color: var(--primaryColor);
 
   &.outline {
-    color: $primaryColor;
+    color: var(--primaryColor);
   }
 }
 
 .success {
-  border-color: $successColor;
-  background-color: $successColor;
+  border-color: var(--successColor);
+  background-color: var(--successColor);
   color: #eee;
 
   &.outline {
-    color: $successColor;
+    color: var(--successColor);
   }
 }
 
 .warning {
-  border-color: $warningColor;
-  background-color: $warningColor;
+  border-color: var(--warningColor);
+  background-color: var(--warningColor);
 
   &.outline {
-    color: $warningColor;
+    color: var(--warningColor);
   }
 }
 
@@ -109,5 +109,5 @@
 /** Outline **/
 
 .outline {
-  background-color: $white;
+  background-color: var(--disabledLabelColor);
 }
diff --git a/frontend/src/Components/Link/Button.css b/frontend/src/Components/Link/Button.css
index d5b7e8200..0855b2de6 100644
--- a/frontend/src/Components/Link/Button.css
+++ b/frontend/src/Components/Link/Button.css
@@ -19,62 +19,62 @@
 }
 
 .danger {
-  border-color: $dangerBorderColor;
-  background-color: $dangerBackgroundColor;
-  color: $white;
+  border-color: var(--dangerBorderColor);
+  background-color: var(--dangerBackgroundColor);
+  color: var(--white);
 
   &:hover {
-    border-color: $dangerHoverBorderColor;
-    background-color: $dangerHoverBackgroundColor;
-    color: $white;
+    border-color: var(--dangerHoverBorderColor);
+    background-color: var(--dangerHoverBackgroundColor);
+    color: var(--white);
   }
 }
 
 .default {
-  border-color: $defaultBorderColor;
-  background-color: $defaultBackgroundColor;
-  color: $defaultColor;
+  border-color: var(--defaultBorderColor);
+  background-color: var(--defaultBackgroundColor);
+  color: var(--defaultColor);
 
   &:hover {
-    border-color: $defaultHoverBorderColor;
-    background-color: $defaultHoverBackgroundColor;
-    color: $defaultColor;
+    border-color: var(--defaultHoverBorderColor);
+    background-color: var(--defaultHoverBackgroundColor);
+    color: var(--defaultColor);
   }
 }
 
 .primary {
-  border-color: $primaryBorderColor;
-  background-color: $primaryBackgroundColor;
-  color: $white;
+  border-color: var(--primaryBorderColor);
+  background-color: var(--primaryBackgroundColor);
+  color: var(--white);
 
   &:hover {
-    border-color: $primaryHoverBorderColor;
-    background-color: $primaryHoverBackgroundColor;
-    color: $white;
+    border-color: var(--primaryHoverBorderColor);
+    background-color: var(--primaryHoverBackgroundColor);
+    color: var(--white);
   }
 }
 
 .success {
-  border-color: $successBorderColor;
-  background-color: $successBackgroundColor;
-  color: $white;
+  border-color: var(--successBorderColor);
+  background-color: var(--successBackgroundColor);
+  color: var(--white);
 
   &:hover {
-    border-color: $successHoverBorderColor;
-    background-color: $successHoverBackgroundColor;
-    color: $white;
+    border-color: var(--successHoverBorderColor);
+    background-color: var(--successHoverBackgroundColor);
+    color: var(--white);
   }
 }
 
 .warning {
-  border-color: $warningBorderColor;
-  background-color: $warningBackgroundColor;
-  color: $white;
+  border-color: var(--warningBorderColor);
+  background-color: var(--warningBackgroundColor);
+  color: var(--white);
 
   &:hover {
-    border-color: $warningHoverBorderColor;
-    background-color: $warningHoverBackgroundColor;
-    color: $white;
+    border-color: var(--warningHoverBorderColor);
+    background-color: var(--warningHoverBackgroundColor);
+    color: var(--white);
   }
 }
 
diff --git a/frontend/src/Components/Link/IconButton.css b/frontend/src/Components/Link/IconButton.css
index 2061243ee..b697e3bd4 100644
--- a/frontend/src/Components/Link/IconButton.css
+++ b/frontend/src/Components/Link/IconButton.css
@@ -12,10 +12,10 @@
   &:hover {
     border: none;
     background-color: inherit;
-    color: $iconButtonHoverColor;
+    color: var(--iconButtonHoverColor);
   }
 
   &.isDisabled {
-    color: $iconButtonDisabledColor;
+    color: var(--iconButtonDisabledColor);
   }
 }
diff --git a/frontend/src/Components/Link/Link.css b/frontend/src/Components/Link/Link.css
index ff0ed8d0c..47b6fb852 100644
--- a/frontend/src/Components/Link/Link.css
+++ b/frontend/src/Components/Link/Link.css
@@ -15,10 +15,10 @@
 }
 
 .to {
-  color: $linkColor;
+  color: var(--linkColor);
 
   &:hover {
-    color: $linkHoverColor;
+    color: var(--linkHoverColor);
     text-decoration: underline;
   }
 }
diff --git a/frontend/src/Components/Loading/LoadingIndicator.css b/frontend/src/Components/Loading/LoadingIndicator.css
index fd224b1d6..8732d786b 100644
--- a/frontend/src/Components/Loading/LoadingIndicator.css
+++ b/frontend/src/Components/Loading/LoadingIndicator.css
@@ -26,7 +26,7 @@
 
 .ripple {
   position: absolute;
-  border: 2px solid #3a3f51;
+  border: 2px solid var(--themeDarkColor);
   border-radius: 100%;
   animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
   animation-fill-mode: both;
diff --git a/frontend/src/Components/Menu/MenuButton.css b/frontend/src/Components/Menu/MenuButton.css
index 38812cfb7..ef7a8a5ff 100644
--- a/frontend/src/Components/Menu/MenuButton.css
+++ b/frontend/src/Components/Menu/MenuButton.css
@@ -10,12 +10,12 @@
   }
 
   &:hover {
-    color: $toobarButtonHoverColor;
+    color: var(--toobarButtonHoverColor);
   }
 }
 
 .isDisabled {
-  color: $disabledColor;
+  color: var(--disabledColor);
 
   pointer-events: none;
 }
diff --git a/frontend/src/Components/Menu/MenuContent.css b/frontend/src/Components/Menu/MenuContent.css
index b9327fdd7..d6c990131 100644
--- a/frontend/src/Components/Menu/MenuContent.css
+++ b/frontend/src/Components/Menu/MenuContent.css
@@ -2,7 +2,7 @@
   z-index: $popperZIndex;
   display: flex;
   flex-direction: column;
-  background-color: $toolbarMenuItemBackgroundColor;
+  background-color: var(--toolbarMenuItemBackgroundColor);
   line-height: 20px;
 }
 
diff --git a/frontend/src/Components/Menu/MenuItem.css b/frontend/src/Components/Menu/MenuItem.css
index 2eb2817af..a14a06014 100644
--- a/frontend/src/Components/Menu/MenuItem.css
+++ b/frontend/src/Components/Menu/MenuItem.css
@@ -5,19 +5,19 @@
   padding: 10px 20px;
   min-width: 150px;
   max-width: 250px;
-  background-color: $toolbarMenuItemBackgroundColor;
-  color: $menuItemColor;
+  background-color: var(--toolbarMenuItemBackgroundColor);
+  color: var(--menuItemColor);
   line-height: 20px;
 
   &:hover,
   &:focus {
-    background-color: $toolbarMenuItemHoverBackgroundColor;
-    color: $menuItemHoverColor;
+    background-color: var(--toolbarMenuItemHoverBackgroundColor);
+    color: var(--menuItemHoverColor);
     text-decoration: none;
   }
 }
 
 .isDisabled {
-  color: $disabledColor;
+  color: var(--disabledColor);
   pointer-events: none;
 }
diff --git a/frontend/src/Components/Menu/MenuItemSeparator.css b/frontend/src/Components/Menu/MenuItemSeparator.css
index e48e7f16f..199b15b56 100644
--- a/frontend/src/Components/Menu/MenuItemSeparator.css
+++ b/frontend/src/Components/Menu/MenuItemSeparator.css
@@ -2,5 +2,5 @@
   overflow: hidden;
   min-height: 1px;
   height: 1px;
-  background-color: $themeDarkColor;
+  background-color: var(--themeDarkColor);
 }
diff --git a/frontend/src/Components/Modal/Modal.css b/frontend/src/Components/Modal/Modal.css
index d7269ea46..33f849945 100644
--- a/frontend/src/Components/Modal/Modal.css
+++ b/frontend/src/Components/Modal/Modal.css
@@ -12,7 +12,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: $modalBackdropBackgroundColor;
+  background-color: var(--modalBackdropBackgroundColor);
   opacity: 1;
 }
 
diff --git a/frontend/src/Components/Modal/ModalContent.css b/frontend/src/Components/Modal/ModalContent.css
index afd798dfa..d7a1212ec 100644
--- a/frontend/src/Components/Modal/ModalContent.css
+++ b/frontend/src/Components/Modal/ModalContent.css
@@ -4,7 +4,7 @@
   flex-direction: column;
   flex-grow: 1;
   width: 100%;
-  background-color: $modalBackgroundColor;
+  background-color: var(--modalBackgroundColor);
 }
 
 .closeButton {
@@ -18,6 +18,6 @@
   line-height: 60px;
 
   &:hover {
-    color: $modalCloseButtonHoverColor;
+    color: var(--modalCloseButtonHoverColor);
   }
 }
diff --git a/frontend/src/Components/Modal/ModalFooter.css b/frontend/src/Components/Modal/ModalFooter.css
index 3b817d2bf..9ce992b2e 100644
--- a/frontend/src/Components/Modal/ModalFooter.css
+++ b/frontend/src/Components/Modal/ModalFooter.css
@@ -4,7 +4,7 @@
   justify-content: flex-end;
   flex-shrink: 0;
   padding: 15px 30px;
-  border-top: 1px solid $borderColor;
+  border-top: 1px solid var(--borderColor);
 
   a,
   button {
diff --git a/frontend/src/Components/Modal/ModalHeader.css b/frontend/src/Components/Modal/ModalHeader.css
index eab77a9f8..cd1e54d84 100644
--- a/frontend/src/Components/Modal/ModalHeader.css
+++ b/frontend/src/Components/Modal/ModalHeader.css
@@ -3,6 +3,6 @@
 
   flex-shrink: 0;
   padding: 15px 50px 15px 30px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
   font-size: 18px;
 }
diff --git a/frontend/src/Components/MonitorToggleButton.css b/frontend/src/Components/MonitorToggleButton.css
index 09b64f1ab..59376129d 100644
--- a/frontend/src/Components/MonitorToggleButton.css
+++ b/frontend/src/Components/MonitorToggleButton.css
@@ -6,6 +6,6 @@
 }
 
 .isDisabled {
-  color: $disabledColor;
+  color: var(--disabledColor);
   cursor: not-allowed;
 }
diff --git a/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css b/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css
index 4425e0e0d..e8a2b0ce2 100644
--- a/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css
+++ b/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css
@@ -8,8 +8,8 @@
 .key {
   padding: 2px 4px;
   border-radius: 3px;
-  background-color: $defaultColor;
+  background-color: var(--defaultColor);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-  color: $white;
+  color: var(--white);
   font-size: 16px;
 }
diff --git a/frontend/src/Components/Page/Header/PageHeader.css b/frontend/src/Components/Page/Header/PageHeader.css
index c4dc3f844..b94bd64b8 100644
--- a/frontend/src/Components/Page/Header/PageHeader.css
+++ b/frontend/src/Components/Page/Header/PageHeader.css
@@ -4,8 +4,8 @@
   align-items: center;
   flex: 0 0 auto;
   height: $headerHeight;
-  background-color: $themeAlternateBlue;
-  color: $white;
+  background-color: var(--pageHeaderBackgroundColor);
+  color: var(--white);
 }
 
 .logoContainer {
@@ -41,7 +41,7 @@
   composes: link from '~Components/Link/Link.css';
 
   width: 30px;
-  color: $themeRed;
+  color: var(--themeRed);
   text-align: center;
   line-height: 60px;
 
diff --git a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css
index 0fee43911..5d41fc62e 100644
--- a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css
+++ b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css
@@ -5,7 +5,7 @@
   text-align: center;
 
   &:hover {
-    color: $themeDarkColor;
+    color: var(--themeDarkColor);
   }
 }
 
diff --git a/frontend/src/Components/Page/Header/SeriesSearchInput.css b/frontend/src/Components/Page/Header/SeriesSearchInput.css
index 165105875..c5d7bf3ef 100644
--- a/frontend/src/Components/Page/Header/SeriesSearchInput.css
+++ b/frontend/src/Components/Page/Header/SeriesSearchInput.css
@@ -12,22 +12,22 @@
 .ripple {
   composes: ripple from '~Components/Loading/LoadingIndicator.css';
 
-  border: 1px solid $toolbarColor;
+  border: 1px solid var(--toolbarColor);
 }
 
 .input {
   margin-left: 8px;
   width: 200px;
   border: none;
-  border-bottom: solid 1px $white;
+  border-bottom: solid 1px var(--white);
   border-radius: 0;
   background-color: transparent;
   box-shadow: none;
-  color: $white;
+  color: var(--white);
   transition: border 0.3s ease-out;
 
   &::placeholder {
-    color: $white;
+    color: var(--white);
     transition: color 0.3s ease-out;
   }
 
@@ -60,13 +60,13 @@
     overflow-y: auto;
     min-width: 100%;
     max-height: 230px;
-    border: 1px solid $themeDarkColor;
+    border: 1px solid var(--themeDarkColor);
     border-radius: 4px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    background-color: $themeDarkColor;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
-    color: $menuItemColor;
+    background-color: var(--themeDarkColor);
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+    color: var(--menuItemColor);
   }
 }
 
@@ -82,12 +82,12 @@
 }
 
 .highlighted {
-  background-color: $themeLightColor;
+  background-color: var(--themeLightColor);
 }
 
 .sectionTitle {
   padding: 5px 8px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .addNewSeriesSuggestion {
diff --git a/frontend/src/Components/Page/Header/SeriesSearchResult.css b/frontend/src/Components/Page/Header/SeriesSearchResult.css
index 29edc382b..5a5343633 100644
--- a/frontend/src/Components/Page/Header/SeriesSearchResult.css
+++ b/frontend/src/Components/Page/Header/SeriesSearchResult.css
@@ -21,7 +21,7 @@
 .alternateTitle {
   composes: title;
 
-  color: $disabledColor;
+  color: var(--disabledColor);
   font-size: $smallFontSize;
 }
 
diff --git a/frontend/src/Components/Page/LoadingPage.css b/frontend/src/Components/Page/LoadingPage.css
index 7253efe28..af5faab09 100644
--- a/frontend/src/Components/Page/LoadingPage.css
+++ b/frontend/src/Components/Page/LoadingPage.css
@@ -1,5 +1,7 @@
 .page {
   composes: page from '~./Page.css';
+
+  background-color: var(--pageBackground);
 }
 
 .logoFull {
diff --git a/frontend/src/Components/Page/PageContentFooter.css b/frontend/src/Components/Page/PageContentFooter.css
index 0f323bc9a..4709af871 100644
--- a/frontend/src/Components/Page/PageContentFooter.css
+++ b/frontend/src/Components/Page/PageContentFooter.css
@@ -2,7 +2,7 @@
   display: flex;
   flex: 0 0 auto;
   padding: 20px;
-  background-color: #f1f1f1;
+  background-color: var(--pageFooterBackground);
 }
 
 @media only screen and (max-width: $breakpointSmall) {
diff --git a/frontend/src/Components/Page/PageJumpBarItem.css b/frontend/src/Components/Page/PageJumpBarItem.css
index f1a0c3699..235562a2e 100644
--- a/frontend/src/Components/Page/PageJumpBarItem.css
+++ b/frontend/src/Components/Page/PageJumpBarItem.css
@@ -1,6 +1,6 @@
 .jumpBarItem {
   flex: 1 1 $jumpBarItemHeight;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
   text-align: center;
   font-weight: bold;
 
diff --git a/frontend/src/Components/Page/Sidebar/Messages/Message.css b/frontend/src/Components/Page/Sidebar/Messages/Message.css
index 7d53adb69..d1d94ce08 100644
--- a/frontend/src/Components/Page/Sidebar/Messages/Message.css
+++ b/frontend/src/Components/Page/Sidebar/Messages/Message.css
@@ -1,6 +1,6 @@
 .message {
   display: flex;
-  border-left: 3px solid $infoColor;
+  border-left: 3px solid var(--infoColor);
 }
 
 .iconContainer,
@@ -9,7 +9,7 @@
   justify-content: center;
   flex-direction: column;
   padding: 2px 0;
-  color: $sidebarColor;
+  color: var(--sidebarColor);
 }
 
 .iconContainer {
@@ -26,17 +26,17 @@
 /* Types */
 
 .error {
-  border-left-color: $dangerColor;
+  border-left-color: var(--dangerColor);
 }
 
 .info {
-  border-left-color: $infoColor;
+  border-left-color: var(--infoColor);
 }
 
 .success {
-  border-left-color: $successColor;
+  border-left-color: var(--successColor);
 }
 
 .warning {
-  border-left-color: $warningColor;
+  border-left-color: var(--warningColor);
 }
diff --git a/frontend/src/Components/Page/Sidebar/PageSidebar.css b/frontend/src/Components/Page/Sidebar/PageSidebar.css
index 3f2abeee7..ee44c0407 100644
--- a/frontend/src/Components/Page/Sidebar/PageSidebar.css
+++ b/frontend/src/Components/Page/Sidebar/PageSidebar.css
@@ -2,7 +2,7 @@
   flex: 0 0 $sidebarWidth;
   overflow: hidden;
   width: $sidebarWidth;
-  background-color: $sidebarBackgroundColor;
+  background-color: var(--sidebarBackgroundColor);
   transition: transform 300ms ease-in-out;
   transform: translateX(0);
 }
@@ -11,8 +11,8 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background-color: $sidebarBackgroundColor;
-  color: $white;
+  background-color: var(--sidebarBackgroundColor);
+  color: var(--white);
 }
 
 @media only screen and (max-width: $breakpointSmall) {
diff --git a/frontend/src/Components/Page/Sidebar/PageSidebarItem.css b/frontend/src/Components/Page/Sidebar/PageSidebarItem.css
index dbf0bd2ba..7c9d12073 100644
--- a/frontend/src/Components/Page/Sidebar/PageSidebarItem.css
+++ b/frontend/src/Components/Page/Sidebar/PageSidebarItem.css
@@ -1,21 +1,21 @@
 .item {
   border-left: 3px solid transparent;
-  color: $sidebarColor;
+  color: var(--sidebarColor);
   transition: border-left 0.3s ease-in-out;
 }
 
 .isActiveItem {
-  border-left: 3px solid $themeAlternateBlue;
+  border-left: 3px solid var(--themeAlternateBlue);
 }
 
 .link {
   display: block;
   padding: 12px 24px;
-  color: $sidebarColor;
+  color: var(--sidebarColor);
 
   &:hover,
   &:focus {
-    color: $themeBlue;
+    color: var(--themeBlue);
     text-decoration: none;
   }
 }
@@ -27,11 +27,11 @@
 }
 
 .isActiveLink {
-  color: $themeAlternateBlue;
+  color: var(--themeAlternateBlue);
 }
 
 .isActiveParentLink {
-  background-color: $sidebarActiveBackgroundColor;
+  background-color: var(--sidebarActiveBackgroundColor);
 }
 
 .iconContainer {
diff --git a/frontend/src/Components/Page/Toolbar/PageToolbar.css b/frontend/src/Components/Page/Toolbar/PageToolbar.css
index e040bc884..d7fb0d5d8 100644
--- a/frontend/src/Components/Page/Toolbar/PageToolbar.css
+++ b/frontend/src/Components/Page/Toolbar/PageToolbar.css
@@ -4,8 +4,8 @@
   flex: 0 0 auto;
   padding: 0 20px;
   height: $toolbarHeight;
-  background-color: $toolbarBackgroundColor;
-  color: $toolbarColor;
+  background-color: var(--toolbarBackgroundColor);
+  color: var(--toolbarColor);
   line-height: 60px;
 }
 
diff --git a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css
index e729ed000..0b6918296 100644
--- a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css
+++ b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css
@@ -6,16 +6,16 @@
   text-align: center;
 
   &:hover {
-    color: $toobarButtonHoverColor;
+    color: var(--toobarButtonHoverColor);
   }
 
   &.isDisabled {
-    color: $disabledColor;
+    color: var(--disabledColor);
   }
 }
 
 .isDisabled {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .labelContainer {
@@ -27,7 +27,7 @@
 
 .label {
   padding: 0 3px;
-  color: $toolbarLabelColor;
+  color: var(--toolbarLabelColor);
   font-size: $extraSmallFontSize;
   line-height: calc($extraSmallFontSize + 1px);
 }
diff --git a/frontend/src/Components/ProgressBar.css b/frontend/src/Components/ProgressBar.css
index 777187eec..33c047bc6 100644
--- a/frontend/src/Components/ProgressBar.css
+++ b/frontend/src/Components/ProgressBar.css
@@ -3,7 +3,7 @@
   overflow: hidden;
   width: 100%;
   border-radius: 4px;
-  background-color: #f5f5f5;
+  background-color: var(--progressBarBackgroundColor);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -14,13 +14,13 @@
   width: 0;
   height: 100%;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  color: $white;
+  color: var(--white);
   transition: width 0.6s ease;
 }
 
 .frontTextContainer {
   z-index: 1;
-  color: $white;
+  color: var(--white);
 }
 
 .backTextContainer,
@@ -42,35 +42,35 @@
 }
 
 .primary {
-  background-color: $primaryColor;
+  background-color: var(--primaryColor);
 }
 
 .danger {
-  background-color: $dangerColor;
+  background-color: var(--dangerColor);
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
+    background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
   }
 }
 
 .success {
-  background-color: $successColor;
+  background-color: var(--successColor);
 }
 
 .purple {
-  background-color: $purple;
+  background-color: var(--purple);
 }
 
 .warning {
-  background-color: $warningColor;
+  background-color: var(--warningColor);
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
   }
 }
 
 .info {
-  background-color: $infoColor;
+  background-color: var(--infoColor);
 }
 
 .small {
diff --git a/frontend/src/Components/Scroller/OverlayScroller.css b/frontend/src/Components/Scroller/OverlayScroller.css
index 0e8a2ffd7..c1836d365 100644
--- a/frontend/src/Components/Scroller/OverlayScroller.css
+++ b/frontend/src/Components/Scroller/OverlayScroller.css
@@ -10,10 +10,10 @@
   min-height: 100px;
   border: 1px solid transparent;
   border-radius: 5px;
-  background-color: $scrollbarBackgroundColor;
+  background-color: var(--scrollbarBackgroundColor);
   background-clip: padding-box;
 
   &:hover {
-    background-color: $scrollbarHoverBackgroundColor;
+    background-color: var(--scrollbarHoverBackgroundColor);
   }
 }
diff --git a/frontend/src/Components/Table/Cells/TableRowCell.css b/frontend/src/Components/Table/Cells/TableRowCell.css
index 1c3e6fc5a..47ce0d22e 100644
--- a/frontend/src/Components/Table/Cells/TableRowCell.css
+++ b/frontend/src/Components/Table/Cells/TableRowCell.css
@@ -1,6 +1,6 @@
 .cell {
   padding: 8px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--borderColor);
   line-height: 1.52857143;
 }
 
diff --git a/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css b/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css
index 204773c3d..ef3d9b062 100644
--- a/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css
+++ b/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css
@@ -4,7 +4,7 @@
   width: 100%;
   border: 1px solid #aaa;
   border-radius: 4px;
-  background: #fafafa;
+  background: var(--inputBackgroundColor);
 }
 
 .checkContainer {
diff --git a/frontend/src/Components/Table/TablePager.css b/frontend/src/Components/Table/TablePager.css
index 19f5a8f6b..d73a0d0c0 100644
--- a/frontend/src/Components/Table/TablePager.css
+++ b/frontend/src/Components/Table/TablePager.css
@@ -46,11 +46,11 @@
 }
 
 .records {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .disabledPageButton {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .pageSelect {
diff --git a/frontend/src/Components/Table/TableRow.css b/frontend/src/Components/Table/TableRow.css
index dcc6ad8cf..df297a5fe 100644
--- a/frontend/src/Components/Table/TableRow.css
+++ b/frontend/src/Components/Table/TableRow.css
@@ -2,6 +2,6 @@
   transition: background-color 500ms;
 
   &:hover {
-    background-color: $tableRowHoverBackgroundColor;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }
diff --git a/frontend/src/Components/Table/VirtualTableRow.css b/frontend/src/Components/Table/VirtualTableRow.css
index f4c825b64..fcae53bf6 100644
--- a/frontend/src/Components/Table/VirtualTableRow.css
+++ b/frontend/src/Components/Table/VirtualTableRow.css
@@ -3,7 +3,7 @@
   transition: background-color 500ms;
 
   &:hover {
-    background-color: #fafbfc;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }
 
diff --git a/frontend/src/Components/Tooltip/Popover.css b/frontend/src/Components/Tooltip/Popover.css
index 7b0592844..7d9e9da5d 100644
--- a/frontend/src/Components/Tooltip/Popover.css
+++ b/frontend/src/Components/Tooltip/Popover.css
@@ -1,13 +1,14 @@
 .title {
   padding: 10px 20px;
-  border-bottom: 1px solid $popoverTitleBorderColor;
-  background-color: $popoverTitleBackgroundColor;
+  border-bottom: 1px solid var(--popoverTitleBorderColor);
+  background-color: var(--popoverTitleBackgroundColor);
   font-size: 16px;
 }
 
 .body {
   overflow: auto;
   padding: 10px;
+  background-color: var(--popoverBodyBackgroundColor);
 }
 
 .tooltipBody {
diff --git a/frontend/src/Components/Tooltip/Tooltip.css b/frontend/src/Components/Tooltip/Tooltip.css
index 7075042d2..8ab533d07 100644
--- a/frontend/src/Components/Tooltip/Tooltip.css
+++ b/frontend/src/Components/Tooltip/Tooltip.css
@@ -7,14 +7,14 @@
   position: relative;
 
   &.default {
-    background-color: $white;
-    box-shadow: 0 5px 10px $popoverShadowColor;
+    background-color: var(--popoverBodyBackgroundColor);
+    box-shadow: 0 5px 10px var(--popoverShadowColor);
   }
 
   &.inverse {
-    background-color: $themeDarkColor;
-    box-shadow: 0 5px 10px $popoverShadowInverseColor;
-    color: $white;
+    background-color: var(--themeDarkColor);
+    box-shadow: 0 5px 10px var(--popoverShadowInverseColor);
+    color: var(--white);
   }
 }
 
@@ -50,20 +50,20 @@
     content: ' ';
 
     &.default {
-      border-top-color: $popoverArrowBorderColor;
+      border-top-color: var(--popoverArrowBorderColor);
     }
 
     &.inverse {
-      border-top-color: $popoverArrowBorderInverseColor;
+      border-top-color: var(--popoverArrowBorderInverseColor);
     }
   }
 
   &.default {
-    border-top-color: $popoverArrowBorderColor;
+    border-top-color: var(--popoverArrowBorderColor);
   }
 
   &.inverse {
-    border-top-color: $popoverArrowBorderInverseColor;
+    border-top-color: var(--popoverArrowBorderInverseColor);
   }
 }
 
@@ -79,20 +79,20 @@
     content: ' ';
 
     &.default {
-      border-right-color: $popoverArrowBorderColor;
+      border-right-color: var(--popoverArrowBorderColor);
     }
 
     &.inverse {
-      border-right-color: $popoverArrowBorderInverseColor;
+      border-right-color: var(--popoverArrowBorderInverseColor);
     }
   }
 
   &.default {
-    border-right-color: $popoverArrowBorderColor;
+    border-right-color: var(--popoverArrowBorderColor);
   }
 
   &.inverse {
-    border-right-color: $popoverArrowBorderInverseColor;
+    border-right-color: var(--popoverArrowBorderInverseColor);
   }
 }
 
@@ -108,20 +108,20 @@
     content: ' ';
 
     &.default {
-      border-bottom-color: $popoverArrowBorderColor;
+      border-bottom-color: var(--popoverArrowBorderColor);
     }
 
     &.inverse {
-      border-bottom-color: $popoverArrowBorderInverseColor;
+      border-bottom-color: var(--popoverArrowBorderInverseColor);
     }
   }
 
   &.default {
-    border-bottom-color: $popoverArrowBorderColor;
+    border-bottom-color: var(--popoverArrowBorderColor);
   }
 
   &.inverse {
-    border-bottom-color: $popoverArrowBorderInverseColor;
+    border-bottom-color: var(--popoverArrowBorderInverseColor);
   }
 }
 
@@ -137,20 +137,20 @@
     content: ' ';
 
     &.default {
-      border-left-color: $popoverArrowBorderColor;
+      border-left-color: var(--popoverArrowBorderColor);
     }
 
     &.inverse {
-      border-left-color: $popoverArrowBorderInverseColor;
+      border-left-color: var(--popoverArrowBorderInverseColor);
     }
   }
 
   &.default {
-    border-left-color: $popoverArrowBorderColor;
+    border-left-color: var(--popoverArrowBorderColor);
   }
 
   &.inverse {
-    border-left-color: $popoverArrowBorderInverseColor;
+    border-left-color: var(--popoverArrowBorderInverseColor);
   }
 }
 
diff --git a/frontend/src/Episode/EpisodeDetailsModalContent.css b/frontend/src/Episode/EpisodeDetailsModalContent.css
index 0fe2ceb15..086421012 100644
--- a/frontend/src/Episode/EpisodeDetailsModalContent.css
+++ b/frontend/src/Episode/EpisodeDetailsModalContent.css
@@ -27,10 +27,10 @@
 }
 
 .selectedTab {
-  border-color: $borderColor;
+  border-color: var(--borderColor);
   border-radius: 0 0 5px 5px;
   background-color: rgba(239, 239, 239, 0.4);
-  color: $black;
+  color: var(--black);
 }
 
 .tabContent {
diff --git a/frontend/src/Episode/EpisodeTitleLink.css b/frontend/src/Episode/EpisodeTitleLink.css
index 47d897238..7fd85c836 100644
--- a/frontend/src/Episode/EpisodeTitleLink.css
+++ b/frontend/src/Episode/EpisodeTitleLink.css
@@ -2,7 +2,7 @@
   composes: link from '~Components/Link/Link.css';
 
   &:hover {
-    color: $linkHoverColor;
+    color: var(--linkHoverColor);
     text-decoration: underline;
   }
 }
diff --git a/frontend/src/Episode/SceneInfo.css b/frontend/src/Episode/SceneInfo.css
index b881c6b98..6f1155494 100644
--- a/frontend/src/Episode/SceneInfo.css
+++ b/frontend/src/Episode/SceneInfo.css
@@ -17,6 +17,6 @@
 }
 
 .comment {
-  color: $darkGray;
+  color: var(--darkGray);
   font-size: $smallFontSize;
 }
diff --git a/frontend/src/Episode/Summary/EpisodeSummary.css b/frontend/src/Episode/Summary/EpisodeSummary.css
index 5a53e3c59..529fa0ae0 100644
--- a/frontend/src/Episode/Summary/EpisodeSummary.css
+++ b/frontend/src/Episode/Summary/EpisodeSummary.css
@@ -21,7 +21,7 @@
 .filesHeader {
   display: flex;
   margin-bottom: 10px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
 }
 
 .fileRow {
diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css
index ddef0be20..b8c9334c0 100644
--- a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css
+++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css
@@ -27,7 +27,7 @@
 
 .path {
   margin-right: 20px;
-  color: $dimColor;
+  color: var(--dimColor);
   word-break: break-word;
 }
 
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css
index 5eb1aba72..3be9c8f36 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css
@@ -41,7 +41,7 @@
 }
 
 .errorMessage {
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
 
 @media only screen and (max-width: $breakpointSmall) {
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css
index 941988144..bf4351181 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css
@@ -3,5 +3,5 @@
   margin: -8px 0;
   width: 100%;
   height: 25px;
-  border: 2px dashed $dangerColor;
+  border: 2px dashed var(--dangerColor);
 }
diff --git a/frontend/src/InteractiveImport/Season/SelectSeasonRow.css b/frontend/src/InteractiveImport/Season/SelectSeasonRow.css
index c43d879f4..223363b89 100644
--- a/frontend/src/InteractiveImport/Season/SelectSeasonRow.css
+++ b/frontend/src/InteractiveImport/Season/SelectSeasonRow.css
@@ -1,4 +1,4 @@
 .season {
   padding: 8px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
 }
diff --git a/frontend/src/InteractiveImport/Series/SelectSeriesRow.css b/frontend/src/InteractiveImport/Series/SelectSeriesRow.css
index f2573d585..9efd3d79b 100644
--- a/frontend/src/InteractiveImport/Series/SelectSeriesRow.css
+++ b/frontend/src/InteractiveImport/Series/SelectSeriesRow.css
@@ -1,4 +1,4 @@
 .series {
   padding: 8px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
 }
diff --git a/frontend/src/InteractiveSearch/ReleaseSceneIndicator.css b/frontend/src/InteractiveSearch/ReleaseSceneIndicator.css
index 949c16d86..0c5e1eb1c 100644
--- a/frontend/src/InteractiveSearch/ReleaseSceneIndicator.css
+++ b/frontend/src/InteractiveSearch/ReleaseSceneIndicator.css
@@ -31,28 +31,28 @@
 }
 
 .levelMixed {
-  border-color: $dangerColor;
-  color: $dangerColor;
+  border-color: var(--dangerColor);
+  color: var(--dangerColor);
 }
 
 .levelUnknown {
-  border-color: $warningColor;
-  color: $warningColor;
+  border-color: var(--warningColor);
+  color: var(--warningColor);
 }
 
 .levelMapped {
-  border-color: $textColor;
-  color: $textColor;
+  border-color: var(--textColor);
+  color: var(--textColor);
 }
 
 .levelNormal {
-  border-color: $textColor;
-  color: $textColor;
+  border-color: var(--textColor);
+  color: var(--textColor);
 }
 
 .levelNone {
-  border-color: $textColor;
-  color: $textColor;
+  border-color: var(--textColor);
+  color: var(--textColor);
   opacity: 0.2;
 
   &:hover {
@@ -61,6 +61,6 @@
 }
 
 .levelNotRequested {
-  border-color: $dangerColor;
-  color: $dangerColor;
+  border-color: var(--dangerColor);
+  color: var(--dangerColor);
 }
diff --git a/frontend/src/Organize/OrganizePreviewRow.css b/frontend/src/Organize/OrganizePreviewRow.css
index 1b3c8ca47..18592cf2e 100644
--- a/frontend/src/Organize/OrganizePreviewRow.css
+++ b/frontend/src/Organize/OrganizePreviewRow.css
@@ -2,7 +2,7 @@
   display: flex;
   margin-bottom: 5px;
   padding: 5px 0;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
 
   &:last-of-type {
     margin-bottom: 0;
diff --git a/frontend/src/SeasonPass/SeasonPassSeason.css b/frontend/src/SeasonPass/SeasonPassSeason.css
index 603d98ecd..f08426239 100644
--- a/frontend/src/SeasonPass/SeasonPassSeason.css
+++ b/frontend/src/SeasonPass/SeasonPassSeason.css
@@ -3,9 +3,9 @@
   align-items: stretch;
   overflow: hidden;
   margin: 2px 4px;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: #eee;
+  background-color: var(--seasonBackgroundColor);
   cursor: default;
 }
 
@@ -15,8 +15,8 @@
 
 .episodes {
   padding: 0 4px;
-  background-color: $white;
-  color: $defaultColor;
+  background-color: var(--episodesBackgroundColor);
+  color: var(--defaultColor);
 }
 
 .allEpisodes {
diff --git a/frontend/src/Series/Delete/DeleteSeriesModalContent.css b/frontend/src/Series/Delete/DeleteSeriesModalContent.css
index dbfef0871..df8e4822e 100644
--- a/frontend/src/Series/Delete/DeleteSeriesModalContent.css
+++ b/frontend/src/Series/Delete/DeleteSeriesModalContent.css
@@ -8,5 +8,5 @@
 
 .deleteFilesMessage {
   margin-top: 20px;
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
diff --git a/frontend/src/Series/Details/SeriesAlternateTitles.css b/frontend/src/Series/Details/SeriesAlternateTitles.css
index 758081f7f..5a04b02ae 100644
--- a/frontend/src/Series/Details/SeriesAlternateTitles.css
+++ b/frontend/src/Series/Details/SeriesAlternateTitles.css
@@ -3,6 +3,6 @@
 }
 
 .comment {
-  color: $darkGray;
+  color: var(--darkGray);
   font-size: $smallFontSize;
 }
diff --git a/frontend/src/Series/Details/SeriesDetails.css b/frontend/src/Series/Details/SeriesDetails.css
index 686a0c30f..a5056d12e 100644
--- a/frontend/src/Series/Details/SeriesDetails.css
+++ b/frontend/src/Series/Details/SeriesDetails.css
@@ -20,7 +20,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: $black;
+  background: var(--black);
   opacity: 0.7;
 }
 
@@ -29,7 +29,7 @@
   padding: 30px;
   width: 100%;
   height: 100%;
-  color: $white;
+  color: var(--white);
 }
 
 .poster {
@@ -75,7 +75,7 @@
   width: 40px;
 
   &:hover {
-    color: $iconButtonHoverLightColor;
+    color: var(--iconButtonHoverLightColor);
   }
 }
 
@@ -99,7 +99,7 @@
   white-space: nowrap;
 
   &:hover {
-    color: $iconButtonHoverLightColor;
+    color: var(--iconButtonHoverLightColor);
   }
 }
 
diff --git a/frontend/src/Series/Details/SeriesDetailsSeason.css b/frontend/src/Series/Details/SeriesDetailsSeason.css
index 467a6258d..bf6740a76 100644
--- a/frontend/src/Series/Details/SeriesDetailsSeason.css
+++ b/frontend/src/Series/Details/SeriesDetailsSeason.css
@@ -1,8 +1,8 @@
 .season {
   margin-bottom: 20px;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardBackgroundColor);
 
   &:last-of-type {
     margin-bottom: 0;
@@ -76,7 +76,7 @@
 
 .episodes {
   padding-top: 15px;
-  border-top: 1px solid $borderColor;
+  border-top: 1px solid var(--borderColor);
 }
 
 .collapseButtonContainer {
@@ -85,10 +85,10 @@
   justify-content: center;
   padding: 10px 15px;
   width: 100%;
-  border-top: 1px solid $borderColor;
+  border-top: 1px solid var(--borderColor);
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
-  background-color: #fafafa;
+  background-color: var(--collapseButtonBackgroundColor);
 }
 
 .collapseButtonIcon {
diff --git a/frontend/src/Series/Editor/Delete/DeleteSeriesModalContent.css b/frontend/src/Series/Editor/Delete/DeleteSeriesModalContent.css
index 950fdc27d..02a0514be 100644
--- a/frontend/src/Series/Editor/Delete/DeleteSeriesModalContent.css
+++ b/frontend/src/Series/Editor/Delete/DeleteSeriesModalContent.css
@@ -9,5 +9,5 @@
 
 .path {
   margin-left: 5px;
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverview.css b/frontend/src/Series/Index/Overview/SeriesIndexOverview.css
index 92afae849..1f482a2d6 100644
--- a/frontend/src/Series/Index/Overview/SeriesIndexOverview.css
+++ b/frontend/src/Series/Index/Overview/SeriesIndexOverview.css
@@ -17,10 +17,10 @@ $hoverScale: 1.05;
   composes: link from '~Components/Link/Link.css';
 
   display: block;
-  color: $defaultColor;
+  color: var(--defaultColor);
 
   &:hover {
-    color: $defaultColor;
+    color: var(--defaultColor);
     text-decoration: none;
   }
 }
@@ -34,8 +34,8 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent $dangerColor transparent transparent;
-  color: $white;
+  border-color: transparent var(--dangerColor) transparent transparent;
+  color: var(--white);
 }
 
 .info {
diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverviews.css b/frontend/src/Series/Index/Overview/SeriesIndexOverviews.css
index 5f8ca5baf..f393dcbb0 100644
--- a/frontend/src/Series/Index/Overview/SeriesIndexOverviews.css
+++ b/frontend/src/Series/Index/Overview/SeriesIndexOverviews.css
@@ -5,7 +5,7 @@
 .container {
   &:hover {
     .content {
-      background-color: $tableRowHoverBackgroundColor;
+      background-color: var(--tableRowHoverBackgroundColor);
     }
   }
 }
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPoster.css b/frontend/src/Series/Index/Posters/SeriesIndexPoster.css
index a99527037..83dda335a 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPoster.css
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPoster.css
@@ -5,7 +5,7 @@ $hoverScale: 1.05;
 
   &:hover {
     z-index: 2;
-    box-shadow: 0 0 12px $black;
+    box-shadow: 0 0 12px var(--black);
     transition: all 200ms ease-in;
 
     .controls {
@@ -25,7 +25,7 @@ $hoverScale: 1.05;
   position: relative;
   display: block;
   height: 70px;
-  background-color: $defaultColor;
+  background-color: var(--defaultColor);
 }
 
 .overlayTitle {
@@ -38,13 +38,13 @@ $hoverScale: 1.05;
   padding: 5px;
   width: 100%;
   height: 100%;
-  color: $offWhite;
+  color: var(--offWhite);
   text-align: center;
   font-size: 20px;
 }
 
 .nextAiring {
-  background-color: #fafbfc;
+  background-color: var(--seriesBackgroundColor);
   text-align: center;
   font-size: $smallFontSize;
 }
@@ -52,7 +52,7 @@ $hoverScale: 1.05;
 .title {
   @add-mixin truncate;
 
-  background-color: #fafbfc;
+  background-color: var(--seriesBackgroundColor);
   text-align: center;
   font-size: $smallFontSize;
 }
@@ -66,8 +66,8 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent $dangerColor transparent transparent;
-  color: $white;
+  border-color: transparent var(--dangerColor) transparent transparent;
+  color: var(--white);
 }
 
 .controls {
@@ -77,7 +77,7 @@ $hoverScale: 1.05;
   z-index: 3;
   border-radius: 4px;
   background-color: #4f566f;
-  color: $white;
+  color: var(--white);
   font-size: $smallFontSize;
   opacity: 0;
   transition: opacity 0;
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css
index aab27d827..17741773d 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.css
@@ -1,5 +1,5 @@
 .info {
-  background-color: #fafbfc;
+  background-color: var(--seriesBackgroundColor);
   text-align: center;
   font-size: $smallFontSize;
 }
diff --git a/frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.css b/frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.css
index b98bb33d5..ce5313877 100644
--- a/frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.css
+++ b/frontend/src/Series/Index/ProgressBar/SeriesIndexProgressBar.css
@@ -3,7 +3,7 @@
 
   border-radius: 0;
   background-color: #5b5b5b;
-  color: $white;
+  color: var(--white);
   transition: width 200ms ease;
 }
 
diff --git a/frontend/src/Series/Index/SeriesIndexFooter.css b/frontend/src/Series/Index/SeriesIndexFooter.css
index 71d0439b6..c1c4b5a46 100644
--- a/frontend/src/Series/Index/SeriesIndexFooter.css
+++ b/frontend/src/Series/Index/SeriesIndexFooter.css
@@ -21,32 +21,32 @@
 .continuing {
   composes: legendItemColor;
 
-  background-color: $primaryColor;
+  background-color: var(--primaryColor);
 }
 
 .ended {
   composes: legendItemColor;
 
-  background-color: $successColor;
+  background-color: var(--successColor);
 }
 
 .missingMonitored {
   composes: legendItemColor;
 
-  background-color: $dangerColor;
+  background-color: var(--dangerColor);
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
+    background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
   }
 }
 
 .missingUnmonitored {
   composes: legendItemColor;
 
-  background-color: $warningColor;
+  background-color: var(--warningColor);
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
   }
 }
 
diff --git a/frontend/src/Series/Index/Table/SeriesIndexRow.css b/frontend/src/Series/Index/Table/SeriesIndexRow.css
index df4b4b9ab..c5375a7d7 100644
--- a/frontend/src/Series/Index/Table/SeriesIndexRow.css
+++ b/frontend/src/Series/Index/Table/SeriesIndexRow.css
@@ -37,7 +37,7 @@
   position: relative;
   display: block;
   height: 70px;
-  background-color: $defaultColor;
+  background-color: var(--defaultColor);
 }
 
 .bannerImage {
@@ -55,7 +55,7 @@
   padding: 5px;
   width: 100%;
   height: 100%;
-  color: $offWhite;
+  color: var(--offWhite);
   text-align: center;
   font-size: 20px;
 }
@@ -125,7 +125,7 @@
 }
 
 .ratings {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 0 80px;
 }
diff --git a/frontend/src/Settings/AdvancedSettingsButton.css b/frontend/src/Settings/AdvancedSettingsButton.css
index 5f0d3b9f2..f08bdc017 100644
--- a/frontend/src/Settings/AdvancedSettingsButton.css
+++ b/frontend/src/Settings/AdvancedSettingsButton.css
@@ -19,13 +19,13 @@
 }
 
 .indicatorBackground {
-  color: $themeDarkColor;
+  color: var(--themeDarkColor);
 }
 
 .enabled {
-  color: $successColor;
+  color: var(--successColor);
 }
 
 .disabled {
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css
index 81b4f1510..5f650aaf9 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css
@@ -6,15 +6,15 @@
 .addDownloadClient {
   composes: downloadClient from '~./DownloadClient.css';
 
-  background-color: $cardAlternateBackgroundColor;
-  color: $gray;
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
   text-align: center;
 }
 
 .center {
   display: inline-block;
   padding: 5px 20px 0;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardCenterBackgroundColor);
 }
diff --git a/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css b/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css
index 13f35bed4..4db0b47ac 100644
--- a/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css
+++ b/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css
@@ -3,7 +3,7 @@
   align-items: stretch;
   margin-bottom: 10px;
   height: 30px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
   line-height: 30px;
 }
 
diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css
index 7e59c9b00..92e533c7e 100644
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css
@@ -3,7 +3,7 @@
   align-items: stretch;
   margin-bottom: 10px;
   height: 30px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
   line-height: 30px;
 }
 
diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css
index 3db4e69d6..e704fc568 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css
+++ b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css
@@ -6,15 +6,15 @@
 .addList {
   composes: list from '~./ImportList.css';
 
-  background-color: $cardAlternateBackgroundColor;
-  color: $gray;
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
   text-align: center;
 }
 
 .center {
   display: inline-block;
   padding: 5px 20px 0;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardCenterBackgroundColor);
 }
diff --git a/frontend/src/Settings/Indexers/Indexers/Indexers.css b/frontend/src/Settings/Indexers/Indexers/Indexers.css
index bf2e72ba4..16597d0e0 100644
--- a/frontend/src/Settings/Indexers/Indexers/Indexers.css
+++ b/frontend/src/Settings/Indexers/Indexers/Indexers.css
@@ -6,15 +6,15 @@
 .addIndexer {
   composes: indexer from '~./Indexer.css';
 
-  background-color: $cardAlternateBackgroundColor;
-  color: $gray;
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
   text-align: center;
 }
 
 .center {
   display: inline-block;
   padding: 5px 20px 0;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardCenterBackgroundColor);
 }
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
index 66e9bd73a..f65bed4df 100644
--- a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css
@@ -19,7 +19,7 @@
 
 .footNote {
   display: flex;
-  color: $helpTextColor;
+  color: var(--helpTextColor);
 
   .icon {
     margin-top: 3px;
@@ -29,7 +29,7 @@
 
   code {
     padding: 0 1px;
-    border: 1px solid $borderColor;
+    border: 1px solid var(--borderColor);
     background-color: #f7f7f7;
   }
 }
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingOption.css b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css
index 27c538013..824cf247e 100644
--- a/frontend/src/Settings/MediaManagement/Naming/NamingOption.css
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css
@@ -3,7 +3,7 @@
   align-items: stretch;
   flex-wrap: wrap;
   margin: 3px;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
 
   &:hover {
     .token {
@@ -27,7 +27,7 @@
 .token {
   flex: 0 0 50%;
   padding: 6px 16px;
-  background-color: #eee;
+  background-color: var(--popoverTitleBackgroundColor);
   font-family: $monoSpaceFontFamily;
 }
 
@@ -37,7 +37,7 @@
   justify-content: space-between;
   flex: 0 0 50%;
   padding: 6px 16px;
-  background-color: #ddd;
+  background-color: var(--popoverBodyBackgroundColor);
 
   .footNote {
     padding: 2px;
diff --git a/frontend/src/Settings/Notifications/Notifications/Notifications.css b/frontend/src/Settings/Notifications/Notifications/Notifications.css
index 11ea6e11f..986226ad8 100644
--- a/frontend/src/Settings/Notifications/Notifications/Notifications.css
+++ b/frontend/src/Settings/Notifications/Notifications/Notifications.css
@@ -6,15 +6,15 @@
 .addNotification {
   composes: notification from '~./Notification.css';
 
-  background-color: $cardAlternateBackgroundColor;
-  color: $gray;
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
   text-align: center;
 }
 
 .center {
   display: inline-block;
   padding: 5px 20px 0;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardCenterBackgroundColor);
 }
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfile.css b/frontend/src/Settings/Profiles/Delay/DelayProfile.css
index 238742efd..e2d6cd199 100644
--- a/frontend/src/Settings/Profiles/Delay/DelayProfile.css
+++ b/frontend/src/Settings/Profiles/Delay/DelayProfile.css
@@ -3,7 +3,7 @@
   align-items: stretch;
   margin-bottom: 10px;
   height: 30px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
   line-height: 30px;
 }
 
diff --git a/frontend/src/Settings/Profiles/Language/LanguageProfileItem.css b/frontend/src/Settings/Profiles/Language/LanguageProfileItem.css
index a10233929..090f5f09d 100644
--- a/frontend/src/Settings/Profiles/Language/LanguageProfileItem.css
+++ b/frontend/src/Settings/Profiles/Language/LanguageProfileItem.css
@@ -4,7 +4,7 @@
   width: 100%;
   border: 1px solid #aaa;
   border-radius: 4px;
-  background: #fafafa;
+  background: var(--inputBackgroundColor);
 }
 
 .checkContainer {
diff --git a/frontend/src/Settings/Profiles/Language/LanguageProfiles.css b/frontend/src/Settings/Profiles/Language/LanguageProfiles.css
index 7f2e3cf5d..440adff4b 100644
--- a/frontend/src/Settings/Profiles/Language/LanguageProfiles.css
+++ b/frontend/src/Settings/Profiles/Language/LanguageProfiles.css
@@ -6,8 +6,8 @@
 .addLanguageProfile {
   composes: languageProfile from '~./LanguageProfile.css';
 
-  background-color: $cardAlternateBackgroundColor;
-  color: $gray;
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
   text-align: center;
   font-size: 45px;
 }
@@ -15,7 +15,7 @@
 .center {
   display: inline-block;
   padding: 5px 20px 0;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardCenterBackgroundColor);
 }
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css
index bf54fedc2..c10bcd200 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css
@@ -4,7 +4,7 @@
   width: 100%;
   border: 1px solid #aaa;
   border-radius: 4px;
-  background: #fafafa;
+  background: var(--inputBackgroundColor);
 
   &.isInGroup {
     border-style: dashed;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css
index dad463b28..772bd9a80 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css
@@ -2,10 +2,10 @@
   width: 100%;
   border: 1px solid #aaa;
   border-radius: 4px;
-  background: #fafafa;
+  background: var(--inputBackgroundColor);
 
   &.editGroups {
-    background: #fcfcfc;
+    background: var(--inputBackgroundColor);
   }
 }
 
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.css b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css
index 437d152d2..32dad3fac 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfiles.css
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css
@@ -6,8 +6,8 @@
 .addQualityProfile {
   composes: qualityProfile from '~./QualityProfile.css';
 
-  background-color: $cardAlternateBackgroundColor;
-  color: $gray;
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
   text-align: center;
   font-size: 45px;
 }
@@ -15,7 +15,7 @@
 .center {
   display: inline-block;
   padding: 5px 20px 0;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardCenterBackgroundColor);
 }
diff --git a/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css
index 8f5a81252..9e9715e77 100644
--- a/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css
+++ b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css
@@ -6,15 +6,15 @@
 .addReleaseProfile {
   composes: releaseProfile from '~./ReleaseProfile.css';
 
-  background-color: $cardAlternateBackgroundColor;
-  color: $gray;
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
   text-align: center;
 }
 
 .center {
   display: inline-block;
   padding: 5px 20px 0;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   border-radius: 4px;
-  background-color: $white;
+  background-color: var(--cardCenterBackgroundColor);
 }
diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.css b/frontend/src/Settings/Quality/Definition/QualityDefinition.css
index 8f130ab7f..21025e770 100644
--- a/frontend/src/Settings/Quality/Definition/QualityDefinition.css
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.css
@@ -4,7 +4,7 @@
   margin: 5px 0;
   padding-top: 5px;
   height: 45px;
-  border-top: 1px solid $borderColor;
+  border-top: 1px solid var(--borderColor);
 }
 
 .quality,
@@ -28,7 +28,7 @@
   top: 9px;
   margin: 0 5px;
   height: 3px;
-  background-color: $sliderAccentColor;
+  background-color: var(--sliderAccentColor);
   box-shadow: 0 0 0 #000;
 
   &:nth-child(odd) {
@@ -41,9 +41,9 @@
   z-index: 0 !important;
   width: 18px;
   height: 18px;
-  border: 3px solid $sliderAccentColor;
+  border: 3px solid var(--sliderAccentColor);
   border-radius: 50%;
-  background-color: $white;
+  background-color: var(--white);
   text-align: center;
   cursor: pointer;
 }
diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinitions.css b/frontend/src/Settings/Quality/Definition/QualityDefinitions.css
index 689017684..da5347737 100644
--- a/frontend/src/Settings/Quality/Definition/QualityDefinitions.css
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinitions.css
@@ -25,7 +25,7 @@
 
 .sizeLimitHelpText {
   max-width: 500px;
-  color: $helpTextColor;
+  color: var(--helpTextColor);
 }
 
 @media only screen and (max-width: $breakpointSmall) {
diff --git a/frontend/src/Settings/Settings.css b/frontend/src/Settings/Settings.css
index 38e88e67f..ef69e9674 100644
--- a/frontend/src/Settings/Settings.css
+++ b/frontend/src/Settings/Settings.css
@@ -2,7 +2,7 @@
   composes: link from '~Components/Link/Link.css';
 
   border-bottom: 1px solid #e5e5e5;
-  color: #3a3f51;
+  color: var(--textColor);
   font-size: 21px;
 
   &:hover {
@@ -14,5 +14,5 @@
 .summary {
   margin-top: 10px;
   margin-bottom: 30px;
-  color: $dimColor;
+  color: var(--helpTextColor);
 }
diff --git a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css
index d11136863..75b157063 100644
--- a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css
+++ b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css
@@ -10,7 +10,7 @@
 .restriction {
   margin-bottom: 5px;
   padding-bottom: 5px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
 
   &:last-child {
     margin: 0;
diff --git a/frontend/src/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js
index bef36cfd4..604ed01f6 100644
--- a/frontend/src/Settings/UI/UISettings.js
+++ b/frontend/src/Settings/UI/UISettings.js
@@ -10,6 +10,8 @@ import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import themes from 'Styles/Themes';
+import titleCase from 'Utilities/String/titleCase';
 
 export const firstDayOfWeekOptions = [
   { key: 0, value: 'Sunday' },
@@ -58,6 +60,9 @@ class UISettings extends Component {
       ...otherProps
     } = this.props;
 
+    const themeOptions = Object.keys(themes)
+      .map((theme) => ({ key: theme, value: titleCase(theme) }));
+
     return (
       <PageContent title="UI Settings">
         <SettingsToolbarConnector
@@ -163,6 +168,18 @@ class UISettings extends Component {
                 <FieldSet
                   legend="Style"
                 >
+                  <FormGroup>
+                    <FormLabel>Theme</FormLabel>
+                    <FormInputGroup
+                      type={inputTypes.SELECT}
+                      name="theme"
+                      helpText="Change Application UI Theme, Inspired by Theme.Park"
+                      values={themeOptions}
+                      onChange={onInputChange}
+                      {...settings.theme}
+                    />
+                  </FormGroup>
+
                   <FormGroup>
                     <FormLabel>Enable Color-Impaired Mode</FormLabel>
                     <FormInputGroup
diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css
index 7a296c27f..09d26d083 100644
--- a/frontend/src/Styles/Mixins/scroller.css
+++ b/frontend/src/Styles/Mixins/scroller.css
@@ -16,11 +16,11 @@
     min-height: 100px;
     border: 1px solid transparent;
     border-radius: 5px;
-    background-color: $scrollbarBackgroundColor;
+    background-color: var(--scrollbarBackgroundColor);
     background-clip: padding-box;
 
     &:hover {
-      background-color: $scrollbarHoverBackgroundColor;
+      background-color: var(--scrollbarHoverBackgroundColor);
     }
   }
 }
diff --git a/frontend/src/Styles/Themes/dark.js b/frontend/src/Styles/Themes/dark.js
new file mode 100644
index 000000000..0c6c531e9
--- /dev/null
+++ b/frontend/src/Styles/Themes/dark.js
@@ -0,0 +1,238 @@
+const sonarrBlue = '#35c5f4';
+const darkGray = '#888';
+const gray = '#adadad';
+const black = '#000';
+const white = '#fff';
+const offWhite = '#f5f7fa';
+const purple = '#7a43b6';
+const pink = '#ff69b4';
+const lightGray = '#ddd';
+
+module.exports = {
+  textColor: '#ccc',
+  defaultColor: '#ccc',
+  disabledColor: '#999',
+  dimColor: '#555',
+  black,
+  white,
+  offWhite,
+  primaryColor: '#5d9cec',
+  selectedColor: '#f9be03',
+  successColor: '#00853d',
+  dangerColor: '#f05050',
+  warningColor: '#ffa500',
+  infoColor: '#5d9cec',
+  purple,
+  pink,
+  sonarrBlue,
+  helpTextColor: '#909293',
+  darkGray,
+  gray,
+  lightGray,
+
+  // Theme Colors
+
+  themeBlue: sonarrBlue,
+  themeAlternateBlue: '#2193b5',
+  themeRed: '#c4273c',
+  themeDarkColor: '#494949',
+  themeLightColor: '#595959',
+  pageBackground: '#202020',
+  pageFooterBackgroud: 'rgba(0, 0, 0, .25)',
+
+  torrentColor: '#00853d',
+  usenetColor: '#17b1d9',
+
+  // Labels
+  inverseLabelColor: '#ddd',
+  inverseLabelTextColor: '#333',
+  disabledLabelColor: '#838383',
+  infoTextColor: white,
+
+  // Links
+  defaultLinkHoverColor: '#fff',
+  linkColor: '#5d9cec',
+  linkHoverColor: '#1b72e2',
+
+  // Header
+  pageHeaderBackgroundColor: '#2a2a2a',
+
+  // Sidebar
+
+  sidebarColor: '#e1e2e3',
+  sidebarBackgroundColor: '#2a2a2a',
+  sidebarActiveBackgroundColor: '#333333',
+
+  // Toolbar
+  toolbarColor: '#e1e2e3',
+  toolbarBackgroundColor: '#262626',
+  toolbarMenuItemBackgroundColor: '#333',
+  toolbarMenuItemHoverBackgroundColor: '#414141',
+  toolbarLabelColor: '#e1e2e3',
+
+  // Accents
+  borderColor: '#858585',
+  inputBorderColor: '#dde6e9',
+  inputBoxShadowColor: 'rgba(0, 0, 0, 0.075)',
+  inputFocusBorderColor: '#66afe9',
+  inputFocusBoxShadowColor: 'rgba(102, 175, 233, 0.6)',
+  inputErrorBorderColor: '#f05050',
+  inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)',
+  inputWarningBorderColor: '#ffa500',
+  inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
+  colorImpairedGradient: '#707070',
+  colorImpairedGradientDark: '#424242',
+  colorImpairedDangerGradient: '#d84848',
+  colorImpairedWarningGradient: '#e59400',
+  colorImpairedPrimaryGradient: '#538cd4',
+  colorImpairedGrayGradient: '#9b9b9b',
+
+  //
+  // Buttons
+
+  defaultButtonTextColor: '#eee',
+  defaultBackgroundColor: '#333',
+  defaultBorderColor: '#eaeaea',
+  defaultHoverBackgroundColor: '#444',
+  defaultHoverBorderColor: '#d6d6d6;',
+
+  primaryBackgroundColor: '#5d9cec',
+  primaryBorderColor: '#5899eb',
+  primaryHoverBackgroundColor: '#4b91ea',
+  primaryHoverBorderColor: '#3483e7;',
+
+  successBackgroundColor: '#27c24c',
+  successBorderColor: '#26be4a',
+  successHoverBackgroundColor: '#24b145',
+  successHoverBorderColor: '#1f9c3d;',
+
+  warningBackgroundColor: '#ff902b',
+  warningBorderColor: '#ff8d26',
+  warningHoverBackgroundColor: '#ff8517',
+  warningHoverBorderColor: '#fc7800;',
+
+  dangerBackgroundColor: '#f05050',
+  dangerBorderColor: '#f04b4b',
+  dangerHoverBackgroundColor: '#ee3d3d',
+  dangerHoverBorderColor: '#ec2626;',
+
+  iconButtonDisabledColor: '#7a7a7a',
+  iconButtonHoverColor: '#666',
+  iconButtonHoverLightColor: '#ccc',
+
+  //
+  // Modal
+
+  modalBackdropBackgroundColor: 'rgba(0, 0, 0, 0.6)',
+  modalBackgroundColor: '#2a2a2a',
+  modalCloseButtonHoverColor: '#888',
+
+  //
+  // Menu
+  menuItemColor: '#e1e2e3',
+  menuItemHoverColor: sonarrBlue,
+  menuItemHoverBackgroundColor: '#606060',
+
+  //
+  // Toolbar
+
+  toobarButtonHoverColor: sonarrBlue,
+  toobarButtonSelectedColor: sonarrBlue,
+
+  //
+  // Scroller
+
+  scrollbarBackgroundColor: '#707070',
+  scrollbarHoverBackgroundColor: '#606060',
+
+  //
+  // Card
+
+  cardBackgroundColor: '#333333',
+  cardShadowColor: '#111',
+  cardAlternateBackgroundColor: '#333333',
+  cardCenterBackgroundColor: '#2a2a2a',
+
+  //
+  // Alert
+
+  alertDangerBorderColor: '#a94442',
+  alertDangerBackgroundColor: 'rgba(255,0,0,0.1)',
+  alertDangerColor: '#ccc',
+
+  alertInfoBorderColor: '#31708f',
+  alertInfoBackgroundColor: 'rgba(0,0,255,0.1)',
+  alertInfoColor: '#ccc',
+
+  alertSuccessBorderColor: '#3c763d',
+  alertSuccessBackgroundColor: 'rgba(0,255,0,0.1)',
+  alertSuccessColor: '#ccc',
+
+  alertWarningBorderColor: '#8a6d3b',
+  alertWarningBackgroundColor: 'rgba(255,255,0,0.1)',
+  alertWarningColor: '#ccc',
+
+  //
+  // Slider
+
+  sliderAccentColor: '#5d9cec',
+
+  //
+  // Form
+
+  inputBackgroundColor: '#333',
+  inputReadOnlyBackgroundColor: '#222',
+  inputHoverBackgroundColor: 'rgba(255, 255, 255, 0.20)',
+  inputSelectedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
+  advancedFormLabelColor: '#ff902b',
+  disabledCheckInputColor: '#ddd',
+  disabledInputColor: '#808080',
+
+  //
+  // Popover
+
+  popoverTitleBackgroundColor: '#424242',
+  popoverTitleBorderColor: '#2a2a2a',
+  popoverBodyBackgroundColor: '#2a2a2a',
+  popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
+  popoverArrowBorderColor: '#2a2a2a',
+
+  popoverTitleBackgroundInverseColor: '#595959',
+  popoverTitleBorderInverseColor: '#707070',
+  popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)',
+  popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)',
+
+  //
+  // Calendar
+
+  calendarTodayBackgroundColor: '#3e3e3e',
+  calendarBackgroudColor: '#2a2a2a',
+  calendarBorderColor: '#cecece',
+  calendarTextDim: '#eee',
+  calendarTextDimAlternate: '#fff',
+
+  //
+  // Table
+
+  tableRowHoverBackgroundColor: 'rgba(255, 255, 255, 0.08)',
+
+  //
+  // Series
+
+  addSeriesBackgroundColor: '#2a2a2a',
+  seriesBackgroundColor: '#2a2a2a',
+  searchIconContainerBackgroundColor: '#2b2b2b',
+  collapseButtonBackgroundColor: '#2a2a2a',
+
+  //
+  // Season
+
+  seasonBackgroundColor: '#424242',
+  episodesBackgroundColor: '#2a2a2a',
+
+  //
+  // misc
+
+  progressBarBackgroundColor: '#727070',
+  logEventsBackgroundColor: '#2a2a2a'
+};
diff --git a/frontend/src/Styles/Themes/index.js b/frontend/src/Styles/Themes/index.js
new file mode 100644
index 000000000..02068cc4c
--- /dev/null
+++ b/frontend/src/Styles/Themes/index.js
@@ -0,0 +1,7 @@
+import * as dark from './dark';
+import * as light from './light';
+
+export default {
+  light,
+  dark
+};
diff --git a/frontend/src/Styles/Variables/colors.js b/frontend/src/Styles/Themes/light.js
similarity index 77%
rename from frontend/src/Styles/Variables/colors.js
rename to frontend/src/Styles/Themes/light.js
index 73fcd504f..4973a9c03 100644
--- a/frontend/src/Styles/Variables/colors.js
+++ b/frontend/src/Styles/Themes/light.js
@@ -1,27 +1,34 @@
 const sonarrBlue = '#35c5f4';
+const darkGray = '#888';
+const gray = '#adadad';
+const black = '#000';
+const white = '#fff';
+const offWhite = '#f5f7fa';
+const purple = '#7a43b6';
+const pink = '#ff69b4';
+const lightGray = '#ddd';
 
 module.exports = {
   textColor: '#515253',
   defaultColor: '#333',
   disabledColor: '#999',
   dimColor: '#555',
-  black: '#000',
-  white: '#fff',
-  offWhite: '#f5f7fa',
+  black,
+  white,
+  offWhite,
   primaryColor: '#5d9cec',
   selectedColor: '#f9be03',
   successColor: '#27c24c',
   dangerColor: '#f05050',
   warningColor: '#ffa500',
   infoColor: sonarrBlue,
-  purple: '#7a43b6',
-  pink: '#ff69b4',
+  purple,
+  pink,
   sonarrBlue,
   helpTextColor: '#909293',
-  darkGray: '#888',
-  gray: '#adadad',
-  lightGray: '#ddd',
-  disabledInputColor: '#808080',
+  darkGray,
+  gray,
+  lightGray,
 
   // Theme Colors
 
@@ -30,15 +37,26 @@ module.exports = {
   themeRed: '#c4273c',
   themeDarkColor: '#3a3f51',
   themeLightColor: '#4f566f',
+  pageBackground: '#f5f7fa',
+  pageFooterBackgroud: '#f1f1f1',
 
   torrentColor: '#00853d',
   usenetColor: '#17b1d9',
 
+  // Labels
+  inverseLabelColor: '#ddd',
+  inverseLabelTextColor: '#333',
+  disabledLabelColor: '#999',
+  infoTextColor: white,
+
   // Links
   defaultLinkHoverColor: '#fff',
   linkColor: '#5d9cec',
   linkHoverColor: '#1b72e2',
 
+  // Header
+  pageHeaderBackgroundColor: sonarrBlue,
+
   // Sidebar
 
   sidebarColor: '#e1e2e3',
@@ -72,6 +90,7 @@ module.exports = {
   //
   // Buttons
 
+  defaultButtonTextColor: '#eee',
   defaultBackgroundColor: '#fff',
   defaultBorderColor: '#eaeaea',
   defaultHoverBackgroundColor: '#f5f5f5',
@@ -129,8 +148,10 @@ module.exports = {
   //
   // Card
 
+  cardBackgroundColor: '#fff',
   cardShadowColor: '#e1e1e1',
   cardAlternateBackgroundColor: '#f5f5f5',
+  cardCenterBackgroundColor: '#fff',
 
   //
   // Alert
@@ -159,14 +180,20 @@ module.exports = {
   //
   // Form
 
+  inputBackgroundColor: '#fff',
+  inputReadOnlyBackgroundColor: '#eee',
+  inputHoverBackgroundColor: '#f8f8f8',
+  inputSelectedBackgroundColor: '#e2e2e2',
   advancedFormLabelColor: '#ff902b',
   disabledCheckInputColor: '#ddd',
+  disabledInputColor: '#808080',
 
   //
   // Popover
 
   popoverTitleBackgroundColor: '#f7f7f7',
   popoverTitleBorderColor: '#ebebeb',
+  popoverBodyBackgroundColor: '#e9e9e9',
   popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
   popoverArrowBorderColor: '#fff',
 
@@ -179,6 +206,7 @@ module.exports = {
   // Calendar
 
   calendarTodayBackgroundColor: '#c5c5c5',
+  calendarBackgroudColor: '#e4eaec',
   calendarBorderColor: '#cecece',
   calendarTextDim: '#666',
   calendarTextDimAlternate: '#eee',
@@ -186,5 +214,25 @@ module.exports = {
   //
   // Table
 
-  tableRowHoverBackgroundColor: '#fafbfc'
+  tableRowHoverBackgroundColor: '#fafbfc',
+
+  //
+  // Series
+
+  addSeriesBackgroundColor: '#ededed',
+  seriesBackgroundColor: '#ededed',
+  searchIconContainerBackgroundColor: offWhite,
+  collapseButtonBackgroundColor: offWhite,
+
+  //
+  // Season
+
+  seasonBackgroundColor: white,
+  episodesBackgroundColor: offWhite,
+
+  //
+  // misc
+
+  progressBarBackgroundColor: '#fff',
+  logEventsBackgroundColor: '#fff'
 };
diff --git a/frontend/src/Styles/scaffolding.css b/frontend/src/Styles/scaffolding.css
index 1810037cf..3f5f0fa65 100644
--- a/frontend/src/Styles/scaffolding.css
+++ b/frontend/src/Styles/scaffolding.css
@@ -15,7 +15,7 @@
 
 html,
 body {
-  color: #515253;
+  color: var(--textColor);
   font-family: 'Roboto', 'open sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 }
 
diff --git a/frontend/src/System/Events/LogsTableDetailsModal.css b/frontend/src/System/Events/LogsTableDetailsModal.css
index b6e0dd24d..3e1333dec 100644
--- a/frontend/src/System/Events/LogsTableDetailsModal.css
+++ b/frontend/src/System/Events/LogsTableDetailsModal.css
@@ -6,8 +6,8 @@
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  background-color: #f5f5f5;
-  color: #3a3f51;
+  background-color: var(--logEventsBackgroundColor);
+  color: var(--textColor);
   white-space: pre;
   word-wrap: break-word;
   word-break: break-all;
diff --git a/frontend/src/System/Events/LogsTableRow.css b/frontend/src/System/Events/LogsTableRow.css
index 8efd99abc..0c5a3e1c6 100644
--- a/frontend/src/System/Events/LogsTableRow.css
+++ b/frontend/src/System/Events/LogsTableRow.css
@@ -17,15 +17,15 @@
 }
 
 .warn {
-  color: $warningColor;
+  color: var(--warningColor);
 }
 
 .error {
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
 
 .fatal {
-  color: $purple;
+  color: var(--purple);
 }
 
 .actions {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 04e0e11ef..2a94ba941 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -5,7 +5,7 @@ body {
 
 body {
   overflow: hidden;
-  background-color: #f5f7fa;
+  background-color: var(--pageBackground);
 }
 
 @media only screen and (max-width: $breakpointSmall) {
diff --git a/src/NzbDrone.Core/Configuration/ConfigFileProvider.cs b/src/NzbDrone.Core/Configuration/ConfigFileProvider.cs
index 9ee6cd3d5..a2f96cd93 100644
--- a/src/NzbDrone.Core/Configuration/ConfigFileProvider.cs
+++ b/src/NzbDrone.Core/Configuration/ConfigFileProvider.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.IO;
 using System.Linq;
@@ -50,6 +50,7 @@ namespace NzbDrone.Core.Configuration
         string SyslogServer { get; }
         int SyslogPort { get; }
         string SyslogLevel { get; }
+        string Theme { get; }
     }
 
     public class ConfigFileProvider : IConfigFileProvider
@@ -186,6 +187,8 @@ namespace NzbDrone.Core.Configuration
 
         public string LogLevel => GetValue("LogLevel", "info").ToLowerInvariant();
         public string ConsoleLogLevel => GetValue("ConsoleLogLevel", string.Empty, persist: false);
+
+        public string Theme => GetValue("Theme", "light", persist: false);
         public bool LogSql => GetValueBoolean("LogSql", false, persist: false);
         public int LogRotate => GetValueInt("LogRotate", 50, persist: false);
         public bool FilterSentryEvents => GetValueBoolean("FilterSentryEvents", true, persist: false);
diff --git a/src/Sonarr.Api.V3/Config/ConfigController.cs b/src/Sonarr.Api.V3/Config/ConfigController.cs
index 52a77cbe1..db4b941f4 100644
--- a/src/Sonarr.Api.V3/Config/ConfigController.cs
+++ b/src/Sonarr.Api.V3/Config/ConfigController.cs
@@ -10,7 +10,7 @@ namespace Sonarr.Api.V3.Config
     public abstract class ConfigController<TResource> : RestController<TResource>
         where TResource : RestResource, new()
     {
-        private readonly IConfigService _configService;
+        protected readonly IConfigService _configService;
 
         protected ConfigController(IConfigService configService)
         {
@@ -32,7 +32,7 @@ namespace Sonarr.Api.V3.Config
         }
 
         [RestPutById]
-        public ActionResult<TResource> SaveConfig(TResource resource)
+        public virtual ActionResult<TResource> SaveConfig(TResource resource)
         {
             var dictionary = resource.GetType()
                 .GetProperties(BindingFlags.Instance | BindingFlags.Public)
diff --git a/src/Sonarr.Api.V3/Config/UiConfigController.cs b/src/Sonarr.Api.V3/Config/UiConfigController.cs
index ea04e9765..640637a58 100644
--- a/src/Sonarr.Api.V3/Config/UiConfigController.cs
+++ b/src/Sonarr.Api.V3/Config/UiConfigController.cs
@@ -1,19 +1,39 @@
+using System.Linq;
+using System.Reflection;
+using Microsoft.AspNetCore.Mvc;
 using NzbDrone.Core.Configuration;
 using Sonarr.Http;
+using Sonarr.Http.REST.Attributes;
 
 namespace Sonarr.Api.V3.Config
 {
     [V3ApiController("config/ui")]
     public class UiConfigController : ConfigController<UiConfigResource>
     {
-        public UiConfigController(IConfigService configService)
+        private readonly IConfigFileProvider _configFileProvider;
+
+        public UiConfigController(IConfigFileProvider configFileProvider, IConfigService configService)
             : base(configService)
         {
+            _configFileProvider = configFileProvider;
+        }
+
+        [RestPutById]
+        public override ActionResult<UiConfigResource> SaveConfig(UiConfigResource resource)
+        {
+            var dictionary = resource.GetType()
+                                     .GetProperties(BindingFlags.Instance | BindingFlags.Public)
+                                     .ToDictionary(prop => prop.Name, prop => prop.GetValue(resource, null));
+
+            _configFileProvider.SaveConfigDictionary(dictionary);
+            _configService.SaveConfigDictionary(dictionary);
+
+            return Accepted(resource.Id);
         }
 
         protected override UiConfigResource ToResource(IConfigService model)
         {
-            return UiConfigResourceMapper.ToResource(model);
+            return UiConfigResourceMapper.ToResource(_configFileProvider, model);
         }
     }
 }
diff --git a/src/Sonarr.Api.V3/Config/UiConfigResource.cs b/src/Sonarr.Api.V3/Config/UiConfigResource.cs
index 1863987e0..cab394c03 100644
--- a/src/Sonarr.Api.V3/Config/UiConfigResource.cs
+++ b/src/Sonarr.Api.V3/Config/UiConfigResource.cs
@@ -16,11 +16,12 @@ namespace Sonarr.Api.V3.Config
         public bool ShowRelativeDates { get; set; }
 
         public bool EnableColorImpairedMode { get; set; }
+        public string Theme { get; set; }
     }
 
     public static class UiConfigResourceMapper
     {
-        public static UiConfigResource ToResource(IConfigService model)
+        public static UiConfigResource ToResource(IConfigFileProvider config, IConfigService model)
         {
             return new UiConfigResource
             {
@@ -33,6 +34,7 @@ namespace Sonarr.Api.V3.Config
                 ShowRelativeDates = model.ShowRelativeDates,
 
                 EnableColorImpairedMode = model.EnableColorImpairedMode,
+                Theme = config.Theme
             };
         }
     }
diff --git a/src/Sonarr.Http/Frontend/InitializeJsController.cs b/src/Sonarr.Http/Frontend/InitializeJsController.cs
index df9e4d545..b96428c18 100644
--- a/src/Sonarr.Http/Frontend/InitializeJsController.cs
+++ b/src/Sonarr.Http/Frontend/InitializeJsController.cs
@@ -49,6 +49,7 @@ namespace Sonarr.Http.Frontend
             builder.AppendLine($"  release: '{BuildInfo.Release}',");
             builder.AppendLine($"  version: '{BuildInfo.Version.ToString()}',");
             builder.AppendLine($"  instanceName: '{_configFileProvider.InstanceName.ToString()}',");
+            builder.AppendLine($"  theme: '{_configFileProvider.Theme.ToString()}',");
             builder.AppendLine($"  branch: '{_configFileProvider.Branch.ToLower()}',");
             builder.AppendLine($"  analytics: {_analyticsService.IsEnabled.ToString().ToLowerInvariant()},");
             builder.AppendLine($"  userHash: '{HashUtil.AnonymousToken()}',");