diff --git a/frontend/src/Styles/Themes/index.js b/frontend/src/Styles/Themes/index.js index 02068cc4c..d93c5dd8c 100644 --- 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 index d379ad698..2b3106e21 100644 --- a/src/NzbDrone.Core/Configuration/ConfigFileProvider.cs +++ b/src/NzbDrone.Core/Configuration/ConfigFileProvider.cs @@ -198,7 +198,7 @@ public AuthenticationType AuthenticationMethod 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 string Theme => GetValue("Theme", "auto", persist: false); public string PostgresHost => _postgresOptions?.Host ?? GetValue("PostgresHost", string.Empty, persist: false); public string PostgresUser => _postgresOptions?.User ?? GetValue("PostgresUser", string.Empty, persist: false); public string PostgresPassword => _postgresOptions?.Password ?? GetValue("PostgresPassword", string.Empty, persist: false); diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json index 76fe5b98f..f3b85e496 100644 --- a/src/NzbDrone.Core/Localization/Core/en.json +++ b/src/NzbDrone.Core/Localization/Core/en.json @@ -928,7 +928,7 @@ "SettingsShowRelativeDates": "Show Relative Dates", "SettingsShowRelativeDatesHelpText": "Show relative (Today/Yesterday/etc) or absolute dates", "SettingsTheme": "Theme", - "SettingsThemeHelpText": "Change Application UI Theme, Inspired by Theme.Park", + "SettingsThemeHelpText": "Change Application UI Theme, 'Auto' Theme will use your OS Theme to set Light or Dark mode. Inspired by Theme.Park", "SettingsTimeFormat": "Time Format", "SettingsWeekColumnHeader": "Week Column Header", "SettingsWeekColumnHeaderHelpText": "Shown above each column when week is the active view",