diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 0a83237f45..9136f432dd 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -364,7 +364,7 @@ "Automatically replace plain text Emoji": "Automatically replace plain text Emoji", "Mirror local video feed": "Mirror local video feed", "Enable Community Filter Panel": "Enable Community Filter Panel", - "Match system dark mode setting": "Match system dark mode setting", + "Match system theme": "Match system theme", "Allow Peer-to-Peer for 1:1 calls": "Allow Peer-to-Peer for 1:1 calls", "Send analytics data": "Send analytics data", "Never send encrypted messages to unverified devices from this device": "Never send encrypted messages to unverified devices from this device", diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 5a3283c5f0..b02ab82400 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -284,7 +284,7 @@ export const SETTINGS = { "use_system_theme": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS, default: true, - displayName: _td("Match system dark mode setting"), + displayName: _td("Match system theme"), }, "webRtcAllowPeerToPeer": { supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, diff --git a/src/theme.js b/src/theme.js index 9208ff2045..3f50f8ba88 100644 --- a/src/theme.js +++ b/src/theme.js @@ -20,7 +20,7 @@ import {_t} from "./languageHandler"; export const DEFAULT_THEME = "light"; import Tinter from "./Tinter"; import dis from "./dispatcher"; -import SettingsStore from "./settings/SettingsStore"; +import SettingsStore, {SettingLevel} from "./settings/SettingsStore"; export class ThemeWatcher { static _instance = null; @@ -60,14 +60,14 @@ export class ThemeWatcher { _onChange = () => { this.recheck(); - } + }; _onAction = (payload) => { if (payload.action === 'recheck_theme') { // XXX forceTheme this.recheck(payload.forceTheme); } - } + }; // XXX: forceTheme param aded here as local echo appears to be unreliable // https://github.com/vector-im/riot-web/issues/11443 @@ -80,6 +80,25 @@ export class ThemeWatcher { } getEffectiveTheme() { + // If the user has specifically enabled the system matching option (excluding default), + // then use that over anything else. We pick the lowest possible level for the setting + // to ensure the ordering otherwise works. + const systemThemeExplicit = SettingsStore.getValueAt( + SettingLevel.DEVICE, "use_system_theme", null, false, true); + if (systemThemeExplicit) { + if (this._preferDark.matches) return 'dark'; + if (this._preferLight.matches) return 'light'; + } + + // If the user has specifically enabled the theme (without the system matching option being + // enabled specifically and excluding the default), use that theme. We pick the lowest possible + // level for the setting to ensure the ordering otherwise works. + const themeExplicit = SettingsStore.getValueAt( + SettingLevel.DEVICE, "theme", null, false, true); + if (themeExplicit) return themeExplicit; + + // If the user hasn't really made a preference in either direction, assume the defaults of the + // settings and use those. if (SettingsStore.getValue('use_system_theme')) { if (this._preferDark.matches) return 'dark'; if (this._preferLight.matches) return 'light';