Fix override behaviour of system vs defined themes

Fixes https://github.com/vector-im/riot-web/issues/11509

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",

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,

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,23 @@ 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';