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 1/2] 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';
From d50d8877e0d92a843ef0b2d54318438259b86f44 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 26 Nov 2019 09:56:04 -0700
Subject: [PATCH 2/2] Appease the linter
---
src/theme.js | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/theme.js b/src/theme.js
index 045e573361..3f50f8ba88 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -83,7 +83,8 @@ export class ThemeWatcher {
// 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);
+ 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';
@@ -92,7 +93,8 @@ export class ThemeWatcher {
// 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);
+ 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