[WFX-346] Add toggle to force light/dark mode in dynamic themes.

mqt635 · Mar 7, 2022 · 3b9d71a · 3b9d71a
1 parent 25faee1
commit 3b9d71a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 0 deletions.
diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js
@@ -230,6 +230,9 @@ Preferences.addAll([
   { id: "browser.tabs.insertAfterCurrent", type: "bool" },
   { id: "browser.tabs.insertRelatedAfterCurrent", type: "bool" },
 
+  // Dark Theme
+  { id: "ui.systemUsesDarkTheme", type: "int" },
+
   // Restart Menu Item
   { id: "browser.restart_menu.purgecache", type: "bool" },
   { id: "browser.restart_menu.requireconfirm", type: "bool" },
@@ -735,6 +738,13 @@ var gMainPane = {
       }
     }
 
+    // WATERFOX
+    // Select the correct radio button based on current pref value
+    this.setDynamicThemeGroupValue();
+    setEventListener("dynamicThemeGroup", "command", event => {
+      this.updateDynamicThemePref(event.target.value);
+    });
+
     // Initilize Application section.
 
     // Observe preferences that influence what we display so we can rebuild
@@ -2003,6 +2013,29 @@ var gMainPane = {
     }
   },
 
+  async setDynamicThemeGroupValue() {
+    let radiogroup = document.getElementById("dynamicThemeRadioGroup");
+    radiogroup.disabled = true;
+
+    radiogroup.value = Services.prefs.getIntPref("ui.systemUsesDarkTheme", -1);
+
+    radiogroup.disabled = false;
+  },
+
+  async updateDynamicThemePref(value) {
+    switch (value) {
+      case "1":
+        Services.prefs.setIntPref("ui.systemUsesDarkTheme", 1);
+        break;
+      case "0":
+        Services.prefs.setIntPref("ui.systemUsesDarkTheme", 0);
+        break;
+      case "-1":
+        Services.prefs.clearUserPref("ui.systemUsesDarkTheme");
+        break;
+    }
+  },
+
   /**
    * Displays the history of installed updates.
    */

diff --git a/browser/extensions/extensibles/extension/builtins/preferences/otherfeatures.inc b/browser/extensions/extensibles/extension/builtins/preferences/otherfeatures.inc
@@ -1,3 +1,18 @@
+<!-- Dynamic Theme preferences -->
+  <groupbox id="dynamicThemeGroup" data-category="paneGeneral" hidden="true">
+    <label>
+      <html:h2 data-l10n-id="dynamic-theme-header" />
+    </label>
+    <radiogroup id="dynamicThemeRadioGroup">
+      <radio value="1"
+             data-l10n-id="dynamic-theme-dark"/>
+      <radio value="0"
+             data-l10n-id="dynamic-theme-light"/>
+      <radio value="-1"
+             data-l10n-id="dynamic-theme-auto"/>
+    </radiogroup>
+  </groupbox>
+
 <!-- Restart Menu Item preferences -->
   <groupbox id="restartGroup" data-category="paneGeneral" hidden="true">
     <label>

diff --git a/browser/locales/en-US/browser/preferences/preferences.ftl b/browser/locales/en-US/browser/preferences/preferences.ftl
@@ -1368,6 +1368,13 @@ insert-after-current =
     .label = Insert new tab after current tab
 insert-related-after-current =
     .label = Insert related new tab after current tab
+dynamic-theme-header = Dynamic Themes
+dynamic-theme-dark =
+    .label = Force Dark Mode
+dynamic-theme-light =
+    .label = Force Light Mode
+dynamic-theme-auto =
+    .label = Dynamically Set Light/Dark Mode
 restart-header = Restart Menu Item
 restart-show-button =
     .label = Show restart button in PanelUI