New: Auto theme option to match OS theme

Closes #2022 Co-authored-by: Qstick <qstick@gmail.com> (cherry picked from commit 4ca5a213fa0fc29ed93e7e31b080728d6fa7f1f3)
Readarr · Jan 24, 2023 · ed1b29f · ed1b29f
1 parent 8a4d309
commit ed1b29f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/frontend/src/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js
@@ -186,11 +186,11 @@ class UISettings extends Component {
                   legend={translate('Style')}
                 >
                   <FormGroup>
-                    <FormLabel>Theme</FormLabel>
+                    <FormLabel>{translate('Theme')}</FormLabel>
                     <FormInputGroup
                       type={inputTypes.SELECT}
                       name="theme"
-                      helpText="Change Application UI Theme, Inspired by Theme.Park"
+                      helpText={translate('ThemeHelpText')}
                       values={themeOptions}
                       onChange={onInputChange}
                       {...settings.theme}

diff --git a/frontend/src/Styles/Themes/index.js b/frontend/src/Styles/Themes/index.js
@@ -1,7 +1,11 @@
 import * as dark from './dark';
 import * as light from './light';
 
+const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const auto = defaultDark ? { ...dark } : { ...light };
+
 export default {
+  auto,
   light,
   dark
 };
diff --git a/src/NzbDrone.Core/Configuration/ConfigFileProvider.cs b/src/NzbDrone.Core/Configuration/ConfigFileProvider.cs
@@ -206,7 +206,7 @@ public AuthenticationType AuthenticationMethod
         public string PostgresCacheDb => _postgresOptions?.CacheDb ?? GetValue("PostgresCacheDb", "readarr-cache", persist: false);
         public int PostgresPort => (_postgresOptions?.Port ?? 0) != 0 ? _postgresOptions.Port : GetValueInt("PostgresPort", 5432, persist: false);
 
-        public string Theme => GetValue("Theme", "light", persist: false);
+        public string Theme => GetValue("Theme", "auto", 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/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
@@ -770,6 +770,8 @@
   "TheAuthorFolderAndAllOfItsContentWillBeDeleted": "The author folder {0} and all of its content will be deleted.",
   "TheBooksFilesWillBeDeleted": "The book's files will be deleted.",
   "TheFollowingFilesWillBeDeleted": "The following files will be deleted:",
+  "Theme": "Theme",
+  "ThemeHelpText": "Change Application UI Theme, 'Auto' Theme will use your OS Theme to set Light or Dark mode. Inspired by Theme.Park",
   "ThisCannotBeCancelled": "This cannot be cancelled once started without disabling all of your indexers.",
   "ThisWillApplyToAllIndexersPleaseFollowTheRulesSetForthByThem": "This will apply to all indexers, please follow the rules set forth by them",
   "Time": "Time",