diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2e6df67cf3..87bacea833 100644
--- 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
}
}
\ No newline at end of file
diff --git a/application/basilisk/app/profile/basilisk.js b/application/basilisk/app/profile/basilisk.js
index 739aa43038..0a98a12bdf 100644
--- 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);
diff --git a/application/basilisk/base/content/abouthome/aboutHome.css b/application/basilisk/base/content/abouthome/aboutHome.css
index 62a3ac6d64..b1926505db 100644
--- 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);
+ }
+}
+
diff --git a/application/basilisk/base/content/browser.css b/application/basilisk/base/content/browser.css
index 6de8a8cd0c..8f332c8c3d 100644
--- 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");
}
diff --git a/application/basilisk/base/content/browser.js b/application/basilisk/base/content/browser.js
index 81e47cd464..0769d286ad 100644
--- 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"],
diff --git a/application/basilisk/base/content/browser.xul b/application/basilisk/base/content/browser.xul
index f4b802b245..20c0ab097d 100644
--- a/application/basilisk/base/content/browser.xul
+++ b/application/basilisk/base/content/browser.xul
@@ -76,6 +76,8 @@
+
+
# 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
diff --git a/application/basilisk/base/content/contentSearchUI.css b/application/basilisk/base/content/contentSearchUI.css
index cd5cf50081..76f08ad8da 100644
--- 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;
+ }
+}
diff --git a/application/basilisk/base/content/themeManager.js b/application/basilisk/base/content/themeManager.js
new file mode 100644
index 0000000000..0d61bd297f
--- /dev/null
+++ 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();
+ });
+}
diff --git a/application/basilisk/base/jar.mn b/application/basilisk/base/jar.mn
index f2c999221c..d31d47781f 100644
--- 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)
diff --git a/application/basilisk/components/preferences/in-content/main.xul b/application/basilisk/components/preferences/in-content/main.xul
index 9055df11f8..d85419b630 100644
--- a/application/basilisk/components/preferences/in-content/main.xul
+++ b/application/basilisk/components/preferences/in-content/main.xul
@@ -101,6 +101,9 @@
+
@@ -334,5 +337,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/application/basilisk/locales/en-US/chrome/browser/preferences/main.dtd b/application/basilisk/locales/en-US/chrome/browser/preferences/main.dtd
index e4d1ac6594..bae11bad0a 100644
--- 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 @@
-
+
-
+
@@ -58,3 +58,9 @@
+
+
+
+
+
+
diff --git a/application/basilisk/themes/windows/browser.css b/application/basilisk/themes/windows/browser.css
index 7aadac4e31..635566bef7 100644
--- 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;
+}
diff --git a/layout/style/res/html.css b/layout/style/res/html.css
index b06246801f..2c6e62c579 100644
--- 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 {
diff --git a/modules/libpref/init/all.js b/modules/libpref/init/all.js
index 7747e2c804..dfdfb84b2b 100644
--- 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");
diff --git a/toolkit/themes/shared/about.css b/toolkit/themes/shared/about.css
index 5c40dbfeae..f1d11ff44e 100644
--- 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;
+ }
+}
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index a34f36bd6f..b20553c8a8 100644
--- 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 {
diff --git a/toolkit/themes/windows/global/xulscrollbars.css b/toolkit/themes/windows/global/xulscrollbars.css
index 53f2376059..ca1e3fefd8 100644
--- 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,") !important;
+ }
+
+ scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
+ background-image: url("data:image/svg+xml;utf8,") !important;
+ }
+
+ scrollbarbutton[type="increment"][disabled="true"] {
+ background-image: url("data:image/svg+xml;utf8,") !important;
+ }
+
+ scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"] {
+ background-image: url("data:image/svg+xml;utf8,") !important;
+ }
+
+ scrollbarbutton[type="decrement"] {
+ background-image: url("data:image/svg+xml;utf8,") !important;
+ }
+
+ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
+ background-image: url("data:image/svg+xml;utf8,") !important;
+ }
+
+ scrollbarbutton[type="decrement"][disabled="true"] {
+ background-image: url("data:image/svg+xml;utf8,") !important;
+ }
+
+ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"] {
+ background-image: url("data:image/svg+xml;utf8,") !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")
}