From 4cec7c41b109714eae3f5b44535b0130ad2f0fd4 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 26 Nov 2019 09:52:03 -0700
Subject: [PATCH] Fix override behaviour of system vs defined themes

Fixes https://github.com/vector-im/riot-web/issues/11509
---
 src/i18n/strings/en_EN.json |  2 +-
 src/settings/Settings.js    |  2 +-
 src/theme.js                | 23 ++++++++++++++++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

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..045e573361 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,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';