Add dark mode to the browser

2026-08-15 08:53:07 +09:00 · 2026-04-02 15:45:15 +01:00 · 2026-04-02 15:45:15 +01:00 · 14f1894779
commit 14f1894779
parent 7a1e4d1312
17 changed files with 1153 additions and 4 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -2,6 +2,7 @@
    "git.ignoreLimitWarning": true,
    "chat.tools.terminal.autoApprove": {
        "ForEach-Object": true,
-        "Get-Item": true
+        "Get-Item": true,
+        "Test-Path": true
    }
 }
--- a/application/basilisk/app/profile/basilisk.js
+++ b/application/basilisk/app/profile/basilisk.js
@ -595,6 +595,7 @@ pref("mousewheel.with_win.action", 1);

 pref("browser.xul.error_pages.enabled", true);
 pref("browser.xul.error_pages.expert_bad_cert", false);
+pref("browser.theme.mode", "system");

 // Enable captive portal detection.
 pref("network.captive-portal-service.enabled", true);
--- a/application/basilisk/base/content/abouthome/aboutHome.css
+++ b/application/basilisk/base/content/abouthome/aboutHome.css
@ -400,3 +400,45 @@ body[narrow] #restorePreviousSession::before {
  }
 }

+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: #1f2328;
+    color: #f1f4f7;
+  }
+
+  a {
+    color: #75bbff;
+  }
+
+  #topSection h1 {
+    color: #f1f4f7;
+  }
+
+  #searchIcon {
+    filter: invert(100%) brightness(1.05);
+  }
+
+  #searchText {
+    background: #2b3037 padding-box;
+    border-color: #4b535d;
+    color: #f1f4f7;
+    box-shadow: none;
+  }
+
+  #searchText[keepfocus],
+  #searchText:focus,
+  #searchText[autofocus] {
+    border-color: #4aa3ff;
+  }
+
+  #searchSubmit {
+    background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted") center center no-repeat, linear-gradient(#3e454f, #30363d) padding-box;
+    border-color: #4b535d;
+    box-shadow: none;
+  }
+
+  #searchSubmit:dir(rtl) {
+    background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#3e454f, #30363d);
+  }
+}
+
--- a/application/basilisk/base/content/browser.css
+++ b/application/basilisk/base/content/browser.css
@ -448,6 +448,25 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
  background-position: bottom left;
 }

+/* Dark mode browser frame background overrides */
+:root[data-theme="dark"] #tab-view-deck,
+:root[data-theme="dark"] #browser-panel,
+:root[data-theme="dark"] #browser-bottombox,
+:root[data-theme="dark"] #browser,
+:root[data-theme="dark"] #appcontent,
+:root[data-theme="dark"] #content,
+:root[data-theme="dark"] .browserStack,
+:root[data-theme="dark"] #high-priority-global-notificationbox,
+:root[data-theme="dark"] #global-notificationbox,
+:root[data-theme="dark"] #main-window {
+  background: #2b2b2b !important;
+  background-color: #2b2b2b !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: #2b2b2b !important;
+  box-shadow: none !important;
+}
+
 .menuitem-tooltip {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#menuitem-tooltip");
 }
--- a/application/basilisk/base/content/browser.js
+++ b/application/basilisk/base/content/browser.js
@ -11,6 +11,34 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/ContextualIdentityService.jsm");
 Cu.import("resource://gre/modules/NotificationDB.jsm");

+function ensureThemeManagerLoaded() {
+  if (window.ThemeManager && typeof window.ThemeManager.toggleDarkMode == "function") {
+    return window.ThemeManager;
+  }
+
+  try {
+    var loader = Cc["@mozilla.org/moz/jssubscript-loader;1"]
+      .getService(Ci.mozIJSSubScriptLoader);
+    loader.loadSubScript("chrome://browser/content/themeManager.js", window);
+  } catch (ex) {
+    Cu.reportError(ex);
+  }
+
+  return window.ThemeManager || null;
+}
+
+window.toggleDarkMode = function() {
+  var manager = ensureThemeManagerLoaded();
+  if (manager && typeof manager.toggleDarkMode == "function") {
+    manager.toggleDarkMode();
+  }
+};
+
+this.toggleDarkMode = window.toggleDarkMode;
+if (typeof top != "undefined") {
+  top.toggleDarkMode = window.toggleDarkMode;
+}
+
 // lazy module getters
 [
  ["AboutHome", "resource:///modules/AboutHome.jsm"],
--- a/application/basilisk/base/content/browser.xul
+++ b/application/basilisk/base/content/browser.xul
@ -76,6 +76,8 @@
 <script type="application/javascript" src="chrome://browser/content/downloads/indicator.js"/>
 <script type="application/javascript" src="chrome://browser/content/places/editBookmarkOverlay.js"/>

+<script type="application/javascript" src="chrome://browser/content/themeManager.js"/>
+
 # All sets except for popupsets (commands, keys, stringbundles and broadcasters) *must* go into the
 # browser-sets.inc file for sharing with hiddenWindow.xul.
 #define FULL_BROWSER_WINDOW
--- a/application/basilisk/base/content/contentSearchUI.css
+++ b/application/basilisk/base/content/contentSearchUI.css
@ -159,3 +159,58 @@
 .contentSearchSettingsButton:active {
  background-color: hsl(0, 0%, 85%);
 }
+
+@media (prefers-color-scheme: dark) {
+  .contentSearchSuggestionTable,
+  .contentSearchSuggestionsList,
+  .contentSearchHeader,
+  .contentSearchSuggestionEntry,
+  .contentSearchSettingsButton {
+    color-scheme: dark;
+  }
+
+  .contentSearchSuggestionTable {
+    background-color: #2b3037;
+    border-color: #4b535d;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
+    color: #f1f4f7;
+  }
+
+  .contentSearchSuggestionsList {
+    border-bottom-color: #4b535d;
+  }
+
+  .contentSearchSuggestionTable .historyIcon {
+    filter: invert(100%) brightness(1.05);
+  }
+
+  .contentSearchHeader {
+    background-color: #252a31;
+    color: #b9c6d4;
+    border-bottom-color: #4b535d;
+  }
+
+  .contentSearchSuggestionRow.selected,
+  .contentSearchOneOffItem.selected {
+    background-color: #1b84d6;
+    color: #ffffff;
+  }
+
+  .contentSearchOneOffItem:not(.last-row) {
+    border-bottom-color: #3d434b;
+  }
+
+  .contentSearchSettingsButton {
+    border-top-color: #4b535d;
+    background-color: #252a31;
+    color: #d6dde5;
+  }
+
+  .contentSearchSettingsButton.selected {
+    background-color: #343a43;
+  }
+
+  .contentSearchSettingsButton:active {
+    background-color: #3e454f;
+  }
+}
--- a/application/basilisk/base/content/themeManager.js
+++ b/application/basilisk/base/content/themeManager.js
@ -0,0 +1,232 @@
+/* Dark Mode Theme Manager
+ * Handles OS dark mode detection and manual theme toggle
+ */
+
+var ThemeManager = window.ThemeManager || {};
+
+ThemeManager.getPrefBranch = function() {
+  if (!this.prefBranch) {
+    this.prefBranch = Components.classes["@mozilla.org/preferences-service;1"]
+      .getService(Components.interfaces.nsIPrefService)
+      .getBranch("browser.theme.");
+  }
+
+  return this.prefBranch;
+};
+
+ThemeManager.getGlobalPrefBranch = function() {
+  if (!this.globalPrefBranch) {
+    this.globalPrefBranch = Components.classes["@mozilla.org/preferences-service;1"]
+      .getService(Components.interfaces.nsIPrefService)
+      .getBranch("");
+  }
+
+  return this.globalPrefBranch;
+};
+
+ThemeManager.init = function() {
+  this.getPrefBranch();
+
+  // Check stored preference first, then OS preference.
+  this.applyTheme();
+
+  // Listen for preference and system theme changes.
+  this.setupPrefObserver();
+  this.setupMediaQueryListener();
+};
+
+ThemeManager.setupPrefObserver = function() {
+  if (!this.prefObserverRegistered) {
+    this.getPrefBranch().addObserver("", this, false);
+    this.prefObserverRegistered = true;
+  }
+};
+
+ThemeManager.observe = function(subject, topic, data) {
+  // browser.theme.mode changes are intentionally applied on next startup
+  // so the preferences UI setting is restart-required.
+  if (topic === "nsPref:changed" && data === "mode") {
+    return;
+  }
+};
+
+ThemeManager.shouldFollowSystem = function() {
+  try {
+    return this.getPrefBranch().getCharPref("mode") === "system";
+  } catch (e) {
+    return true;
+  }
+};
+
+ThemeManager.readWindowsThemeValue = function(rootKey, valueName) {
+  var regKey = Components.classes["@mozilla.org/windows-registry-key;1"]
+    .createInstance(Components.interfaces.nsIWindowsRegKey);
+  var winReg = Components.interfaces.nsIWindowsRegKey;
+  var personalizePath = "Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize";
+
+  try {
+    regKey.open(rootKey, personalizePath, winReg.ACCESS_READ);
+    if (regKey.hasValue(valueName)) {
+      return regKey.readIntValue(valueName);
+    }
+  } catch (e) {
+    // Ignore and return null below.
+  }
+
+  try {
+    regKey.close();
+  } catch (e2) {
+  }
+
+  return null;
+};
+
+ThemeManager.isSystemDarkModePreferred = function() {
+  // Prefer Windows registry signal when available.
+  try {
+    var winReg = Components.interfaces.nsIWindowsRegKey;
+    var appsUseLight = this.readWindowsThemeValue(winReg.ROOT_KEY_CURRENT_USER, "AppsUseLightTheme");
+    var systemUseLight = this.readWindowsThemeValue(winReg.ROOT_KEY_CURRENT_USER, "SystemUsesLightTheme");
+
+    // Some setups expose values under HKLM only.
+    if (appsUseLight === null) {
+      appsUseLight = this.readWindowsThemeValue(winReg.ROOT_KEY_LOCAL_MACHINE, "AppsUseLightTheme");
+    }
+    if (systemUseLight === null) {
+      systemUseLight = this.readWindowsThemeValue(winReg.ROOT_KEY_LOCAL_MACHINE, "SystemUsesLightTheme");
+    }
+
+    // Treat either key requesting dark as dark mode.
+    if (appsUseLight !== null || systemUseLight !== null) {
+      return appsUseLight === 0 || systemUseLight === 0;
+    }
+  } catch (e) {
+    // Fall through to standards-based media query.
+  }
+
+  // Fallback for non-Windows or unavailable registry signal.
+  if (window.matchMedia) {
+    var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    if (mediaQuery.media !== "not all") {
+      return mediaQuery.matches;
+    }
+  }
+
+  return false;
+};
+
+ThemeManager.setupMediaQueryListener = function() {
+    // Listen for OS dark mode changes if supported
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").media !== "not all") {
+      var darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      darkModeQuery.addListener(function(e) {
+        // Apply if following system mode (or no explicit pref).
+        if (this.shouldFollowSystem() || !this.hasUserPreference()) {
+          this.setTheme(e.matches ? "dark" : "light");
+        }
+      }.bind(this));
+    }
+};
+
+ThemeManager.hasUserPreference = function() {
+    try {
+      var pref = this.getPrefBranch().getCharPref("mode");
+      return pref !== "";
+    } catch (e) {
+      return false;
+    }
+};
+
+ThemeManager.applyTheme = function() {
+  var theme = "light";
+    
+    // Check user preference first
+    try {
+      var userPref = this.getPrefBranch().getCharPref("mode");
+      if (userPref === "dark" || userPref === "light") {
+        theme = userPref;
+      } else if (userPref === "system") {
+        theme = this.isSystemDarkModePreferred() ? "dark" : "light";
+      }
+    } catch (e) {
+      // Preference doesn't exist, check OS.
+      theme = this.isSystemDarkModePreferred() ? "dark" : "light";
+    }
+    
+    this.setTheme(theme);
+};
+
+ThemeManager.setTheme = function(theme) {
+  var docElement = document.documentElement;
+    
+    if (theme === "dark") {
+      docElement.setAttribute("data-theme", "dark");
+    } else {
+      docElement.removeAttribute("data-theme");
+    }
+
+    try {
+      var globalPrefs = this.getGlobalPrefBranch();
+      var mode = "system";
+      var prefersColorScheme = 3;
+
+      try {
+        mode = this.getPrefBranch().getCharPref("mode");
+      } catch (e2) {
+      }
+
+      if (mode === "dark") {
+        prefersColorScheme = 2;
+      } else if (mode === "light") {
+        prefersColorScheme = 1;
+      }
+
+      globalPrefs.setIntPref("browser.display.prefers_color_scheme", prefersColorScheme);
+      globalPrefs.setIntPref("ui.color_scheme", theme === "dark" ? 2 : 1);
+      globalPrefs.setBoolPref("mozilla.widget.disable-native-theme", false);
+    } catch (e) {
+      // Ignore pref write failures and keep the chrome theme applied.
+    }
+};
+
+// Public method to toggle theme
+ThemeManager.toggleDarkMode = function() {
+  var docElement = document.documentElement;
+  var isDark = docElement.getAttribute("data-theme") === "dark";
+    
+    try {
+      this.getPrefBranch().setCharPref("mode", !isDark ? "dark" : "light");
+    } catch (e) {
+      console.error("Failed to set theme preference:", e);
+    }
+    
+    this.setTheme(!isDark ? "dark" : "light");
+};
+
+// Get current theme mode
+ThemeManager.getTheme = function() {
+    var docElement = document.documentElement;
+    return docElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+};
+
+window.ThemeManager = ThemeManager;
+this.ThemeManager = ThemeManager;
+if (typeof top != "undefined") {
+  top.ThemeManager = ThemeManager;
+}
+window.toggleDarkMode = function() {
+  return ThemeManager.toggleDarkMode();
+};
+this.toggleDarkMode = window.toggleDarkMode;
+if (typeof top != "undefined") {
+  top.toggleDarkMode = window.toggleDarkMode;
+}
+
+// Initialize when document is ready
+if (document.readyState === "interactive" || document.readyState === "complete") {
+  ThemeManager.init();
+} else {
+  document.addEventListener("DOMContentLoaded", function() {
+    ThemeManager.init();
+  });
+}
--- a/application/basilisk/base/jar.mn
+++ b/application/basilisk/base/jar.mn
@ -65,6 +65,7 @@ browser.jar:
 *       content/browser/browser.css                   (content/browser.css)
 *       content/browser/browser.js                    (content/browser.js)
 *       content/browser/browser.xul                   (content/browser.xul)
+        content/browser/themeManager.js               (content/themeManager.js)
        content/browser/browser-addons.js             (content/browser-addons.js)
        content/browser/browser-captivePortal.js      (content/browser-captivePortal.js)
        content/browser/browser-ctrlTab.js            (content/browser-ctrlTab.js)
--- a/application/basilisk/components/preferences/in-content/main.xul
+++ b/application/basilisk/components/preferences/in-content/main.xul
@ -101,6 +101,9 @@
    <preference id="widget.native-controls.override-win-version"
                name="widget.native-controls.override-win-version"
                type="int"/>
+    <preference id="browser.theme.mode"
+          name="browser.theme.mode"
+          type="string"/>

 </preferences>

@ -334,5 +337,28 @@
        </menulist>
      </html:td>
    </html:tr>
+    <html:tr>
+      <html:td class="label-cell">
+        <label accesskey="&browserColorScheme.accesskey;"
+               control="browserColorScheme">&browserColorScheme.label;</label>
+      </html:td>
+      <html:td class="content-cell">
+        <menulist id="browserColorScheme"
+                  class="content-cell-item"
+                  preference="browser.theme.mode">
+          <menupopup>
+          <menuitem label="&browserColorSchemeSystem.label;"
+                    value="system"
+                    id="browserColorSchemeSystem"/>
+          <menuitem label="&browserColorSchemeLight.label;"
+                    value="light"
+                    id="browserColorSchemeLight"/>
+          <menuitem label="&browserColorSchemeDark.label;"
+                    value="dark"
+                    id="browserColorSchemeDark"/>
+          </menupopup>
+        </menulist>
+      </html:td>
+    </html:tr>
  </html:table>
 </groupbox>
--- a/application/basilisk/locales/en-US/chrome/browser/preferences/main.dtd
+++ b/application/basilisk/locales/en-US/chrome/browser/preferences/main.dtd
@ -47,9 +47,9 @@

 <!ENTITY e10sEnabled.label                "Enable multi-process &brandShortName;">

-<!ENTITY theme.label                      "Theme Override">
+<!ENTITY theme.label                      "Themes">

-<!ENTITY ThemeOverride.label              "Override Windows version theme (requires restart):">
+<!ENTITY ThemeOverride.label              "Windows theme override (requires restart):">
 <!ENTITY ThemeOverride.accesskey          "t">
 <!ENTITY browserThemeOverrideNone.label   "Current OS version">
 <!ENTITY browserThemeOverrideXP.label     "Windows XP">
@ -58,3 +58,9 @@
 <!ENTITY browserThemeOverride8.label      "Windows 8">
 <!ENTITY browserThemeOverride10.label     "Windows 10">
 <!ENTITY browserThemeOverride11.label     "Windows 11">
+
+<!ENTITY browserColorScheme.label         "Color scheme (browser and webpages, requires restart):">
+<!ENTITY browserColorScheme.accesskey     "B">
+<!ENTITY browserColorSchemeSystem.label   "Follow system">
+<!ENTITY browserColorSchemeLight.label    "Light">
+<!ENTITY browserColorSchemeDark.label     "Dark">
--- a/application/basilisk/themes/windows/browser.css
+++ b/application/basilisk/themes/windows/browser.css
@ -2282,6 +2282,7 @@
    /* NUMERICAL VARIABLES */
    --image-inversion-percentage: 0%;
    --image-brightness: 1.0;
+    --chrome-icon-filter: none;

    /* IMAGE VARIABLES */
    --titlebar-min-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
@ -2409,6 +2410,174 @@
  --urlbar-separator-color: ThreeDLightShadow;
 }

+  /* Dark theme support - activates on OS dark mode or manual toggle */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --titlebar-min-max-hover-bg-color: #4a4a4a;
+      --titlebar-min-max-active-bg-color: #3c3c3c;
+      --titlebar-close-hover-bg-color: #c42b1c;
+      --titlebar-close-active-bg-color: #a62518;
+      --top-level-bg-color: #2b2b2b;
+      --top-level-bg-hover-color: #3c3c3c;
+      --top-level-bg-active-color: #4a4a4a;
+      --toolbar-bgcolor: #2b2b2b;
+      --toolbar-bgimage: none;
+      --toolbar-field-background-color: #3c3c3c;
+      --toolbar-field-color: #e0e0e0;
+      --toolbar-field-border-color: #5a5a5a;
+      --toolbar-field-focus-background-color: #3c3c3c;
+      --toolbar-field-focus-color: #ffffff;
+      --toolbar-field-focus-border-color: #0078d7;
+      --button-bgcolor: #3c3c3c;
+      --button-hover-bgcolor: #4a4a4a;
+      --button-active-bgcolor: #5a5a5a;
+      --button-primary-bgcolor: #0078d7;
+      --button-primary-hover-bgcolor: #1084d7;
+      --button-primary-active-bgcolor: #0066b3;
+      --tabs-border: 1px solid #1a1a1a;
+      --tab-bgcolor: #3c3c3c;
+      --tab-hover-bgcolor: #4a4a4a;
+      --tab-selected-bgcolor: #2b2b2b;
+      --tab-text-color: #e0e0e0;
+      --scrollbar-thumb-bgcolor: #5a5a5a;
+      --scrollbar-thumb-hover-bgcolor: #6a6a6a;
+      --scrollbar-track-bgcolor: #2b2b2b;
+      --autocomplete-popup-background: #2b2b2b;
+      --autocomplete-popup-border-color: #5a5a5a;
+      --autocomplete-popup-highlight-background: #0078d7;
+      --second-level-bg-color: #3c3c3c;
+      --second-level-bg-hover-color: #4a4a4a;
+      --second-level-bg-active-color: #5a5a5a;
+      --second-level-alt-bg-hover-color: #5a5a5a;
+      --second-level-alt-bg-active-color: #6a6a6a;
+      --tab-scroll-up-down-bg-color: #3c3c3c;
+      --tab-scroll-up-down-bg-hover-color: #4a4a4a;
+      --tab-scroll-up-down-bg-active-color: #5a5a5a;
+      --tab-scroll-up-down-bg-disabled-color: #3c3c3c;
+      --tab-button-bg-active-color: #5a5a5a;
+      --new-tab-hover-bg-color: #4a4a4a;
+      --alltabs-bg-hover-color: #4a4a4a;
+      --alltabs-bg-active-color: #5a5a5a;
+      --searchbar-bg-color: #3c3c3c;
+      --searchbar-bg-hover-color: #4a4a4a;
+      --searchbar-bg-active-color: #5a5a5a;
+      --tab-separator-color: #4a4a4a;
+      --urlbar-separator-color: #5a5a5a;
+      --navigator-separator-bg-color: #5a5a5a;
+      --downloads-indicator-remainder-color: #5a5a5a;
+      --downloads-indicator-bg-color: #0078d7;
+      --downloads-indicator-paused-bg-color: #ffa500;
+      --main-font-color: #e0e0e0;
+      --inactive-font-color: #b0b0b0;
+      --verified-identity-font-color: #90ee90;
+      --toolbarbutton-badge-bg-color: rgba(0, 120, 215, 0.8);
+      --toolbarbutton-badge-border-color: rgba(255, 255, 255, 0.3);
+      --panel-separator-color: rgba(255, 255, 255, 0.1);
+      --blue-accent-color: #0078d7;
+      --gray-text-color: #b0b0b0;
+      --hyperlink-text-color: #6eb3ff;
+      --button-bg-color: #3c3c3c;
+      --button-border-hover-color: #6a6a6a;
+      --button-bg-active-color: #5a5a5a;
+      --context-menu-bg-color: #2b2b2b;
+      --context-menu-bg-hover-color: #3c3c3c;
+      --context-menu-bg-active-color: #4a4a4a;
+      --context-menu-border-color: #5a5a5a;
+      --context-menu-separator-color: #5a5a5a;
+      --findbar-notfound-bg-color: #5a3030;
+      --findbar-flash-bg-color: #5a5a00;
+      --image-inversion-percentage: 100%;
+      --image-brightness: 1.0;
+      --chrome-icon-filter: invert(100%) brightness(1.12);
+      --arrowpanel-dimmed: hsla(0,0%,20%,.3);
+      --arrowpanel-dimmed-further: hsla(0,0%,20%,.45);
+      --arrowpanel-dimmed-even-further: hsla(0,0%,20%,.8);
+    }
+  }
+
+  /* Manual dark theme toggle - can be set via data-theme attribute */
+  :root[data-theme="dark"] {
+    --titlebar-min-max-hover-bg-color: #4a4a4a;
+    --titlebar-min-max-active-bg-color: #3c3c3c;
+    --titlebar-close-hover-bg-color: #c42b1c;
+    --titlebar-close-active-bg-color: #a62518;
+    --top-level-bg-color: #2b2b2b;
+    --top-level-bg-hover-color: #3c3c3c;
+    --top-level-bg-active-color: #4a4a4a;
+    --toolbar-bgcolor: #2b2b2b;
+    --toolbar-bgimage: none;
+    --toolbar-field-background-color: #3c3c3c;
+    --toolbar-field-color: #e0e0e0;
+    --toolbar-field-border-color: #5a5a5a;
+    --toolbar-field-focus-background-color: #3c3c3c;
+    --toolbar-field-focus-color: #ffffff;
+    --toolbar-field-focus-border-color: #0078d7;
+    --button-bgcolor: #3c3c3c;
+    --button-hover-bgcolor: #4a4a4a;
+    --button-active-bgcolor: #5a5a5a;
+    --button-primary-bgcolor: #0078d7;
+    --button-primary-hover-bgcolor: #1084d7;
+    --button-primary-active-bgcolor: #0066b3;
+    --tabs-border: 1px solid #1a1a1a;
+    --tab-bgcolor: #3c3c3c;
+    --tab-hover-bgcolor: #4a4a4a;
+    --tab-selected-bgcolor: #2b2b2b;
+    --tab-text-color: #e0e0e0;
+    --scrollbar-thumb-bgcolor: #5a5a5a;
+    --scrollbar-thumb-hover-bgcolor: #6a6a6a;
+    --scrollbar-track-bgcolor: #2b2b2b;
+    --autocomplete-popup-background: #2b2b2b;
+    --autocomplete-popup-border-color: #5a5a5a;
+    --autocomplete-popup-highlight-background: #0078d7;
+    --second-level-bg-color: #3c3c3c;
+    --second-level-bg-hover-color: #4a4a4a;
+    --second-level-bg-active-color: #5a5a5a;
+    --second-level-alt-bg-hover-color: #5a5a5a;
+    --second-level-alt-bg-active-color: #6a6a6a;
+    --tab-scroll-up-down-bg-color: #3c3c3c;
+    --tab-scroll-up-down-bg-hover-color: #4a4a4a;
+    --tab-scroll-up-down-bg-active-color: #5a5a5a;
+    --tab-scroll-up-down-bg-disabled-color: #3c3c3c;
+    --tab-button-bg-active-color: #5a5a5a;
+    --new-tab-hover-bg-color: #4a4a4a;
+    --alltabs-bg-hover-color: #4a4a4a;
+    --alltabs-bg-active-color: #5a5a5a;
+    --searchbar-bg-color: #3c3c3c;
+    --searchbar-bg-hover-color: #4a4a4a;
+    --searchbar-bg-active-color: #5a5a5a;
+    --tab-separator-color: #4a4a4a;
+    --urlbar-separator-color: #5a5a5a;
+    --navigator-separator-bg-color: #5a5a5a;
+    --downloads-indicator-remainder-color: #5a5a5a;
+    --downloads-indicator-bg-color: #0078d7;
+    --downloads-indicator-paused-bg-color: #ffa500;
+    --main-font-color: #e0e0e0;
+    --inactive-font-color: #b0b0b0;
+    --verified-identity-font-color: #90ee90;
+    --toolbarbutton-badge-bg-color: rgba(0, 120, 215, 0.8);
+    --toolbarbutton-badge-border-color: rgba(255, 255, 255, 0.3);
+    --panel-separator-color: rgba(255, 255, 255, 0.1);
+    --blue-accent-color: #0078d7;
+    --gray-text-color: #b0b0b0;
+    --hyperlink-text-color: #6eb3ff;
+    --button-bg-color: #3c3c3c;
+    --button-border-hover-color: #6a6a6a;
+    --button-bg-active-color: #5a5a5a;
+    --context-menu-bg-color: #2b2b2b;
+    --context-menu-bg-hover-color: #3c3c3c;
+    --context-menu-bg-active-color: #4a4a4a;
+    --context-menu-border-color: #5a5a5a;
+    --context-menu-separator-color: #5a5a5a;
+    --findbar-notfound-bg-color: #5a3030;
+    --findbar-flash-bg-color: #5a5a00;
+    --image-inversion-percentage: 100%;
+    --image-brightness: 1.0;
+    --chrome-icon-filter: invert(100%) brightness(1.12);
+    --arrowpanel-dimmed: hsla(0,0%,20%,.3);
+    --arrowpanel-dimmed-further: hsla(0,0%,20%,.45);
+    --arrowpanel-dimmed-even-further: hsla(0,0%,20%,.8);
+  }
+
@media (-moz-windows-default-theme) {
  :root {
    --panel-separator-color: hsla(210,4%,10%,.14);
@ -3961,6 +4130,88 @@ html|span.ac-tag {
  color: hsl(210, 80%, 40%);
 }

+:root[data-theme="dark"] #PopupAutoComplete,
+:root[data-theme="dark"] #PopupAutoCompleteRichResult,
+:root[data-theme="dark"] #PopupSearchAutoComplete,
+#main-window[lwtheme-brighttext] #PopupAutoComplete,
+#main-window[lwtheme-brighttext] #PopupAutoCompleteRichResult,
+#main-window[lwtheme-brighttext] #PopupSearchAutoComplete,
+toolbar[brighttext] #PopupAutoComplete,
+toolbar[brighttext] #PopupAutoCompleteRichResult,
+toolbar[brighttext] #PopupSearchAutoComplete {
+  background-color: #2b2b2b !important;
+  color: #f3f3f3 !important;
+  border-color: #5a5a5a !important;
+}
+
+:root[data-theme="dark"] #PopupAutoComplete .autocomplete-richlistbox,
+:root[data-theme="dark"] #PopupAutoCompleteRichResult .autocomplete-richlistbox,
+:root[data-theme="dark"] #PopupSearchAutoComplete .autocomplete-richlistbox,
+#main-window[lwtheme-brighttext] #PopupAutoComplete .autocomplete-richlistbox,
+#main-window[lwtheme-brighttext] #PopupAutoCompleteRichResult .autocomplete-richlistbox,
+#main-window[lwtheme-brighttext] #PopupSearchAutoComplete .autocomplete-richlistbox,
+toolbar[brighttext] #PopupAutoComplete .autocomplete-richlistbox,
+toolbar[brighttext] #PopupAutoCompleteRichResult .autocomplete-richlistbox,
+toolbar[brighttext] #PopupSearchAutoComplete .autocomplete-richlistbox {
+  background-color: #2b2b2b !important;
+  color: #f3f3f3 !important;
+}
+
+:root[data-theme="dark"] #PopupAutoComplete .autocomplete-richlistitem,
+:root[data-theme="dark"] #PopupAutoCompleteRichResult .autocomplete-richlistitem,
+:root[data-theme="dark"] #PopupSearchAutoComplete .autocomplete-richlistitem,
+#main-window[lwtheme-brighttext] #PopupAutoComplete .autocomplete-richlistitem,
+#main-window[lwtheme-brighttext] #PopupAutoCompleteRichResult .autocomplete-richlistitem,
+#main-window[lwtheme-brighttext] #PopupSearchAutoComplete .autocomplete-richlistitem,
+toolbar[brighttext] #PopupAutoComplete .autocomplete-richlistitem,
+toolbar[brighttext] #PopupAutoCompleteRichResult .autocomplete-richlistitem,
+toolbar[brighttext] #PopupSearchAutoComplete .autocomplete-richlistitem {
+  background-color: #2b2b2b !important;
+  color: #f3f3f3 !important;
+}
+
+:root[data-theme="dark"] #PopupAutoComplete .ac-title,
+:root[data-theme="dark"] #PopupAutoCompleteRichResult .ac-title,
+:root[data-theme="dark"] #PopupSearchAutoComplete .ac-title,
+#main-window[lwtheme-brighttext] #PopupAutoComplete .ac-title,
+#main-window[lwtheme-brighttext] #PopupAutoCompleteRichResult .ac-title,
+#main-window[lwtheme-brighttext] #PopupSearchAutoComplete .ac-title,
+toolbar[brighttext] #PopupAutoComplete .ac-title,
+toolbar[brighttext] #PopupAutoCompleteRichResult .ac-title,
+toolbar[brighttext] #PopupSearchAutoComplete .ac-title {
+  color: #f3f3f3 !important;
+}
+
+:root[data-theme="dark"] #PopupAutoComplete .ac-separator,
+:root[data-theme="dark"] #PopupAutoComplete .ac-url,
+:root[data-theme="dark"] #PopupAutoComplete .ac-action,
+:root[data-theme="dark"] #PopupAutoCompleteRichResult .ac-separator,
+:root[data-theme="dark"] #PopupAutoCompleteRichResult .ac-url,
+:root[data-theme="dark"] #PopupAutoCompleteRichResult .ac-action,
+:root[data-theme="dark"] #PopupSearchAutoComplete .ac-separator,
+:root[data-theme="dark"] #PopupSearchAutoComplete .ac-url,
+:root[data-theme="dark"] #PopupSearchAutoComplete .ac-action,
+#main-window[lwtheme-brighttext] #PopupAutoComplete .ac-separator,
+#main-window[lwtheme-brighttext] #PopupAutoComplete .ac-url,
+#main-window[lwtheme-brighttext] #PopupAutoComplete .ac-action,
+#main-window[lwtheme-brighttext] #PopupAutoCompleteRichResult .ac-separator,
+#main-window[lwtheme-brighttext] #PopupAutoCompleteRichResult .ac-url,
+#main-window[lwtheme-brighttext] #PopupAutoCompleteRichResult .ac-action,
+#main-window[lwtheme-brighttext] #PopupSearchAutoComplete .ac-separator,
+#main-window[lwtheme-brighttext] #PopupSearchAutoComplete .ac-url,
+#main-window[lwtheme-brighttext] #PopupSearchAutoComplete .ac-action,
+toolbar[brighttext] #PopupAutoComplete .ac-separator,
+toolbar[brighttext] #PopupAutoComplete .ac-url,
+toolbar[brighttext] #PopupAutoComplete .ac-action,
+toolbar[brighttext] #PopupAutoCompleteRichResult .ac-separator,
+toolbar[brighttext] #PopupAutoCompleteRichResult .ac-url,
+toolbar[brighttext] #PopupAutoCompleteRichResult .ac-action,
+toolbar[brighttext] #PopupSearchAutoComplete .ac-separator,
+toolbar[brighttext] #PopupSearchAutoComplete .ac-url,
+toolbar[brighttext] #PopupSearchAutoComplete .ac-action {
+  color: #a9d0ff !important;
+}
+
 html|span.ac-emphasize-text-title,
 html|span.ac-emphasize-text-tag,
 html|span.ac-emphasize-text-url {
@ -4555,6 +4806,15 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  }
 }

+:root[data-theme="dark"] .statuspanel-label,
+#main-window[lwtheme-brighttext] .statuspanel-label,
+toolbar[brighttext] .statuspanel-label {
+  background: #2b2b2b !important;
+  border-color: #5a5a5a !important;
+  color: #f3f3f3 !important;
+  text-shadow: none !important;
+}
+
 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
  border-right-style: solid;
@ -4837,3 +5097,327 @@ notification.pluginVulnerable > .notification-inner > .messageCloseButton {
  padding-top: .9167em;
  padding-bottom: .9167em;
 }
+
+/* Minimal dark-mode tail overrides: URL bar readability + close-hover color only. */
+:root[data-theme="dark"] #urlbar,
+:root[data-theme="dark"] #urlbar:hover,
+:root[data-theme="dark"] #urlbar[focused],
+:root[data-theme="dark"] #urlbar:-moz-lwtheme,
+:root[data-theme="dark"] #urlbar:-moz-lwtheme:hover:not([readonly]),
+:root[data-theme="dark"] #urlbar:-moz-lwtheme[focused]:not([readonly]),
+#main-window[lwtheme-brighttext] #urlbar,
+#main-window[lwtheme-brighttext] #urlbar:hover,
+#main-window[lwtheme-brighttext] #urlbar[focused],
+#main-window[lwtheme-brighttext] #urlbar:-moz-lwtheme,
+#main-window[lwtheme-brighttext] #urlbar:-moz-lwtheme:hover:not([readonly]),
+#main-window[lwtheme-brighttext] #urlbar:-moz-lwtheme[focused]:not([readonly]),
+toolbar[brighttext] #urlbar,
+toolbar[brighttext] #urlbar:hover,
+toolbar[brighttext] #urlbar[focused],
+toolbar[brighttext] #urlbar:-moz-lwtheme,
+toolbar[brighttext] #urlbar:-moz-lwtheme:hover:not([readonly]),
+toolbar[brighttext] #urlbar:-moz-lwtheme[focused]:not([readonly]) {
+  -moz-appearance: none !important;
+  background-color: #2f2f2f !important;
+  color: #ffffff !important;
+  border-color: #5a5a5a !important;
+}
+
+:root[data-theme="dark"] #urlbar .autocomplete-textbox-container,
+:root[data-theme="dark"] #urlbar .textbox-input-box,
+:root[data-theme="dark"] #urlbar .textbox-input-box > html|*.textbox-input,
+:root[data-theme="dark"] #urlbar html|*.textbox-input,
+:root[data-theme="dark"] #urlbar html|*.urlbar-input,
+:root[data-theme="dark"] #urlbar .urlbar-input,
+:root[data-theme="dark"] #urlbar .urlbar-display,
+#main-window[lwtheme-brighttext] #urlbar .autocomplete-textbox-container,
+#main-window[lwtheme-brighttext] #urlbar .textbox-input-box,
+#main-window[lwtheme-brighttext] #urlbar .textbox-input-box > html|*.textbox-input,
+#main-window[lwtheme-brighttext] #urlbar html|*.textbox-input,
+#main-window[lwtheme-brighttext] #urlbar html|*.urlbar-input,
+#main-window[lwtheme-brighttext] #urlbar .urlbar-input,
+#main-window[lwtheme-brighttext] #urlbar .urlbar-display,
+toolbar[brighttext] #urlbar .autocomplete-textbox-container,
+toolbar[brighttext] #urlbar .textbox-input-box,
+toolbar[brighttext] #urlbar .textbox-input-box > html|*.textbox-input,
+toolbar[brighttext] #urlbar html|*.textbox-input,
+toolbar[brighttext] #urlbar html|*.urlbar-input,
+toolbar[brighttext] #urlbar .urlbar-input,
+toolbar[brighttext] #urlbar .urlbar-display {
+  -moz-appearance: none !important;
+  background-color: #2f2f2f !important;
+  color: #ffffff !important;
+}
+
+:root[data-theme="dark"] #TabsToolbar .tabbrowser-tab .close-icon,
+:root[data-theme="dark"] #TabsToolbar .tab-close-button,
+#main-window[lwtheme-brighttext] #TabsToolbar .tabbrowser-tab .close-icon,
+#main-window[lwtheme-brighttext] #TabsToolbar .tab-close-button,
+toolbar[brighttext] #TabsToolbar .tabbrowser-tab .close-icon,
+toolbar[brighttext] #TabsToolbar .tab-close-button {
+  list-style-image: url("chrome://global/skin/icons/close-inverted.png") !important;
+  -moz-image-region: rect(0, 20px, 20px, 0px) !important;
+}
+
+@media (min-resolution: 1.1dppx) {
+  :root[data-theme="dark"] #TabsToolbar .tabbrowser-tab .close-icon,
+  :root[data-theme="dark"] #TabsToolbar .tab-close-button,
+  #main-window[lwtheme-brighttext] #TabsToolbar .tabbrowser-tab .close-icon,
+  #main-window[lwtheme-brighttext] #TabsToolbar .tab-close-button,
+  toolbar[brighttext] #TabsToolbar .tabbrowser-tab .close-icon,
+  toolbar[brighttext] #TabsToolbar .tab-close-button {
+    list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png") !important;
+  }
+}
+
+:root[data-theme="dark"] #TabsToolbar .tabbrowser-tab .close-icon:hover,
+:root[data-theme="dark"] #TabsToolbar .tab-close-button:hover,
+#main-window[lwtheme-brighttext] #TabsToolbar .tabbrowser-tab .close-icon:hover,
+#main-window[lwtheme-brighttext] #TabsToolbar .tab-close-button:hover,
+toolbar[brighttext] #TabsToolbar .tabbrowser-tab .close-icon:hover,
+toolbar[brighttext] #TabsToolbar .tab-close-button:hover {
+  -moz-image-region: rect(0, 40px, 20px, 20px) !important;
+}
+
+:root[data-theme="dark"] #TabsToolbar .tabbrowser-tab .close-icon:hover:active,
+:root[data-theme="dark"] #TabsToolbar .tab-close-button:hover:active,
+#main-window[lwtheme-brighttext] #TabsToolbar .tabbrowser-tab .close-icon:hover:active,
+#main-window[lwtheme-brighttext] #TabsToolbar .tab-close-button:hover:active,
+toolbar[brighttext] #TabsToolbar .tabbrowser-tab .close-icon:hover:active,
+toolbar[brighttext] #TabsToolbar .tab-close-button:hover:active {
+  -moz-image-region: rect(0, 60px, 20px, 40px) !important;
+}
+
+#titlebar-close:hover,
+#close-button:hover {
+  background: #c42b1c !important;
+}
+
+#titlebar-close:hover:active,
+#close-button:hover:active {
+  background: #a62518 !important;
+}
+
+:root[data-theme="dark"] .urlbar-textbox-container,
+:root[data-theme="dark"] .urlbar-input-box,
+:root[data-theme="dark"] #urlbar-display-box,
+#main-window[lwtheme-brighttext] .urlbar-textbox-container,
+#main-window[lwtheme-brighttext] .urlbar-input-box,
+#main-window[lwtheme-brighttext] #urlbar-display-box,
+toolbar[brighttext] .urlbar-textbox-container,
+toolbar[brighttext] .urlbar-input-box,
+toolbar[brighttext] #urlbar-display-box {
+  background-color: #2f2f2f !important;
+  border-left-color: #5a5a5a !important;
+}
+
+:root[data-theme="dark"] #titlebar-close:hover,
+:root[data-theme="dark"] #close-button:hover,
+#main-window[lwtheme-brighttext] #titlebar-close:hover,
+#main-window[lwtheme-brighttext] #close-button:hover,
+toolbar[brighttext] #titlebar-close:hover,
+toolbar[brighttext] #close-button:hover {
+  -moz-appearance: none !important;
+  background-color: #c42b1c !important;
+  background-image: none !important;
+  list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white) !important;
+}
+
+:root[data-theme="dark"] #titlebar-close:hover:active,
+:root[data-theme="dark"] #close-button:hover:active,
+#main-window[lwtheme-brighttext] #titlebar-close:hover:active,
+#main-window[lwtheme-brighttext] #close-button:hover:active,
+toolbar[brighttext] #titlebar-close:hover:active,
+toolbar[brighttext] #close-button:hover:active {
+  -moz-appearance: none !important;
+  background-color: #a62518 !important;
+}
+
+:root[data-theme="dark"] #PanelUI-popup toolbarbutton[cui-areatype="menu-panel"] > .toolbarbutton-icon,
+:root[data-theme="dark"] #PanelUI-popup toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-icon,
+:root[data-theme="dark"] #PanelUI-popup #PanelUI-fxa-icon > .toolbarbutton-icon,
+:root[data-theme="dark"] #PanelUI-popup #PanelUI-customize > .toolbarbutton-icon,
+:root[data-theme="dark"] #PanelUI-popup #PanelUI-help > .toolbarbutton-icon,
+:root[data-theme="dark"] #PanelUI-popup #PanelUI-quit > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #PanelUI-popup toolbarbutton[cui-areatype="menu-panel"] > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #PanelUI-popup toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #PanelUI-popup #PanelUI-fxa-icon > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #PanelUI-popup #PanelUI-customize > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #PanelUI-popup #PanelUI-help > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #PanelUI-popup #PanelUI-quit > .toolbarbutton-icon,
+toolbar[brighttext] #PanelUI-popup toolbarbutton[cui-areatype="menu-panel"] > .toolbarbutton-icon,
+toolbar[brighttext] #PanelUI-popup toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-icon,
+toolbar[brighttext] #PanelUI-popup #PanelUI-fxa-icon > .toolbarbutton-icon,
+toolbar[brighttext] #PanelUI-popup #PanelUI-customize > .toolbarbutton-icon,
+toolbar[brighttext] #PanelUI-popup #PanelUI-help > .toolbarbutton-icon,
+toolbar[brighttext] #PanelUI-popup #PanelUI-quit > .toolbarbutton-icon {
+  filter: invert(100%) brightness(1.12) !important;
+}
+
+:root[data-theme="dark"] #tab-view-deck,
+:root[data-theme="dark"] #browser-panel,
+:root[data-theme="dark"] #browser-bottombox,
+:root[data-theme="dark"] #browser,
+:root[data-theme="dark"] browser,
+:root[data-theme="dark"] .browserContainer,
+:root[data-theme="dark"] #appcontent,
+:root[data-theme="dark"] #content,
+:root[data-theme="dark"] .browserStack,
+:root[data-theme="dark"] #high-priority-global-notificationbox,
+:root[data-theme="dark"] #global-notificationbox,
+:root[data-theme="dark"] #main-window,
+#main-window[lwtheme-brighttext] #tab-view-deck,
+#main-window[lwtheme-brighttext] #browser-panel,
+#main-window[lwtheme-brighttext] #browser-bottombox,
+#main-window[lwtheme-brighttext] #browser,
+#main-window[lwtheme-brighttext] browser,
+#main-window[lwtheme-brighttext] .browserContainer,
+#main-window[lwtheme-brighttext] #appcontent,
+#main-window[lwtheme-brighttext] #content,
+#main-window[lwtheme-brighttext] .browserStack,
+#main-window[lwtheme-brighttext] #high-priority-global-notificationbox,
+#main-window[lwtheme-brighttext] #global-notificationbox,
+#main-window[lwtheme-brighttext],
+toolbar[brighttext] #tab-view-deck,
+toolbar[brighttext] #browser-panel,
+toolbar[brighttext] #browser-bottombox,
+toolbar[brighttext] #browser,
+toolbar[brighttext] browser,
+toolbar[brighttext] .browserContainer,
+toolbar[brighttext] #appcontent,
+toolbar[brighttext] #content,
+toolbar[brighttext] .browserStack,
+toolbar[brighttext] #high-priority-global-notificationbox,
+toolbar[brighttext] #global-notificationbox,
+#main-window.firefox toolbar[brighttext] {
+  background: #2b2b2b !important;
+  background-color: #2b2b2b !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: #2b2b2b !important;
+  box-shadow: none !important;
+}
+
+/* Restore icon legibility in dark chrome without touching the rest of the theme. */
+:root[data-theme="dark"] #nav-bar .toolbarbutton-icon,
+:root[data-theme="dark"] #nav-bar .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #nav-bar .toolbarbutton-badge-stack > .toolbarbutton-icon,
+:root[data-theme="dark"] #back-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #forward-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #urlbar-reload-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #urlbar-stop-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #PanelUI-menu-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #nav-bar-overflow-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #identity-icon,
+:root[data-theme="dark"] #tracking-protection-icon,
+:root[data-theme="dark"] #connection-icon,
+:root[data-theme="dark"] #default-notification-icon,
+:root[data-theme="dark"] #notification-popup-box .notification-anchor-icon,
+:root[data-theme="dark"] .tabs-newtab-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #new-tab-button > .toolbarbutton-icon,
+:root[data-theme="dark"] #titlebar-min,
+:root[data-theme="dark"] #titlebar-max,
+:root[data-theme="dark"] #titlebar-restore,
+:root[data-theme="dark"] #titlebar-close,
+:root[data-theme="dark"] #minimize-button,
+:root[data-theme="dark"] #restore-button,
+:root[data-theme="dark"] #close-button {
+  filter: invert(100%) brightness(1.12) !important;
+}
+
+#main-window[lwtheme-brighttext] #nav-bar .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #nav-bar .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #nav-bar .toolbarbutton-badge-stack > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #back-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #forward-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #urlbar-reload-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #urlbar-stop-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #PanelUI-menu-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #nav-bar-overflow-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #identity-icon,
+#main-window[lwtheme-brighttext] #tracking-protection-icon,
+#main-window[lwtheme-brighttext] #connection-icon,
+#main-window[lwtheme-brighttext] #default-notification-icon,
+#main-window[lwtheme-brighttext] #notification-popup-box .notification-anchor-icon,
+#main-window[lwtheme-brighttext] .tabs-newtab-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #new-tab-button > .toolbarbutton-icon,
+#main-window[lwtheme-brighttext] #titlebar-min,
+#main-window[lwtheme-brighttext] #titlebar-max,
+#main-window[lwtheme-brighttext] #titlebar-restore,
+#main-window[lwtheme-brighttext] #titlebar-close,
+#main-window[lwtheme-brighttext] #minimize-button,
+#main-window[lwtheme-brighttext] #restore-button,
+#main-window[lwtheme-brighttext] #close-button {
+  filter: invert(100%) brightness(1.12) !important;
+}
+
+toolbar[brighttext] #identity-icon,
+toolbar[brighttext] #tracking-protection-icon,
+toolbar[brighttext] #connection-icon,
+toolbar[brighttext] #default-notification-icon,
+toolbar[brighttext] #notification-popup-box .notification-anchor-icon {
+  filter: invert(100%) brightness(1.12) !important;
+}
+
+/* Remove content perimeter lines around webpages/internal pages. */
+#main-window #browser-border-start,
+#main-window #browser-border-end {
+  display: none !important;
+  width: 0 !important;
+  min-width: 0 !important;
+  background: transparent !important;
+  border: none !important;
+}
+
+#main-window .tabbrowser-tabpanels,
+#main-window #content tabpanels,
+#main-window #appcontent browser,
+#main-window #content browser {
+  -moz-appearance: none !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Keep native scrollbar metrics, only hint dark colors. */
+:root[data-theme="dark"],
+#main-window[lwtheme-brighttext],
+toolbar[brighttext] {
+  scrollbar-color: #5a5a5a #2b2b2b;
+}
+
+:root[data-theme="dark"] scrollbar,
+:root[data-theme="dark"] slider,
+:root[data-theme="dark"] scrollcorner,
+#main-window[lwtheme-brighttext] scrollbar,
+#main-window[lwtheme-brighttext] slider,
+#main-window[lwtheme-brighttext] scrollcorner,
+toolbar[brighttext] scrollbar,
+toolbar[brighttext] slider,
+toolbar[brighttext] scrollcorner {
+  background-image: none !important;
+  background-color: #2b2b2b !important;
+}
+
+:root[data-theme="dark"] thumb,
+:root[data-theme="dark"] scrollbarbutton,
+#main-window[lwtheme-brighttext] thumb,
+#main-window[lwtheme-brighttext] scrollbarbutton,
+toolbar[brighttext] thumb,
+toolbar[brighttext] scrollbarbutton {
+  background-color: #5a5a5a !important;
+  border-color: #3f454c !important;
+  -moz-border-top-colors: #4a5058 #3f454c !important;
+  -moz-border-right-colors: #2f343a #262b30 !important;
+  -moz-border-bottom-colors: #2f343a #262b30 !important;
+  -moz-border-left-colors: #4a5058 #3f454c !important;
+}
+
+:root[data-theme="dark"] thumb:hover,
+:root[data-theme="dark"] scrollbarbutton:hover,
+#main-window[lwtheme-brighttext] thumb:hover,
+#main-window[lwtheme-brighttext] scrollbarbutton:hover,
+toolbar[brighttext] thumb:hover,
+toolbar[brighttext] scrollbarbutton:hover {
+  background-color: #6a6a6a !important;
+}
--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@ -5,6 +5,15 @@
@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

+@media (prefers-color-scheme: dark) {
+  :root,
+  textarea,
+  select,
+  input {
+    scrollbar-color: #5a5a5a #2b2b2b;
+  }
+}
+
 /* bidi */

 :-moz-has-dir-attr {
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@ -289,7 +289,7 @@ pref("browser.display.document_color_use", 0);
 // 1 = default: light theme preferred
 // 2 = dark theme preferred
 // 3 = match ui.color_scheme
-pref("browser.display.prefers_color_scheme", 1);
+pref("browser.display.prefers_color_scheme", 3);
 pref("browser.display.use_system_colors",   false);
 pref("browser.display.foreground_color",    "#000000");
 pref("browser.display.background_color",    "#FFFFFF");
--- a/toolkit/themes/shared/about.css
+++ b/toolkit/themes/shared/about.css
@ -54,3 +54,24 @@ th, td {
  -moz-column-width: 20em;
  -moz-column-gap: 3em;
 }
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background: #1f2328;
+    color: #d6dde5;
+  }
+
+  body {
+    color: #f1f4f7;
+    border-color: #4b535d;
+    background: #2b3037;
+  }
+
+  a {
+    color: #75bbff;
+  }
+
+  a:visited {
+    color: #c69aff;
+  }
+}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@ -40,6 +40,42 @@
  --in-content-table-header-background: #0095dd;
 }

+@media (prefers-color-scheme: dark) {
+  *|*:root {
+    --in-content-page-color: #d6dde5;
+    --in-content-page-background: #1f2328;
+    --in-content-text-color: #f1f4f7;
+    --in-content-selected-text: #ffffff;
+    --in-content-header-border-color: #3d434b;
+    --in-content-box-background: #2b3037;
+    --in-content-box-background-odd: #252a31;
+    --in-content-box-background-hover: #343a43;
+    --in-content-box-background-active: #3e454f;
+    --in-content-box-border-color: #4b535d;
+    --in-content-item-hover: rgba(0,149,221,0.35);
+    --in-content-item-selected: #1b84d6;
+    --in-content-border-highlight: #4aa3ff;
+    --in-content-border-focus: #4aa3ff;
+    --in-content-border-color: #4b535d;
+    --in-content-category-text: #a9b3bd;
+    --in-content-category-border-focus: 1px dotted #d6dde5;
+    --in-content-category-text-selected: #f2f6fa;
+    --in-content-category-background: #22272e;
+    --in-content-category-background-hover: #2d333b;
+    --in-content-category-background-active: #1b2026;
+    --in-content-tab-color: #d6dde5;
+    --in-content-link-color: #67b7ff;
+    --in-content-link-color-hover: #8cc9ff;
+    --in-content-link-color-active: #ffb566;
+    --in-content-link-color-visited: #c69aff;
+    --in-content-primary-button-background: #1b84d6;
+    --in-content-primary-button-background-hover: #1f90e8;
+    --in-content-primary-button-background-active: #166fb4;
+    --in-content-table-border-dark-color: #3d434b;
+    --in-content-table-header-background: #1b84d6;
+  }
+}
+
 html|html,
 xul|page,
 xul|window {
--- a/toolkit/themes/windows/global/xulscrollbars.css
+++ b/toolkit/themes/windows/global/xulscrollbars.css
@ -12,6 +12,7 @@
 /* ::::: scrollbar ::::: */

 scrollbar {
+  appearance: scrollbar-horizontal;
  -moz-appearance: scrollbar-horizontal;
  -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
  cursor: default;
@ -32,6 +33,7 @@ scrollbar {

 scrollbar[orient="vertical"] 
 {
+  appearance: scrollbar-vertical;
   -moz-appearance: scrollbar-vertical;
 }

@ -49,21 +51,25 @@ scrollbarbutton {

 /* ::::: slider - a thumb is inside  ::::: */
 slider {
+  appearance: scrollbartrack-horizontal;
  -moz-appearance: scrollbartrack-horizontal;
 }

 slider[orient="vertical"] {
+  appearance: scrollbartrack-vertical;
  -moz-appearance: scrollbartrack-vertical;
 }

 /* ::::: thumb (horizontal) ::::: */

 thumb {
+  appearance: scrollbarthumb-vertical;
  -moz-appearance: scrollbarthumb-vertical;
  min-height: 8px;
 }

 thumb[orient="horizontal"] {
+  appearance: scrollbarthumb-horizontal;
  -moz-appearance: scrollbarthumb-horizontal;
  min-width: 8px;
 }
@ -95,6 +101,7 @@ scrollcorner {
 /* ..... increment .... */

 scrollbarbutton[type="increment"] {
+  appearance: scrollbarbutton-right;
  -moz-appearance: scrollbarbutton-right;
  background-image: url("chrome://global/skin/arrow/arrow-rit.gif")
 }
@ -104,6 +111,7 @@ scrollbarbutton[type="increment"][disabled="true"] {
 }

 scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
+  appearance: scrollbarbutton-down;
  -moz-appearance: scrollbarbutton-down;
  background-image: url("chrome://global/skin/arrow/arrow-dn.gif")
 }
@ -115,6 +123,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"
 /* ..... decrement .... */

 scrollbarbutton[type="decrement"] {
+  appearance: scrollbarbutton-left;
  -moz-appearance: scrollbarbutton-left;
   background-image: url("chrome://global/skin/arrow/arrow-lft.gif")
 }
@ -124,6 +133,7 @@ scrollbarbutton[type="decrement"][disabled="true"] {
 }

 scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
+  appearance: scrollbarbutton-up;
  -moz-appearance: scrollbarbutton-up;
   background-image: url("chrome://global/skin/arrow/arrow-up.gif")
 }
@ -132,6 +142,74 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
   background-image: url("chrome://global/skin/arrow/arrow-up-dis.gif")
 }

+@media (prefers-color-scheme: dark) {
+  scrollbar,
+  scrollcorner {
+    background-image: none !important;
+    background-color: #2b2b2b !important;
+  }
+
+  slider {
+    appearance: none !important;
+    -moz-appearance: none !important;
+    background-image: none !important;
+    background-color: #2b2b2b !important;
+  }
+
+  thumb,
+  scrollbarbutton {
+    appearance: none !important;
+    border-color: #3f454c !important;
+    -moz-border-top-colors: #4a5058 #3f454c !important;
+    -moz-border-right-colors: #2f343a #262b30 !important;
+    -moz-border-bottom-colors: #2f343a #262b30 !important;
+    -moz-border-left-colors: #4a5058 #3f454c !important;
+    background-color: #5a5a5a !important;
+  }
+
+  scrollbarbutton[disabled="true"] {
+    background-color: #454b53 !important;
+    opacity: 0.75;
+  }
+
+  scrollbarbutton[type="increment"] {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d7dce2' d='M6 4v8l5-4z'/></svg>") !important;
+  }
+
+  scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d7dce2' d='M4 6h8l-4 5z'/></svg>") !important;
+  }
+
+  scrollbarbutton[type="increment"][disabled="true"] {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23828a93' d='M6 4v8l5-4z'/></svg>") !important;
+  }
+
+  scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"] {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23828a93' d='M4 6h8l-4 5z'/></svg>") !important;
+  }
+
+  scrollbarbutton[type="decrement"] {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d7dce2' d='M10 4v8L5 8z'/></svg>") !important;
+  }
+
+  scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d7dce2' d='M4 10h8l-4-5z'/></svg>") !important;
+  }
+
+  scrollbarbutton[type="decrement"][disabled="true"] {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23828a93' d='M10 4v8L5 8z'/></svg>") !important;
+  }
+
+  scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"] {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23828a93' d='M4 10h8l-4-5z'/></svg>") !important;
+  }
+
+  thumb:hover,
+  scrollbarbutton:hover {
+    background-color: #6a6a6a !important;
+  }
+}
+
 /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
 /* ::::::::::::::::::::: MEDIA PRINT :::::::::::::::::::::: */
 /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@ -139,6 +217,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
  /* ::::: scrollbar ::::: */

  html|div scrollbar {
+    appearance: scrollbar-horizontal;
    -moz-appearance: scrollbar-horizontal;
    -moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
    cursor: default;
@ -147,6 +226,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"

  html|div scrollbar[orient="vertical"] 
  {
+      appearance: scrollbar-vertical;
     -moz-appearance: scrollbar-vertical;
  }

@ -165,11 +245,13 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
  /* ::::: thumb (horizontal) ::::: */

  html|div thumb {
+    appearance: scrollbarthumb-vertical;
    -moz-appearance: scrollbarthumb-vertical;
    min-height: 8px;
  }

  html|div thumb[orient="horizontal"] {
+    appearance: scrollbarthumb-horizontal;
    -moz-appearance: scrollbarthumb-horizontal;
    min-width: 8px;
  }
@ -193,6 +275,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
  /* ..... increment .... */

  html|div scrollbarbutton[type="increment"] {
+    appearance: scrollbarbutton-right;
    -moz-appearance: scrollbarbutton-right;
    background-image: url("chrome://global/skin/arrow/arrow-rit.gif")
  }
@ -202,6 +285,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
  }

  html|div scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
+    appearance: scrollbarbutton-down;
    -moz-appearance: scrollbarbutton-down;
    background-image: url("chrome://global/skin/arrow/arrow-dn.gif")
  }
@ -213,6 +297,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
  /* ..... decrement .... */

  html|div scrollbarbutton[type="decrement"] {
+    appearance: scrollbarbutton-left;
    -moz-appearance: scrollbarbutton-left;
     background-image: url("chrome://global/skin/arrow/arrow-lft.gif")
  }
@ -222,6 +307,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
  }

  html|div scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
+    appearance: scrollbarbutton-up;
    -moz-appearance: scrollbarbutton-up;
     background-image: url("chrome://global/skin/arrow/arrow-up.gif")
  }