New: Native Theme Engine

Co-Authored-By: Zak Saunders <1936903+thezak48@users.noreply.github.com>

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/CustomFormats/CustomFormats/CustomFormats.css

@@ -6,8 +6,8 @@
 .addCustomFormat {
   composes: customFormat from '~./CustomFormat.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);
 }

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css

@@ -12,8 +12,8 @@
 .addSpecification {
   composes: customFormat from '~./CustomFormat.css';
 
-  background-color: $cardAlternateBackgroundColor;
-  color: $gray;
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
   text-align: center;
   font-size: 45px;
 }
@@ -21,7 +21,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/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);
 }

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

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

frontend/src/Settings/ImportLists/ImportLists/ImportLists.css

@@ -6,15 +6,15 @@
 .addImportList {
   composes: importList 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);
 }

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

frontend/src/Settings/Indexers/Restrictions/Restrictions.css

@@ -6,15 +6,15 @@
 .addRestriction {
   composes: restriction from '~./Restriction.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);
 }

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

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 {

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

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

frontend/src/Settings/Profiles/Profiles.css

@@ -1,5 +1,5 @@
 .addCustomFormatMessage {
-  color: $helpTextColor;
+  color: var(--helpTextColor);
   text-align: center;
   font-weight: 300;
   font-size: 20px;

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css

@@ -10,7 +10,7 @@
   width: 100%;
   border: 1px solid #aaa;
   border-radius: 4px;
-  background: #fafafa;
+  background: var(--modalBackgroundColor);
 }
 
 .formatNameContainer {

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css

@@ -24,7 +24,7 @@
 
 .addCustomFormatMessage {
   max-width: $formGroupExtraSmallWidth;
-  color: $helpTextColor;
+  color: var(--helpTextColor);
   text-align: center;
   font-weight: 300;
   font-size: 20px;

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;

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

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

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(3n+1) {
@@ -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;
 }

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

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 = [
@@ -65,6 +67,9 @@ class UISettings extends Component {
       ...otherProps
     } = this.props;
 
+    const themeOptions = Object.keys(themes)
+      .map((theme) => ({ key: theme, value: titleCase(theme) }));
+
     const uiLanguages = languages.filter((item) => item.value !== 'Original');
 
     return (
@@ -184,6 +189,18 @@ class UISettings extends Component {
                 </FieldSet>
 
                 <FieldSet legend={translate('Style')}>
+                  <FormGroup>
+                    <FormLabel>{translate('SettingsTheme')}</FormLabel>
+                    <FormInputGroup
+                      type={inputTypes.SELECT}
+                      name="theme"
+                      helpText={translate('SettingsThemeHelpText')}
+                      values={themeOptions}
+                      onChange={onInputChange}
+                      {...settings.theme}
+                    />
+                  </FormGroup>
+
                   <FormGroup>
                     <FormLabel>{translate('SettingsEnableColorImpairedMode')}</FormLabel>
                     <FormInputGroup
@@ -237,8 +254,8 @@ UISettings.propTypes = {
   error: PropTypes.object,
   settings: PropTypes.object.isRequired,
   hasSettings: PropTypes.bool.isRequired,
-  onSavePress: PropTypes.func.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSavePress: PropTypes.func.isRequired,
   onInputChange: PropTypes.func.isRequired
 };