Fix Donation Links

Fixes #1041

.editorconfig

@@ -19,10 +19,10 @@ indent_size = 4
 dotnet_sort_system_directives_first = true
 
 # Avoid "this." and "Me." if not necessary
-dotnet_style_qualification_for_field = false:refactoring
+dotnet_style_qualification_for_field = false:warning
-dotnet_style_qualification_for_property = false:refactoring
+dotnet_style_qualification_for_property = false:warning
-dotnet_style_qualification_for_method = false:refactoring
+dotnet_style_qualification_for_method = false:warning
-dotnet_style_qualification_for_event = false:refactoring
+dotnet_style_qualification_for_event = false:warning
 
 # Indentation preferences
 csharp_indent_block_contents = true
@@ -32,10 +32,6 @@ csharp_indent_case_contents_when_block = true
 csharp_indent_switch_labels = true
 csharp_indent_labels = flush_left
 
-dotnet_style_qualification_for_field = false:suggestion
-dotnet_style_qualification_for_property = false:suggestion
-dotnet_style_qualification_for_method = false:suggestion
-dotnet_style_qualification_for_event = false:suggestion
 dotnet_naming_style.instance_field_style.capitalization = camel_case
 dotnet_naming_style.instance_field_style.required_prefix = _
 

azure-pipelines.yml

@@ -7,7 +7,9 @@ variables:
   outputFolder: './_output'
   artifactsFolder: './_artifacts'
   testsFolder: './_tests'
-  majorVersion: '0.2.0'
+  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
+  nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
+  majorVersion: '0.4.0'
   minorVersion: $[counter('minorVersion', 1)]
   prowlarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(prowlarrVersion)'
@@ -16,7 +18,9 @@ variables:
   dotnetVersion: '6.0.201'
   innoVersion: '6.2.0'
   nodeVersion: '16.x'
-  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
+  windowsImage: 'windows-2022'
+  linuxImage: 'ubuntu-20.04'
+  macImage: 'macOS-11'
 
 trigger:
   branches:
@@ -40,7 +44,7 @@ stages:
     - job:
       displayName: Build Variables
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
       # Set the build name properly.  The 'name' property won't recursively expand so hack here:
       - bash: echo "##vso[build.updatebuildnumber]$PROWLARRVERSION"
@@ -66,15 +70,15 @@ stages:
         matrix:
           Linux:
             osName: 'Linux'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
             enableAnalysis: 'true'
           Mac:
             osName: 'Mac'
-            imageName: 'macos-10.15'
+            imageName: ${{ variables.macImage }}
             enableAnalysis: 'false'
           Windows:
             osName: 'Windows'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
             enableAnalysis: 'false'
 
       pool:
@@ -144,13 +148,13 @@ stages:
         matrix:
           Linux:
             osName: 'Linux'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
           Mac:
             osName: 'Mac'
-            imageName: 'macos-10.15'
+            imageName: ${{ variables.macImage }}
           Windows:
             osName: 'Windows'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
       pool:
         vmImage: $(imageName)
       steps:
@@ -186,7 +190,7 @@ stages:
     - job: Windows_Installer
       displayName: Create Installer
       pool:
-        vmImage: 'windows-2019'
+        vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self
         fetchDepth: 1
@@ -219,7 +223,7 @@ stages:
     - job: Other_Packages
       displayName: Create Standard Packages
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
       - checkout: self
         fetchDepth: 1
@@ -379,7 +383,7 @@ stages:
     jobs:
     - job: Prepare
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
       - checkout: none
       - task: DownloadPipelineArtifact@2
@@ -403,17 +407,17 @@ stages:
             osName: 'Mac'
             testName: 'MacCore'
             poolName: 'Azure Pipelines'
-            imageName: 'macos-10.15'
+            imageName: ${{ variables.macImage }}
           WindowsCore:
             osName: 'Windows'
             testName: 'WindowsCore'
             poolName: 'Azure Pipelines'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
           LinuxCore:
             osName: 'Linux'
             testName: 'LinuxCore'
             poolName: 'Azure Pipelines'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
           FreebsdCore:
             osName: 'Linux'
             testName: 'FreebsdCore'
@@ -469,7 +473,7 @@ stages:
             containerImage: ghcr.io/servarr/testimages:alpine
 
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       
       container: $[ variables['containerImage'] ]
 
@@ -510,7 +514,7 @@ stages:
     jobs:
     - job: Prepare
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
       - checkout: none
       - task: DownloadPipelineArtifact@2
@@ -530,17 +534,17 @@ stages:
           MacCore:
             osName: 'Mac'
             testName: 'MacCore'
-            imageName: 'macos-10.15'
+            imageName: ${{ variables.macImage }}
             pattern: 'Prowlarr.*.osx-core-x64.tar.gz'
           WindowsCore:
             osName: 'Windows'
             testName: 'WindowsCore'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
             pattern: 'Prowlarr.*.windows-core-x64.zip'
           LinuxCore:
             osName: 'Linux'
             testName: 'LinuxCore'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
             pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
 
       pool:
@@ -645,7 +649,7 @@ stages:
             pattern: 'Prowlarr.*.linux-musl-core-x64.tar.gz'
 
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
 
       container: $[ variables['containerImage'] ]
 
@@ -701,17 +705,17 @@ stages:
         matrix:
           Linux:
             osName: 'Linux'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
             pattern: 'Prowlarr.*.linux-core-x64.tar.gz'
             failBuild: true
           Mac:
             osName: 'Mac'
-            imageName: 'macos-10.15'
+            imageName: ${{ variables.macImage }}
             pattern: 'Prowlarr.*.osx-core-x64.tar.gz'
             failBuild: true
           Windows:
             osName: 'Windows'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
             pattern: 'Prowlarr.*.windows-core-x64.zip'
             failBuild: true
 
@@ -777,7 +781,7 @@ stages:
     jobs:
     - job: Prepare
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
       - checkout: none
       - task: DownloadPipelineArtifact@2
@@ -794,10 +798,10 @@ stages:
         matrix:
           Linux:
             osName: 'Linux'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
           Windows:
             osName: 'Windows'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
       pool:
         vmImage: $(imageName)
       steps:
@@ -832,7 +836,7 @@ stages:
         )
 
       pool:
-        vmImage: windows-2019
+        vmImage: ${{ variables.windowsImage }}
 
       steps:
       - task: UseDotNet@2
@@ -884,7 +888,7 @@ stages:
         EnableAnalyzers: 'false'
 
       pool:
-        vmImage: windows-2019
+        vmImage: ${{ variables.windowsImage }}
 
       steps:
       - task: UseDotNet@2
@@ -941,7 +945,7 @@ stages:
     - job:
       displayName: Discord Notification
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
         - task: DownloadPipelineArtifact@2
           continueOnError: true

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',
@@ -29,4 +28,4 @@ module.exports = {
     'postcss-color-function',
     'postcss-nested'
   ]
-};
+};

frontend/src/App/App.js

@@ -4,16 +4,19 @@ import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
 import PageConnector from 'Components/Page/PageConnector';
+import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
 function App({ store, history }) {
   return (
-    <DocumentTitle title="Prowlarr">
+    <DocumentTitle title={window.Prowlarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <PageConnector>
+          <ApplyTheme>
-            <AppRoutes app={App} />
+            <PageConnector>
-          </PageConnector>
+              <AppRoutes app={App} />
+            </PageConnector>
+          </ApplyTheme>
         </ConnectedRouter>
       </Provider>
     </DocumentTitle>

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.Prowlarr.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);

frontend/src/Components/Alert.css

@@ -7,25 +7,25 @@
 }
 
 .danger {
-  border-color: $alertDangerBorderColor;
+  border-color: var(--alertDangerBorderColor);
-  background-color: $alertDangerBackgroundColor;
+  background-color: var(--alertDangerBackgroundColor);
-  color: $alertDangerColor;
+  color: var(--alertDangerColor);
 }
 
 .info {
-  border-color: $alertInfoBorderColor;
+  border-color: var(--alertInfoBorderColor);
-  background-color: $alertInfoBackgroundColor;
+  background-color: var(--alertInfoBackgroundColor);
-  color: $alertInfoColor;
+  color: var(--alertInfoColor);
 }
 
 .success {
-  border-color: $alertSuccessBorderColor;
+  border-color: var(--alertSuccessBorderColor);
-  background-color: $alertSuccessBackgroundColor;
+  background-color: var(--alertSuccessBackgroundColor);
-  color: $alertSuccessColor;
+  color: var(--alertSuccessColor);
 }
 
 .warning {
-  border-color: $alertWarningBorderColor;
+  border-color: var(--alertWarningBorderColor);
-  background-color: $alertWarningBackgroundColor;
+  background-color: var(--alertWarningBackgroundColor);
-  color: $alertWarningColor;
+  color: var(--alertWarningColor);
 }

frontend/src/Components/Card.css

@@ -3,9 +3,9 @@
   margin: 10px;
   padding: 10px;
   border-radius: 3px;
-  background-color: $white;
+  background-color: var(--cardBackgroundColor);
-  box-shadow: 0 0 10px 1px $cardShadowColor;
+  box-shadow: 0 0 10px 1px var(--cardShadowColor);
-  color: $defaultColor;
+  color: var(--defaultColor);
 }
 
 .underlay {

frontend/src/Components/Chart/BarChart.js

@@ -2,15 +2,16 @@ import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
-import colors from 'Styles/Variables/colors';
 
 function getColors(kind) {
 
+  const style = getComputedStyle(document.body);
+
   if (kind === kinds.WARNING) {
-    return colors.failedColors.reverse();
+    return style.getPropertyValue('--failedColors').split(',');
   }
 
-  return colors.chartColors;
+  return style.getPropertyValue('--chartColors').split(',');
 }
 
 class BarChart extends Component {

frontend/src/Components/Chart/DoughnutChart.js

@@ -1,7 +1,12 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import colors from 'Styles/Variables/colors';
+
+function getColors(kind) {
+
+  const style = getComputedStyle(document.body);
+  return style.getPropertyValue('--chartColorsDiversified').split(',');
+}
 
 class DoughnutChart extends Component {
   constructor(props) {
@@ -29,7 +34,7 @@ class DoughnutChart extends Component {
         datasets: [{
           label: this.props.title,
           data: this.props.data.map((d) => d.value),
-          backgroundColor: colors.chartColors
+          backgroundColor: getColors()
         }]
       }
     });

frontend/src/Components/Chart/StackedBarChart.js

@@ -1,7 +1,12 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import colors from 'Styles/Variables/colors';
+
+function getColors(index) {
+
+  const style = getComputedStyle(document.body);
+  return style.getPropertyValue('--chartColorsDiversified').split(',')[index];
+}
 
 class StackedBarChart extends Component {
   constructor(props) {
@@ -41,7 +46,7 @@ class StackedBarChart extends Component {
           return {
             label: d.label,
             data: d.data,
-            backgroundColor: colors.chartColors[index]
+            backgroundColor: getColors(index)
           };
         })
       }
@@ -54,7 +59,7 @@ class StackedBarChart extends Component {
       return {
         label: d.label,
         data: d.data,
-        backgroundColor: colors.chartColors[index]
+        backgroundColor: getColors(index)
       };
     });
     this.myChart.update();

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;
 }

frontend/src/Components/FileBrowser/FileBrowserModalContent.css

@@ -13,7 +13,7 @@
 }
 
 .faqLink {
-  color: $alertWarningColor;
+  color: var(--alertWarningColor);
   font-weight: bold;
 }
 

frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.js

@@ -160,6 +160,7 @@ class DateFilterBuilderRowValue extends Component {
       <TextInput
         name={NAME}
         value={filterValue}
+        type="date"
         placeholder="yyyy-mm-dd"
         onChange={this.onValueChange}
       />

frontend/src/Components/Filter/Builder/FilterBuilderRow.css

@@ -3,7 +3,7 @@
   margin-bottom: 5px;
 
   &:hover {
-    background-color: $tableRowHoverBackgroundColor;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css

@@ -17,5 +17,5 @@
 
 .or {
   margin: 0 3px;
-  color: $themeDarkColor;
+  color: var(--themeDarkColor);
 }

frontend/src/Components/Filter/CustomFilters/CustomFilter.css

@@ -4,7 +4,7 @@
   padding: 5px;
 
   &:hover {
-    background-color: $tableRowHoverBackgroundColor;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }
 

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;
+    background-color: var(--inputBackgroundColor);
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
   }
 }
 
@@ -46,5 +46,5 @@
 }
 
 .suggestionHighlighted {
-  background-color: $menuItemHoverBackgroundColor;
+  background-color: var(--menuItemHoverBackgroundColor);
 }

frontend/src/Components/Form/CheckInput.css

@@ -32,21 +32,21 @@
   height: 20px;
   border: 1px solid #ccc;
   border-radius: 2px;
-  background-color: $white;
+  background-color: var(--white);
-  color: $white;
+  color: var(--white);
   text-align: center;
   line-height: 20px;
 }
 
 .checkbox:focus + .input {
   outline: 0;
-  border-color: $inputFocusBorderColor;
+  border-color: var(--inputFocusBorderColor);
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
 }
 
 .dangerIsChecked {
-  border-color: $dangerColor;
+  border-color: var(--dangerColor);
-  background-color: $dangerColor;
+  background-color: var(--dangerColor);
 
   &.isDisabled {
     opacity: 0.7;
@@ -54,8 +54,8 @@
 }
 
 .primaryIsChecked {
-  border-color: $primaryColor;
+  border-color: var(--primaryColor);
-  background-color: $primaryColor;
+  background-color: var(--primaryColor);
 
   &.isDisabled {
     opacity: 0.7;
@@ -63,8 +63,8 @@
 }
 
 .successIsChecked {
-  border-color: $successColor;
+  border-color: var(--successColor);
-  background-color: $successColor;
+  background-color: var(--successColor);
 
   &.isDisabled {
     opacity: 0.7;
@@ -72,8 +72,8 @@
 }
 
 .warningIsChecked {
-  border-color: $warningColor;
+  border-color: var(--warningColor);
-  background-color: $warningColor;
+  background-color: var(--warningColor);
 
   &.isDisabled {
     opacity: 0.7;
@@ -82,15 +82,15 @@
 
 .isNotChecked {
   &.isDisabled {
-    border-color: $disabledCheckInputColor;
+    border-color: var(--disabledCheckInputColor);
-    background-color: $disabledCheckInputColor;
+    background-color: var(--disabledCheckInputColor);
     opacity: 0.7;
   }
 }
 
 .isIndeterminate {
-  border-color: $gray;
+  border-color: var(--gray);
-  background-color: $gray;
+  background-color: var(--gray);
 }
 
 .helpText {

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);
   }
 }

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;

frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css

@@ -3,5 +3,5 @@
 }
 
 .isDisabled {
-  color: $disabledInputColor;
+  color: var(--disabledInputColor);
 }

frontend/src/Components/Form/FormInputGroup.css

@@ -40,7 +40,7 @@
 }
 
 .pendingChangesIcon {
-  color: $warningColor;
+  color: var(--warningColor);
   font-size: 20px;
   line-height: 35px;
 }

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;

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) {

frontend/src/Components/Form/HintedSelectInputOption.css

@@ -18,6 +18,6 @@
   @add-mixin truncate;
 
   margin-left: 15px;
-  color: $darkGray;
+  color: var(--darkGray);
   font-size: $smallFontSize;
 }

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;
 }

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;
+  background-color: var(--inputBackgroundColor);
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
+  color: var(--textColor);
 
   &:focus {
     outline: 0;
-    border-color: $inputFocusBorderColor;
+    border-color: var(--inputFocusBorderColor);
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
   }
 }
 
 .hasError {
-  border-color: $inputErrorBorderColor;
+  border-color: var(--inputErrorBorderColor);
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputErrorBoxShadowColor;
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputErrorBoxShadowColor);
 }
 
 .hasWarning {
-  border-color: $inputWarningBorderColor;
+  border-color: var(--inputWarningBorderColor);
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputWarningBoxShadowColor;
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputWarningBoxShadowColor);
 }
 
 .hasButton {

frontend/src/Components/Form/KeyValueListInput.css

@@ -7,8 +7,8 @@
 
   &.isFocused {
     outline: 0;
-    border-color: $inputFocusBorderColor;
+    border-color: var(--inputFocusBorderColor);
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
   }
 }
 

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;

frontend/src/Components/Form/TagInput.css

@@ -7,8 +7,8 @@
 
   &.isFocused {
     outline: 0;
-    border-color: $inputFocusBorderColor;
+    border-color: var(--inputFocusBorderColor);
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor);
   }
 }
 
@@ -20,4 +20,6 @@
   width: 0%;
   height: 31px;
   border: none;
+  background-color: var(--inputBackground);
+  color: var(--textColor);
 }

frontend/src/Components/Form/TextArea.css

@@ -7,7 +7,7 @@
 }
 
 .readOnly {
-  background-color: #eee;
+  background-color: var(--inputReadOnlyBackgroundColor);
 }
 
 .hasError {

frontend/src/Components/Form/TextInput.css

@@ -3,7 +3,7 @@
 }
 
 .readOnly {
-  background-color: #eee;
+  background-color: var(--inputReadOnlyBackgroundColor);
 }
 
 .hasError {

frontend/src/Components/Icon.css

@@ -1,5 +1,5 @@
 .danger {
-  color: $dangerColor;
+  color: var(--dangerColor);
 }
 
 .default {
@@ -7,25 +7,21 @@
 }
 
 .disabled {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .info {
-  color: $infoColor;
+  color: var(--infoColor);
-}
-
-.pink {
-  color: $pink;
 }
 
 .success {
-  color: $successColor;
+  color: var(--successColor);
 }
 
 .warning {
-  color: $warningColor;
+  color: var(--warningColor);
 }
 
 .purple {
-  color: $purple;
+  color: var(--purple);
 }

frontend/src/Components/InfoLabel.css

@@ -1,7 +1,7 @@
 .label {
   display: inline-block;
   margin: 2px;
-  color: $white;
+  color: var(--white);
   /** text-align: center; **/
   white-space: nowrap;
   line-height: 1;
@@ -10,7 +10,7 @@
 
 .title {
   margin-bottom: 2px;
-  color: $helpTextColor;
+  color: var(--helpTextColor);
   font-size: 10px;
 }
 
@@ -36,5 +36,5 @@
 /** Outline **/
 
 .outline {
-  background-color: $white;
+  background-color: var(--white);
 }

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,86 +13,77 @@
 /** Kinds **/
 
 .danger {
-  border-color: $dangerColor;
+  border-color: var(--dangerColor);
-  background-color: $dangerColor;
+  background-color: var(--dangerColor);
 
   &.outline {
-    color: $dangerColor;
+    color: var(--dangerColor);
   }
 }
 
 .default {
-  border-color: $themeLightColor;
+  border-color: var(--themeLightColor);
-  background-color: $themeLightColor;
+  background-color: var(--themeLightColor);
 
   &.outline {
-    color: $themeLightColor;
+    color: var(--themeLightColor);
   }
 }
 
 .disabled {
-  border-color: $disabledColor;
+  border-color: var(--disabledColor);
-  background-color: $disabledColor;
+  background-color: var(--disabledColor);
 
   &.outline {
-    color: $disabledColor;
+    color: var(--disabledColor);
   }
 }
 
 .info {
-  border-color: $infoColor;
+  border-color: var(--infoColor);
-  background-color: $infoColor;
+  background-color: var(--infoColor);
 
   &.outline {
-    color: $infoColor;
+    color: var(--infoColor);
   }
 }
 
 .inverse {
-  border-color: $lightGray;
+  border-color: var(--inverseLabelColor);
-  background-color: $lightGray;
+  background-color: var(--inverseLabelColor);
-  color: $defaultColor;
+  color: var(--inverseLabelTextColor);
 
   &.outline {
-    background-color: $defaultColor !important;
+    background-color: var(--inverseLabelTextColor) !important;
-    color: $lightGray;
+    color: var(--inverseLabelColor);
   }
 }
 
 .primary {
-  border-color: $primaryColor;
+  border-color: var(--primaryColor);
-  background-color: $primaryColor;
+  background-color: var(--primaryColor);
 
   &.outline {
-    color: $primaryColor;
+    color: var(--primaryColor);
   }
 }
 
 .success {
-  border-color: $successColor;
+  border-color: var(--successColor);
-  background-color: $successColor;
+  background-color: var(--successColor);
   color: #eee;
 
   &.outline {
-    color: $successColor;
+    color: var(--successColor);
   }
 }
 
 .warning {
-  border-color: $warningColor;
+  border-color: var(--warningColor);
-  background-color: $warningColor;
+  background-color: var(--warningColor);
 
   &.outline {
-    color: $warningColor;
+    color: var(--warningColor);
-  }
-}
-
-.queue {
-  border-color: $queueColor;
-  background-color: $queueColor;
-
-  &.outline {
-    color: $queueColor;
   }
 }
 
@@ -117,5 +108,5 @@
 /** Outline **/
 
 .outline {
-  background-color: $white;
+  background-color: var(--white);
 }

frontend/src/Components/Link/Button.css

@@ -19,62 +19,62 @@
 }
 
 .danger {
-  border-color: $dangerBorderColor;
+  border-color: var(--dangerBorderColor);
-  background-color: $dangerBackgroundColor;
+  background-color: var(--dangerBackgroundColor);
-  color: $white;
+  color: var(--white);
 
   &:hover {
-    border-color: $dangerHoverBorderColor;
+    border-color: var(--dangerHoverBorderColor);
-    background-color: $dangerHoverBackgroundColor;
+    background-color: var(--dangerHoverBackgroundColor);
-    color: $white;
+    color: var(--white);
   }
 }
 
 .default {
-  border-color: $defaultBorderColor;
+  border-color: var(--defaultBorderColor);
-  background-color: $defaultBackgroundColor;
+  background-color: var(--defaultButtonBackgroundColor);
-  color: $defaultColor;
+  color: var(--defaultButtonTextColor);
 
   &:hover {
-    border-color: $defaultHoverBorderColor;
+    border-color: var(--defaultHoverBorderColor);
-    background-color: $defaultHoverBackgroundColor;
+    background-color: var(--defaultHoverBackgroundColor);
-    color: $defaultColor;
+    color: var(--defaultButtonTextColor);
   }
 }
 
 .primary {
-  border-color: $primaryBorderColor;
+  border-color: var(--primaryBorderColor);
-  background-color: $primaryBackgroundColor;
+  background-color: var(--primaryBackgroundColor);
-  color: $white;
+  color: var(--white);
 
   &:hover {
-    border-color: $primaryHoverBorderColor;
+    border-color: var(--primaryHoverBorderColor);
-    background-color: $primaryHoverBackgroundColor;
+    background-color: var(--primaryHoverBackgroundColor);
-    color: $white;
+    color: var(--white);
   }
 }
 
 .success {
-  border-color: $successBorderColor;
+  border-color: var(--successBorderColor);
-  background-color: $successBackgroundColor;
+  background-color: var(--successBackgroundColor);
-  color: $white;
+  color: var(--white);
 
   &:hover {
-    border-color: $successHoverBorderColor;
+    border-color: var(--successHoverBorderColor);
-    background-color: $successHoverBackgroundColor;
+    background-color: var(--successHoverBackgroundColor);
-    color: $white;
+    color: var(--white);
   }
 }
 
 .warning {
-  border-color: $warningBorderColor;
+  border-color: var(--warningBorderColor);
-  background-color: $warningBackgroundColor;
+  background-color: var(--warningBackgroundColor);
-  color: $white;
+  color: var(--white);
 
   &:hover {
-    border-color: $warningHoverBorderColor;
+    border-color: var(--warningHoverBorderColor);
-    background-color: $warningHoverBackgroundColor;
+    background-color: var(--warningHoverBackgroundColor);
-    color: $white;
+    color: var(--white);
   }
 }
 

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);
   }
 }

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;
   }
 }

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;

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;
 }

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;
 }
 

frontend/src/Components/Menu/MenuItem.css

@@ -5,19 +5,19 @@
   padding: 10px 20px;
   min-width: 150px;
   max-width: 250px;
-  background-color: $toolbarMenuItemBackgroundColor;
+  background-color: var(--toolbarMenuItemBackgroundColor);
-  color: $menuItemColor;
+  color: var(--menuItemColor);
   line-height: 20px;
 
   &:hover,
   &:focus {
-    background-color: $toolbarMenuItemHoverBackgroundColor;
+    background-color: var(--toolbarMenuItemHoverBackgroundColor);
-    color: $menuItemHoverColor;
+    color: var(--menuItemHoverColor);
     text-decoration: none;
   }
 }
 
 .isDisabled {
-  color: $disabledColor;
+  color: var(--disabledColor);
   pointer-events: none;
 }

frontend/src/Components/Menu/MenuItemSeparator.css

@@ -2,5 +2,5 @@
   overflow: hidden;
   min-height: 1px;
   height: 1px;
-  background-color: $themeDarkColor;
+  background-color: var(--themeDarkColor);
 }

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;
 }
 

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);
   }
 }

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 {

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;
 }

frontend/src/Components/Page/Header/IndexerSearchInput.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;
+    background-color: var(--themeDarkColor);
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+    box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
-    color: $menuItemColor;
+    color: var(--menuItemColor);
   }
 }
 
@@ -82,12 +82,12 @@
 }
 
 .highlighted {
-  background-color: $themeLightColor;
+  background-color: var(--themeLightColor);
 }
 
 .sectionTitle {
   padding: 5px 8px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .addNewMovieSuggestion {

frontend/src/Components/Page/Header/IndexerSearchResult.css

@@ -21,7 +21,7 @@
 .alternateTitle {
   composes: title;
 
-  color: $disabledColor;
+  color: var(--disabledColor);
   font-size: $smallFontSize;
 }
 

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;
 }

frontend/src/Components/Page/Header/PageHeader.css

@@ -4,9 +4,9 @@
   align-items: center;
   flex: 0 0 auto;
   height: $headerHeight;
-  background-color: $prowlarrOrange;
+  background-color: var(--pageHeaderBackgroundColor);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  color: $white;
+  color: var(--white);
 }
 
 .logoContainer {
@@ -80,7 +80,7 @@
   align-items: center;
   justify-content: center;
   width: 30px;
-  color: $themeRed;
+  color: var(--themeRed);
   text-align: center;
   line-height: 60px;
 

frontend/src/Components/Page/Header/PageHeader.js

@@ -74,7 +74,7 @@ class PageHeader extends Component {
           <IconButton
             className={styles.donate}
             name={icons.HEART}
-            to="https://opencollective.com/prowlarr"
+            to="https://prowlarr.com/donate"
             size={14}
           />
           <IconButton

frontend/src/Components/Page/Header/PageHeaderActionsMenu.css

@@ -5,7 +5,7 @@
   text-align: center;
 
   &:hover {
-    color: $toobarButtonHoverColor;
+    color: var(--toobarButtonHoverColor);
   }
 }
 

frontend/src/Components/Page/LoadingPage.css

@@ -1,5 +1,7 @@
 .page {
   composes: page from '~./Page.css';
+
+  background-color: var(--pageBackground);
 }
 
 .logoFull {

frontend/src/Components/Page/PageContent.js

@@ -14,7 +14,7 @@ function PageContent(props) {
 
   return (
     <ErrorBoundary errorComponent={PageContentError}>
-      <DocumentTitle title={title ? `${title} - Prowlarr` : 'Prowlarr'}>
+      <DocumentTitle title={title ? `${title} - ${window.Prowlarr.instanceName}` : window.Prowlarr.instanceName}>
         <div className={className}>
           {children}
         </div>

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) {

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;
 

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);
 }

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;
+  background-color: var(--sidebarBackgroundColor);
-  color: $white;
+  color: var(--white);
 }
 
 @media only screen and (max-width: $breakpointSmall) {

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 $themeBlue;
+  border-left: 3px solid var(--themeBlue);
 }
 
 .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: $themeBlue;
+  color: var(--themeBlue);
 }
 
 .isActiveParentLink {
-  background-color: $sidebarActiveBackgroundColor;
+  background-color: var(--sidebarActiveBackgroundColor);
 }
 
 .iconContainer {

frontend/src/Components/Page/Toolbar/PageToolbar.css

@@ -4,8 +4,8 @@
   flex: 0 0 auto;
   padding: 0 20px;
   height: $toolbarHeight;
-  background-color: $toolbarBackgroundColor;
+  background-color: var(--toolbarBackgroundColor);
-  color: $toolbarColor;
+  color: var(--toolbarColor);
   line-height: 60px;
 }
 

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);
 }

frontend/src/Components/ProgressBar.css

@@ -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,39 +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(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) 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, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
   }
 }
 
 .info {
-  background-color: $infoColor;
+  background-color: var(--infoColor);
-}
-
-.queue {
-  background-color: $queueColor;
 }
 
 .small {

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);
   }
 }

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 {

frontend/src/Components/Table/TablePager.css

@@ -46,11 +46,11 @@
 }
 
 .records {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .disabledPageButton {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .pageSelect {

frontend/src/Components/Table/TableRow.css

@@ -2,6 +2,6 @@
   transition: background-color 500ms;
 
   &:hover {
-    background-color: $tableRowHoverBackgroundColor;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }

frontend/src/Components/Table/VirtualTableRow.css

@@ -3,7 +3,7 @@
   transition: background-color 500ms;
 
   &:hover {
-    background-color: #fafbfc;
+    background-color: var(--tableRowHoverBackgroundColor);
   }
 }
 

frontend/src/Components/Tooltip/Popover.css

@@ -1,7 +1,7 @@
 .title {
   padding: 10px 20px;
-  border-bottom: 1px solid $popoverTitleBorderColor;
+  border-bottom: 1px solid var(--popoverTitleBorderColor);
-  background-color: $popoverTitleBackgroundColor;
+  background-color: var(--popoverTitleBackgroundColor);
   font-size: 16px;
 }
 

frontend/src/Components/Tooltip/Tooltip.css

@@ -7,13 +7,13 @@
   position: relative;
 
   &.default {
-    background-color: $white;
+    background-color: var(--popoverBodyBackgroundColor);
-    box-shadow: 0 5px 10px $popoverShadowColor;
+    box-shadow: 0 5px 10px var(--popoverShadowColor);
   }
 
   &.inverse {
-    background-color: $themeDarkColor;
+    background-color: var(--themeDarkColor);
-    box-shadow: 0 5px 10px $popoverShadowInverseColor;
+    box-shadow: 0 5px 10px var(--popoverShadowInverseColor);
   }
 }
 
@@ -49,20 +49,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);
   }
 }
 
@@ -78,20 +78,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);
   }
 }
 
@@ -107,20 +107,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);
   }
 }
 
@@ -136,20 +136,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);
   }
 }
 

frontend/src/Helpers/Props/kinds.js

@@ -3,7 +3,6 @@ export const DEFAULT = 'default';
 export const DISABLED = 'disabled';
 export const INFO = 'info';
 export const INVERSE = 'inverse';
-export const PINK = 'pink';
 export const PRIMARY = 'primary';
 export const PURPLE = 'purple';
 export const SUCCESS = 'success';
@@ -16,7 +15,6 @@ export const all = [
   DISABLED,
   INFO,
   INVERSE,
-  PINK,
   PRIMARY,
   PURPLE,
   SUCCESS,

frontend/src/History/HistoryRowParameter.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(--defaultHoverBackgroundColor);
   cursor: default;
 }
 
@@ -16,7 +16,7 @@
 
 .value {
   padding: 0 4px;
-  background-color: $white;
+  background-color: var(--defaultButtonBackgroundColor);
-  color: $defaultColor;
+  color: var(--defaultColor);
   white-space: nowrap;
 }

frontend/src/Indexer/Edit/EditIndexerModalContent.js

@@ -112,7 +112,7 @@ function EditIndexerModalContent(props) {
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>{translate('AppProfile')}</FormLabel>
+                <FormLabel>{translate('SyncProfile')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.APP_PROFILE_SELECT}

frontend/src/Indexer/Editor/Delete/DeleteIndexerModalContent.css

@@ -9,5 +9,5 @@
 
 .path {
   margin-left: 5px;
-  color: $dangerColor;
+  color: var(--dangerColor);
 }

frontend/src/Indexer/Editor/IndexerEditorFooter.js

@@ -133,7 +133,7 @@ class IndexerEditorFooter extends Component {
 
         <div className={styles.inputContainer}>
           <IndexerEditorFooterLabel
-            label={translate('AppProfile')}
+            label={translate('SyncProfile')}
             isSaving={isSaving && appProfileId !== NO_CHANGE}
           />
 

frontend/src/Indexer/Index/IndexerIndexFooter.css

@@ -21,28 +21,28 @@
 .disabled {
   composes: legendItemColor;
 
-  background-color: $darkGray;
+  background-color: var(--darkGray);
 }
 
 .enabled {
   composes: legendItemColor;
 
-  background-color: $successColor;
+  background-color: var(--successColor);
 }
 
 .redirected {
   composes: legendItemColor;
 
-  background-color: $infoColor;
+  background-color: var(--infoColor);
 }
 
 .error {
   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(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
   }
 }
 

frontend/src/Indexer/Index/Menus/IndexerIndexSortMenu.js

@@ -53,7 +53,7 @@ function IndexerIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          {translate('AppProfile')}
+          {translate('SyncProfile')}
         </SortMenuItem>
 
         <SortMenuItem

frontend/src/Indexer/Index/Table/IndexerIndexRow.css

@@ -65,5 +65,5 @@
 .externalLink {
   composes: link from '~Components/Link/Link.css';
 
-  color: $textColor;
+  color: var(--textColor);
 }

frontend/src/Indexer/Index/Table/IndexerIndexRow.js

@@ -190,7 +190,7 @@ class IndexerIndexRow extends Component {
                   key={name}
                   className={styles[column.name]}
                 >
-                  {appProfile.name}
+                  {appProfile?.name || ''}
                 </VirtualTableRowCell>
               );
             }

frontend/src/Indexer/Index/Table/ProtocolLabel.css

@@ -1,13 +1,13 @@
 .torrent {
   composes: label from '~Components/Label.css';
 
-  border-color: $torrentColor;
+  border-color: var(--torrentColor);
-  background-color: $torrentColor;
+  background-color: var(--torrentColor);
 }
 
 .usenet {
   composes: label from '~Components/Label.css';
 
-  border-color: $usenetColor;
+  border-color: var(--usenetColor);
-  background-color: $usenetColor;
+  background-color: var(--usenetColor);
 }

frontend/src/Search/QueryParameterModal.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;
   }
 }

frontend/src/Search/QueryParameterOption.css

@@ -3,15 +3,15 @@
   align-items: stretch;
   flex-wrap: wrap;
   margin: 3px;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
 
   &:hover {
     .token {
-      background-color: #ddd;
+      background-color: rgba(0, 0, 0, 0.01);
     }
 
     .example {
-      background-color: #ccc;
+      background-color: rgba(0, 0, 0, 0.01);
     }
   }
 }
@@ -27,7 +27,7 @@
 .token {
   flex: 0 0 50%;
   padding: 6px 16px;
-  background-color: #eee;
+  background-color: var(--defaultButtonBackgroundColor);
   font-family: $monoSpaceFontFamily;
 }
 
@@ -37,7 +37,7 @@
   justify-content: space-between;
   flex: 0 0 50%;
   padding: 6px 16px;
-  background-color: #ddd;
+  background-color: var(--defaultHoverBackgroundColor);
 
   .footNote {
     padding: 2px;

frontend/src/Search/Table/ProtocolLabel.css

@@ -1,13 +1,13 @@
 .torrent {
   composes: label from '~Components/Label.css';
 
-  border-color: $torrentColor;
+  border-color: var(--torrentColor);
-  background-color: $torrentColor;
+  background-color: var(--torrentColor);
 }
 
 .usenet {
   composes: label from '~Components/Label.css';
 
-  border-color: $usenetColor;
+  border-color: var(--usenetColor);
-  background-color: $usenetColor;
+  background-color: var(--usenetColor);
 }

frontend/src/Search/Table/SearchIndexRow.css

@@ -58,7 +58,7 @@
 
   margin: 0 2px;
   width: 22px;
-  color: $textColor;
+  color: var(--textColor);
 }
 
 .externalLinks {

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);
 }

frontend/src/Settings/Applications/Applications/Applications.css

@@ -6,15 +6,15 @@
 .addApplication {
   composes: application from '~./Application.css';
 
-  background-color: $cardAlternateBackgroundColor;
+  background-color: var(--cardAlternateBackgroundColor);
-  color: $gray;
+  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);
 }

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css

@@ -6,15 +6,15 @@
 .addDownloadClient {
   composes: downloadClient from '~./DownloadClient.css';
 
-  background-color: $cardAlternateBackgroundColor;
+  background-color: var(--cardAlternateBackgroundColor);
-  color: $gray;
+  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);
 }

frontend/src/Settings/General/HostSettings.js

@@ -20,6 +20,7 @@ function HostSettings(props) {
     bindAddress,
     port,
     urlBase,
+    instanceName,
     enableSsl,
     sslPort,
     sslCertPath,
@@ -72,6 +73,22 @@ function HostSettings(props) {
         />
       </FormGroup>
 
+      <FormGroup
+        advancedSettings={advancedSettings}
+        isAdvanced={true}
+      >
+        <FormLabel>{translate('InstanceName')}</FormLabel>
+
+        <FormInputGroup
+          type={inputTypes.TEXT}
+          name="instanceName"
+          helpText={translate('InstanceNameHelpText')}
+          helpTextWarning={translate('RestartRequiredHelpTextWarning')}
+          onChange={onInputChange}
+          {...instanceName}
+        />
+      </FormGroup>
+
       <FormGroup
         advancedSettings={advancedSettings}
         isAdvanced={true}

frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css

@@ -6,15 +6,15 @@
 .addIndexerProxy {
   composes: indexerProxy from '~./IndexerProxy.css';
 
-  background-color: $cardAlternateBackgroundColor;
+  background-color: var(--cardAlternateBackgroundColor);
-  color: $gray;
+  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);
 }

frontend/src/Settings/Notifications/Notifications/Notifications.css

@@ -6,15 +6,15 @@
 .addNotification {
   composes: notification from '~./Notification.css';
 
-  background-color: $cardAlternateBackgroundColor;
+  background-color: var(--cardAlternateBackgroundColor);
-  color: $gray;
+  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);
 }

frontend/src/Settings/Profiles/App/AppProfiles.css

@@ -6,8 +6,8 @@
 .addAppProfile {
   composes: appProfile from '~./AppProfile.css';
 
-  background-color: $cardAlternateBackgroundColor;
+  background-color: var(--cardAlternateBackgroundColor);
-  color: $gray;
+  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);
 }

frontend/src/Settings/Profiles/App/AppProfiles.js

@@ -52,7 +52,7 @@ class AppProfiles extends Component {
     } = this.props;
 
     return (
-      <FieldSet legend={translate('AppProfiles')}>
+      <FieldSet legend={translate('SyncProfiles')}>
         <PageSectionContent
           errorMessage={translate('UnableToLoadAppProfiles')}
           {...otherProps}c={true}

frontend/src/Settings/Profiles/App/EditAppProfileModalContent.js

@@ -40,14 +40,15 @@ class EditAppProfileModalContent extends Component {
       name,
       enableRss,
       enableInteractiveSearch,
-      enableAutomaticSearch
+      enableAutomaticSearch,
+      minimumSeeders
     } = item;
 
     return (
       <ModalContent onModalClose={onModalClose}>
 
         <ModalHeader>
-          {id ? translate('EditAppProfile') : translate('AddAppProfile')}
+          {id ? translate('EditSyncProfile') : translate('AddSyncProfile')}
         </ModalHeader>
 
         <ModalBody>
@@ -123,6 +124,20 @@ class EditAppProfileModalContent extends Component {
                       onChange={onInputChange}
                     />
                   </FormGroup>
+
+                  <FormGroup>
+                    <FormLabel>
+                      {translate('MinimumSeeders')}
+                    </FormLabel>
+
+                    <FormInputGroup
+                      type={inputTypes.NUMBER}
+                      name="minimumSeeders"
+                      {...minimumSeeders}
+                      helpText={translate('MinimumSeedersHelpText')}
+                      onChange={onInputChange}
+                    />
+                  </FormGroup>
                 </Form>
             }
           </div>

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);
 }

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;

frontend/src/Settings/UI/UISettings.js

@@ -10,6 +10,8 @@ import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import { inputTypes } from 'Helpers/Props';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import themes from 'Styles/Themes';
+import titleCase from 'Utilities/String/titleCase';
 import translate from 'Utilities/String/translate';
 
 export const firstDayOfWeekOptions = [
@@ -62,6 +64,9 @@ class UISettings extends Component {
 
     const uiLanguages = languages.filter((item) => item.value !== 'Original');
 
+    const themeOptions = Object.keys(themes)
+      .map((theme) => ({ key: theme, value: titleCase(theme) }));
+
     return (
       <PageContent title={translate('UISettings')}>
         <SettingsToolbarConnector
@@ -138,6 +143,17 @@ class UISettings extends Component {
                 </FieldSet>
 
                 <FieldSet legend={translate('Style')}>
+                  <FormGroup>
+                    <FormLabel>{translate('Theme')}</FormLabel>
+                    <FormInputGroup
+                      type={inputTypes.SELECT}
+                      name="theme"
+                      helpText={translate('ThemeHelpText', ['Theme.Park'])}
+                      values={themeOptions}
+                      onChange={onInputChange}
+                      {...settings.theme}
+                    />
+                  </FormGroup>
                   <FormGroup>
                     <FormLabel>{translate('SettingsEnableColorImpairedMode')}</FormLabel>
                     <FormInputGroup

frontend/src/Store/Actions/indexerIndexActions.js

@@ -76,7 +76,7 @@ export const defaultState = {
     },
     {
       name: 'appProfileId',
-      label: translate('AppProfile'),
+      label: translate('SyncProfile'),
       isSortable: true,
       isVisible: true
     },
@@ -152,7 +152,7 @@ export const defaultState = {
     },
     {
       name: 'appProfileId',
-      label: translate('AppProfile'),
+      label: translate('SyncProfile'),
       type: filterBuilderTypes.EXACT,
       valueType: filterBuilderValueTypes.APP_PROFILE
     },

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);
     }
   }
 }

frontend/src/Styles/Themes/dark.js

@@ -0,0 +1,193 @@
+const prowlarrOrange = '#e66000';
+
+module.exports = {
+  textColor: '#ccc',
+  defaultColor: '#ccc',
+  disabledColor: '#999',
+  dimColor: '#555',
+  black: '#000',
+  white: '#fff',
+  primaryColor: '#5d9cec',
+  selectedColor: '#f9be03',
+  successColor: '#00853d',
+  dangerColor: '#f05050',
+  warningColor: '#ffa500',
+  infoColor: '#5d9cec',
+  purple: '#7a43b6',
+  prowlarrOrange,
+  helpTextColor: '#909293',
+  darkGray: '#888',
+  gray: '#adadad',
+
+  // Theme Colors
+
+  themeBlue: prowlarrOrange,
+  themeRed: '#c4273c',
+  themeDarkColor: '#595959',
+  themeLightColor: prowlarrOrange,
+  pageBackground: '#202020',
+  pageFooterBackgroud: 'rgba(0, 0, 0, .25)',
+
+  torrentColor: '#00853d',
+  usenetColor: '#17b1d9',
+
+  // Labels
+  inverseLabelColor: '#ddd',
+  inverseLabelTextColor: prowlarrOrange,
+
+  // Links
+  defaultLinkHoverColor: '#fff',
+  linkColor: '#rgb(230, 96, 0)',
+  linkHoverColor: '#rgb(230, 96, 0, .8)',
+
+  // Header
+  pageHeaderBackgroundColor: '#2a2a2a',
+
+  // Sidebar
+
+  sidebarColor: '#e1e2e3',
+  sidebarBackgroundColor: '#2a2a2a',
+  sidebarActiveBackgroundColor: '#333333',
+
+  // Toolbar
+  toolbarColor: '#e1e2e3',
+  toolbarBackgroundColor: '#262626',
+  toolbarMenuItemBackgroundColor: '#333',
+  toolbarMenuItemHoverBackgroundColor: '#414141',
+  toolbarLabelColor: '#e1e2e3',
+
+  // Accents
+  borderColor: '#e5e5e5',
+  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: '#ffffff',
+  colorImpairedGradientDark: '#f4f5f6',
+
+  //
+  // Buttons
+
+  defaultButtonTextColor: '#eee',
+  defaultButtonBackgroundColor: '#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: '#e66000',
+  menuItemHoverBackgroundColor: '#606060',
+
+  //
+  // Toolbar
+
+  toobarButtonHoverColor: '#e66000',
+  toobarButtonSelectedColor: '#e66000',
+
+  //
+  // 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',
+
+  //
+  // 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)',
+
+  //
+  // Table
+
+  tableRowHoverBackgroundColor: 'rgba(255, 255, 255, 0.08)',
+
+  //
+  // Charts
+
+  failedColors: ['#ffbeb2', '#feb4a6', '#fdab9b', '#fca290', '#fb9984', '#fa8f79', '#f9856e', '#f77b66', '#f5715d', '#f36754', '#f05c4d', '#ec5049', '#e74545', '#e13b42', '#da323f', '#d3293d', '#ca223c', '#c11a3b', '#b8163a', '#ae123a'],
+  chartColorsDiversified: ['#90caf9', '#f4d166', '#ff8a65', '#ce93d8', '#80cba9', '#ffab91', '#8097ea', '#bcaaa4', '#a57583', '#e4e498', '#9e96af', '#c6ab81', '#6972c6', '#619fc6', '#81ad81', '#f48fb1', '#82afca', '#b5b071', '#8b959b', '#7ec0b4'],
+  chartColors: ['#f4d166', '#f6c760', '#f8bc58', '#f8b252', '#f7a84a', '#f69e41', '#f49538', '#f38b2f', '#f28026', '#f0751e', '#eb6c1c', '#e4641e', '#de5d1f', '#d75521', '#cf4f22', '#c64a22', '#bc4623', '#b24223', '#a83e24', '#9e3a26']
+};

frontend/src/Styles/Themes/index.js

@@ -0,0 +1,7 @@
+import * as dark from './dark';
+import * as light from './light';
+
+export default {
+  light,
+  dark
+};