Merge pull request #1135 from fernandesafp/darker-firefox

Added darker Firefox theme option

README.md

@@ -265,7 +265,9 @@ Usage:  `./tweaks.sh [OPTIONS...]`
 
       3. alt            Alt windows button version    Alt window button style like gtk theme
 
-      4. adaptive       Adaptive color version   You need install adaptive-tab-bar-colour plugin first   https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/
+      4. darker         Darker Firefox theme version    Darker theme according to darker gtk theme
+
+      5. adaptive       Adaptive color version   You need install adaptive-tab-bar-colour plugin first   https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/
 
   -e, --edit-firefox [(monterey/flat)|alt|adaptive]
    Edit 'WhiteSur' theme for Firefox settings and also connect the theme to the current Firefox profiles. 

shell/lib-install.sh

@@ -688,12 +688,12 @@ install_firefox_theme() {
   cp -rf "${FIREFOX_SRC_DIR}"/common/*.css                                                    "${TARGET_DIR}/${theme_name}"
   cp -rf "${FIREFOX_SRC_DIR}"/common/parts/*.css                                              "${TARGET_DIR}/${theme_name}"/parts
   [[ -f "${TARGET_DIR}"/userChrome.css ]] && mv "${TARGET_DIR}"/userChrome.css                "${TARGET_DIR}"/userChrome.css.bak
-  cp -rf "${FIREFOX_SRC_DIR}"/userChrome-"${theme_name}${adaptive}".css                       "${TARGET_DIR}"/userChrome.css
+  cp -rf "${FIREFOX_SRC_DIR}"/userChrome-"${theme_name}${darker}${adaptive}".css              "${TARGET_DIR}"/userChrome.css
   [[ -f "${TARGET_DIR}"/userContent.css ]] && mv "${TARGET_DIR}"/userContent.css              "${TARGET_DIR}"/userContent.css.bak
-  cp -rf "${FIREFOX_SRC_DIR}"/userContent-"${theme_name}${adaptive}".css                      "${TARGET_DIR}"/userContent.css
+  cp -rf "${FIREFOX_SRC_DIR}"/userContent-"${theme_name}${darker}${adaptive}".css             "${TARGET_DIR}"/userContent.css
 
   if [[ "${firefoxtheme}" == 'Flat' && "${theme_name}" == 'Monterey' ]]; then
-    cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt"${adaptive}".css                      "${TARGET_DIR}"/userChrome.css
+    cp -rf "${FIREFOX_SRC_DIR}"/userChrome-Monterey-alt"${darker}${adaptive}".css             "${TARGET_DIR}"/userChrome.css
     cp -rf "${FIREFOX_SRC_DIR}"/WhiteSur/parts/headerbar-urlbar.css                           "${TARGET_DIR}"/Monterey/parts/headerbar-urlbar-alt.css
   fi
 

src/other/firefox/Monterey/colors/darker.css

@@ -0,0 +1,171 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Variables that start with --gnome- are added by me and are assigned
+ * to elements somewhere in this code. The rest of the variables are
+ * built-in in Firefox, so you need to add an !important if you wanna
+ * override them. */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: #1f1f1f;
+	--gnome-browser-content-box-background: #323232;
+	--theme-primary-color: #315bef;
+	--theme-primary-hover-color: #5073f1;
+	--theme-primary-active-color: #6584f3;
+
+	/* Toolbars */
+	--gnome-toolbar-background: #1e1e1e;
+	--gnome-tabstoolbar-background: #1e1e1e;
+	--gnome-findbar-background: #282828;
+	--gnome-toolbar-color: #ffffff;
+	--gnome-toolbar-icon-fill: #ffffff;
+	--gnome-toolbar-border-color: #070707;
+	--gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35);
+	--gnome-inactive-toolbar-background: #1e1e1e;
+	--gnome-inactive-toolbar-border-color: #121212;
+
+	/* Sidebar */
+	--gnome-sidebar-background: #1e1e1e;
+	--gnome-inactive-sidebar-background: #3f3f3f;
+	--gnome-sidebar-border-color: color-mix(in srgb, #ffffff 12%, var(--gnome-sidebar-background));
+
+	/* Popups */
+	--gnome-menu-background: rgba(40, 40, 40, 0.95);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-background: rgba(40, 40, 40, 0.95);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
+	--gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1);
+	--gnome-popover-button-active-background: rgba(255, 255, 255, 0.15);
+	--gnome-popover-separator-color: rgba(255, 255, 255, 0.08);
+
+	/* Header bar */
+	--gnome-headerbar-background: #1e1e1e;
+	--gnome-headerbar-border-color: #070707;
+	--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+	--gnome-inactive-headerbar-background: #1e1e1e;
+	--gnome-inactive-headerbar-border-color: #202020;
+	--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+
+	/* Buttons */
+	--gnome-button-background: #2a2a2a;
+	--gnome-button-border-color: #282828;
+	--gnome-button-border-bottom-color: #282828;
+	--gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-hover-color: rgba(255, 255, 255, 0.1);
+	--gnome-button-active-color: rgba(255, 255, 255, 0.2);
+	--gnome-button-hover-background: linear-gradient(to top, #242424 0%, #282828 100%);
+	--gnome-button-active-background: #282828;
+	--gnome-button-active-border-color: #1b1b1b;
+	--gnome-button-active-border-bottom-color: #1b1b1b;
+	--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-disabled-background: linear-gradient(to top, #242424 0%, #494949 100%);
+	--gnome-button-disabled-border-color: #282828;
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
+	--gnome-inactive-button-background: #2a2a2a;
+	--gnome-inactive-button-border-color: #282828;
+	--gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0);
+	--gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e);
+	--gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+	--gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px);
+	--gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px);
+	--gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+	--gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d);
+	--gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px);
+	--gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px);
+	--gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+
+	--gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05);
+	--gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1);
+	--gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15);
+
+	/* URL bar */
+	--gnome-urlbar-background: #2a2a2a;
+	--gnome-urlbar-border-color: #282828;
+	--gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75);
+	--gnome-urlbar-color: #ffffff;
+	--gnome-hover-urlbar-border-color: #585858;
+	--gnome-inactive-urlbar-background: #2a2a2a;
+	--gnome-inactive-urlbar-border-color: #282828;
+	--gnome-inactive-urlbar-box-shadow: none;
+	--gnome-inactive-urlbar-color: #d6d6d6;
+	--gnome-focused-urlbar-border-color: #338CBE;
+	--gnome-focused-urlbar-highlight-color: #006EA0;
+	--gnome-private-urlbar-background: #25003e;
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: rgba(42, 42, 42, .25);
+	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-hover-background: #282828;
+	--gnome-tabbar-tab-hover-border-bottom-color: #1b1b1b;
+	--gnome-tabbar-tab-hover-color: rgb(200, 200, 200);
+	--gnome-tabbar-tab-active-background: #2a2a2a;
+	--gnome-tabbar-tab-active-border-bottom-color: #15539e;
+	--gnome-tabbar-tab-active-color: #ffffff;
+	--gnome-tabbar-tab-active-hover-background: #525252;
+	--gnome-inactive-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-inactive-tabbar-tab-background: var(--gnome-tabbar-tab-background);
+	--gnome-inactive-tabbar-tab-active-background: rgb(50, 50, 50);
+	--gnome-inactive-tabbar-tab-active-border-bottom-color: var(--gnome-tabbar-tab-active-border-bottom-color);
+	--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
+	--gnome-tab-attention-icon-color: #718be8;
+
+	/* Switch */
+	--gnome-switch-background: #464646;
+	--gnome-switch-hover-background: #525252;
+	--gnome-switch-active-background: #606060;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #ffffff;
+	--gnome-switch-slider-border-color: transparent;
+	--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-switch-pressed-background: #315bef;
+	--gnome-switch-pressed-hover-background: #5073f1;
+	--gnome-switch-pressed-active-background: #6584f3;
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
+
+	/* Dirty hacks for replaced symbolic icons, they load from
+	 * /usr/share/icons/<theme>/ and on some systems they need to be
+	 * inverted, on others they don't, adjusts the filters below to your
+	 * needs (you may also adjust icon brightness here). */
+	--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
+	--gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */
+	--gnome-window-icons-hack-filter: invert(90%); /* without invert: none */
+
+	/* Private window colors */
+	--gnome-private-accent: #78aeed;
+
+	/* Toolbars */
+	--gnome-private-toolbar-background: var(--gnome-headerbar-background);
+	--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
+	/* Menus */
+	--gnome-private-menu-background: #1e1e1e;
+	/* Header bar */
+	--gnome-private-headerbar-background: #252F49;
+	--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
+	/* Tabs */
+	--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
+
+	/* Text color for Firefox Logo in new private tab */
+	--gnome-private-wordmark: #FBFBFE;
+
+	/* New private tab background */
+	--gnome-private-in-content-page-background: #1f1f1f;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #FBFBFE;
+  }
+}

src/other/firefox/Monterey/theme-alt-darker.css

@@ -0,0 +1,36 @@
+@import "parts/toolbox-alt.css";
+@import "parts/buttons.css";
+@import "parts/entries.css";
+@import "parts/controls.css";
+@import "parts/headerbar-urlbar-alt.css";
+@import "parts/headerbar-private-urlbar.css";
+@import "parts/headerbar.css";
+@import "parts/csd.css";
+@import "parts/titlebutton-light.css";
+@import "parts/titlebutton-dark.css";
+@import "parts/popups.css";
+@import "parts/tabsbar-alt.css";
+@import "parts/findbar.css";
+@import "parts/sidebar.css";
+@import "parts/dialogs.css";
+@import "parts/notification.css";
+@import "parts/video-player.css";
+@import "parts/remove-white-flash.css";
+@import "parts/icons.css";
+@import "colors/light.css";
+@import "colors/darker.css";
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+/* Set theme version text in customization panel */
+#customization-footer::before {
+	background: url(icons/icon.svg) no-repeat;
+	background-size: contain;
+	content: "Firefox Monterey theme";
+	padding: 10px 10px 10px 50px;
+}
+
+#customization-container {
+	background-color: var(--gnome-browser-before-load-background) !important;
+	color: var(--gnome-toolbar-color) !important;
+	background-image: none !important;
+}

src/other/firefox/Monterey/theme-darker.css

@@ -0,0 +1,36 @@
+@import "parts/toolbox.css";
+@import "parts/buttons.css";
+@import "parts/entries.css";
+@import "parts/controls.css";
+@import "parts/headerbar-urlbar.css";
+@import "parts/headerbar-private-urlbar.css";
+@import "parts/headerbar.css";
+@import "parts/csd.css";
+@import "parts/titlebutton-light.css";
+@import "parts/titlebutton-dark.css";
+@import "parts/popups.css";
+@import "parts/tabsbar.css";
+@import "parts/findbar.css";
+@import "parts/sidebar.css";
+@import "parts/dialogs.css";
+@import "parts/notification.css";
+@import "parts/video-player.css";
+@import "parts/remove-white-flash.css";
+@import "parts/icons.css";
+@import "colors/light.css";
+@import "colors/darker.css";
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+/* Set theme version text in customization panel */
+#customization-footer::before {
+	background: url(icons/icon.svg) no-repeat;
+	background-size: contain;
+	content: "Firefox Monterey theme";
+	padding: 10px 10px 10px 50px;
+}
+
+#customization-container {
+	background-color: var(--gnome-browser-before-load-background) !important;
+	color: var(--gnome-toolbar-color) !important;
+	background-image: none !important;
+}

src/other/firefox/WhiteSur/colors/darker.css

@@ -0,0 +1,172 @@
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Variables that start with --gnome- are added by me and are assigned
+ * to elements somewhere in this code. The rest of the variables are
+ * built-in in Firefox, so you need to add an !important if you wanna
+ * override them. */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+	/* Browser area before a page starts loading */
+	--gnome-browser-before-load-background: #1f1f1f;
+	--theme-primary-color: #315bef;
+	--theme-primary-hover-color: #5073f1;
+	--theme-primary-active-color: #6584f3;
+
+	/* Toolbars */
+	--gnome-toolbar-background: #1e1e1e;
+	--gnome-tabstoolbar-background: #1e1e1e;
+	--gnome-findbar-background: #282828;
+	--gnome-toolbar-color: #ffffff;
+	--gnome-toolbar-icon-fill: #ffffff;
+	--gnome-toolbar-border-color: #070707;
+	--gnome-inactive-toolbar-color: rgba(255, 255, 255, 0.35);
+	--gnome-inactive-toolbar-background: #1e1e1e;
+	--gnome-inactive-toolbar-border-color: #121212;
+
+	/* Sidebar */
+	--sidebar-background-color: #323232 !important;
+	--gnome-sidebar-background: #1e1e1e;
+	--gnome-inactive-sidebar-background: #3f3f3f;
+	--gnome-sidebar-border-color: color-mix(in srgb, #000000 75%, var(--gnome-sidebar-background));
+
+	/* Popups */
+	--gnome-menu-background: rgba(40, 40, 40, 0.95);
+	--gnome-menu-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-background: rgba(40, 40, 40, 0.95);
+	--gnome-popover-border-color: rgba(0, 0, 0, 0.75);
+	--gnome-popover-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
+	--gnome-popover-button-hover-background: rgba(255, 255, 255, 0.1);
+	--gnome-popover-button-active-background: rgba(255, 255, 255, 0.15);
+	--gnome-popover-separator-color: rgba(255, 255, 255, 0.08);
+
+	/* Header bar */
+	--gnome-headerbar-background: #1e1e1e;
+	--gnome-headerbar-border-color: #070707;
+	--gnome-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
+	--gnome-inactive-headerbar-background: #1e1e1e;
+	--gnome-inactive-headerbar-border-color: #202020;
+	--gnome-inactive-headerbar-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+
+	/* Buttons */
+	--gnome-button-background: #2a2a2a;
+	--gnome-button-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-border-bottom-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-hover-color: rgba(255, 255, 255, 0.1);
+	--gnome-button-active-color: rgba(255, 255, 255, 0.2);
+	--gnome-button-hover-background: linear-gradient(to top, #242424 0%, #282828 100%);
+	--gnome-button-active-background: #282828;
+	--gnome-button-active-border-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-active-border-bottom-color: rgba(0, 0, 0, 0.25);
+	--gnome-button-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+	--gnome-button-disabled-background: linear-gradient(to top, #242424 0%, #494949 100%);
+	--gnome-button-disabled-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-disabled-box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
+	--gnome-inactive-button-background: #2a2a2a;
+	--gnome-inactive-button-border-color: #282828;
+	--gnome-inactive-button-box-shadow: inset 0 1px rgba(255, 255, 255, 0.0);
+	--gnome-button-suggested-action-background: linear-gradient(to top, #155099 2px, #15539e);
+	--gnome-button-suggested-action-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-suggested-action-border-bottom-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-suggested-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
+	--gnome-button-suggested-action-hover-background: linear-gradient(to top, #155099, #1655a2 1px);
+	--gnome-button-suggested-action-active-background: linear-gradient(to top, #103e75, #103e75 1px);
+	--gnome-button-suggested-action-active-border-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-suggested-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+	--gnome-button-destructive-action-background: linear-gradient(to top, #ae151c 2px, #b2161d);
+	--gnome-button-destructive-action-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-button-destructive-action-border-bottom-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-destructive-action-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-button-destructive-action-hover-background: linear-gradient(to top, #ae151c, #b7161d 1px);
+	--gnome-button-destructive-action-active-background: linear-gradient(to top, #8a1116, #8a1116 1px);
+	--gnome-button-destructive-action-active-border-color: rgba(0, 0, 0, 0.3);
+	--gnome-button-destructive-action-active-box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+
+	--gnome-headerbar-button-combined-background: rgba(255, 255, 255, 0.05);
+	--gnome-headerbar-button-hover-background: rgba(255, 255, 255, 0.1);
+	--gnome-headerbar-button-active-background: rgba(255, 255, 255, 0.15);
+
+	/* URL bar */
+	--gnome-urlbar-background: #2a2a2a;
+	--gnome-urlbar-border-color: rgba(0, 0, 0, 0.2);
+	--gnome-urlbar-box-shadow: 0 3px 6px 1px rgba(0,0,0, .2), 0 5px 16px 3px rgba(0,0,0, .15), 0 0 0 1px rgba(0, 0, 0, 0.75);
+	--gnome-urlbar-color: #ffffff;
+	--gnome-hover-urlbar-border-color: #585858;
+	--gnome-inactive-urlbar-background: #2a2a2a;
+	--gnome-inactive-urlbar-border-color: #282828;
+	--gnome-inactive-urlbar-box-shadow: none;
+	--gnome-inactive-urlbar-color: #d6d6d6;
+	--gnome-focused-urlbar-border-color: #338CBE;
+	--gnome-focused-urlbar-highlight-color: #006EA0;
+	--gnome-private-urlbar-background: #25003e;
+
+	/* Tabs */
+	--gnome-tabbar-tab-background: #2a2a2a;
+	--gnome-tabbar-tab-color: rgb(141, 144, 145);
+	--gnome-tabbar-tab-border-color: #1e1e1e;
+	--gnome-tabbar-tab-hover-background: #282828;
+	--gnome-tabbar-tab-hover-border-color: #1e1e1e;
+	--gnome-tabbar-tab-hover-color: rgb(200, 200, 200);
+	--gnome-tabbar-tab-active-background: #1e1e1e;
+	--gnome-tabbar-tab-active-border-color: #070707;
+	--gnome-tabbar-tab-active-color: #ffffff;
+	--gnome-tabbar-tab-active-hover-background: #1e1e1e;
+	--gnome-inactive-tabbar-tab-color: var(--gnome-tabbar-tab-color);
+	--gnome-inactive-tabbar-tab-background: var(--gnome-tabbar-tab-background);
+	--gnome-inactive-tabbar-tab-active-background: var(--gnome-tabbar-tab-active-background);
+	--gnome-inactive-tabbar-tab-active-border-color: var(--gnome-tabbar-tab-active-border-bottom-color);
+	--gnome-inactive-tabbar-tab-active-color: var(--gnome-inactive-tabbar-tab-color);
+	--gnome-tab-attention-icon-color: #718be8;
+
+	/* Switch */
+	--gnome-switch-background: #464646;
+	--gnome-switch-hover-background: #525252;
+	--gnome-switch-active-background: #606060;
+	--gnome-switch-border-color: transparent;
+	--gnome-switch-slider-background: #ffffff;
+	--gnome-switch-slider-border-color: transparent;
+	--gnome-switch-slider-box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+	--gnome-switch-pressed-background: #315bef;
+	--gnome-switch-pressed-hover-background: #5073f1;
+	--gnome-switch-pressed-active-background: #6584f3;
+	--gnome-switch-active-border-color: transparent;
+	--gnome-switch-active-slider-border-color: transparent;
+
+	/* Dirty hacks for replaced symbolic icons, they load from
+	 * /usr/share/icons/<theme>/ and on some systems they need to be
+	 * inverted, on others they don't, adjusts the filters below to your
+	 * needs (you may also adjust icon brightness here). */
+	--gnome-convert-icon-to-symbolic-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
+	--gnome-icons-hack-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(200%); /* without invert: none */
+	--gnome-window-icons-hack-filter: invert(90%); /* without invert: none */
+
+	/* Private window colors */
+	--gnome-private-accent: #78aeed;
+
+	/* Toolbars */
+	--gnome-private-toolbar-background: var(--gnome-headerbar-background);
+	--gnome-private-inactive-toolbar-background: var(--gnome-inactive-headerbar-background);
+	/* Menus */
+	--gnome-private-menu-background: #1e1e1e;
+	/* Header bar */
+	--gnome-private-headerbar-background: #252F49;
+	--gnome-private-inactive-headerbar-background: var(--gnome-private-toolbar-background);
+	/* Tabs */
+	--gnome-private-tabbar-tab-hover-background: #343e56; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background: #343e56; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-background-contrast: #495675; /* Hardcoded color */
+	--gnome-private-tabbar-tab-active-hover-background: #414a61; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-hover-background: #242c3f; /* Hardcoded color */
+	--gnome-private-inactive-tabbar-tab-active-background: #272e41; /* Hardcoded color */
+
+	/* Text color for Firefox Logo in new private tab */
+	--gnome-private-wordmark: #FBFBFE;
+
+	/* New private tab background */
+	--gnome-private-in-content-page-background: #1f1f1f;
+
+	/* Private browsing info box */
+	--gnome-private-text-primary-color: #FBFBFE;
+  }
+}

src/other/firefox/WhiteSur/parts/tabsbar.css

@@ -79,6 +79,7 @@
 /* Tab labels */
 tab {
 	color: var(--gnome-tabbar-tab-color) !important;
+	background-color: var(--gnome-tabbar-tab-background) !important;
 }
 tab:hover {
 	color: var(--gnome-tabbar-tab-hover-color) !important;

src/other/firefox/WhiteSur/theme-darker.css

@@ -0,0 +1,36 @@
+@import "parts/toolbox.css";
+@import "parts/buttons.css";
+@import "parts/entries.css";
+@import "parts/controls.css";
+@import "parts/headerbar-urlbar.css";
+@import "parts/headerbar-private-urlbar.css";
+@import "parts/headerbar.css";
+@import "parts/csd.css";
+@import "parts/titlebutton-light.css";
+@import "parts/titlebutton-dark.css";
+@import "parts/popups.css";
+@import "parts/tabsbar.css";
+@import "parts/findbar.css";
+@import "parts/sidebar.css";
+@import "parts/dialogs.css";
+@import "parts/notification.css";
+@import "parts/video-player.css";
+@import "parts/remove-white-flash.css";
+@import "parts/icons.css";
+@import "colors/light.css";
+@import "colors/darker.css";
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+/* Set theme version text in customization panel */
+#customization-footer::before {
+	background: url("icons/icon.svg") no-repeat;
+	background-size: contain;
+	content: "Firefox WhiteSur theme";
+	padding: 10px 10px 10px 50px;
+}
+
+#customization-container {
+	background-color: var(--gnome-browser-before-load-background) !important;
+	color: var(--gnome-toolbar-color) !important;
+	background-image: none !important;
+}

src/other/firefox/userChrome-Monterey-alt-darker.css

@@ -0,0 +1,42 @@
+/*------------------------USAGE----------------------------
+ * Remove "/*" at the begining of "@import" line to ENABLE.
+ * Add "/*" at the begining of "@import" line to DISABLE.
+ */
+
+@import "Monterey/theme-alt-darker.css"; /**/
+
+/*--------------Configure common theme features--------------*/
+
+/* Move tab close button to left. */
+/*@import "Monterey/left-tab-close-button.css"; /**/
+
+/* Hide the tab bar when only one tab is open (GNOMISH)
+ * You should move the new tab button somewhere else for this to work, because by
+ * default it is on the tab bar too. */
+@import "Monterey/hide-single-tab.css"; /**/
+
+/* Limit the URL bar's autocompletion popup's width to the URL bar's width (GNOMISH)
+ * This feature is included by default for Firefox 70+ */
+/*@import "Monterey/matching-autocomplete-width.css"; /**/
+
+/* Rounded window even when it gets maximized */
+/*@import "Monterey/rounded-window-maximized.css"; /**/
+
+/* Active tab high contrast */
+/*@import "Monterey/active-tab-contrast.css"; /**/
+
+/* Use system theme icons instead of Adwaita icons included by theme [BUGGED] */
+/*@import "Monterey/system-icons.css"; /**/
+
+/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED] */
+/* It can activate button action, with unpleasant behavior. */
+/*@import "Monterey/drag-window-headerbar-buttons.css"; /**/
+
+/* Make all tab icons look kinda like symbolic icons */
+/*@import "Monterey/symbolic-tab-icons.css"; /**/
+
+/* Hide window buttons (close/min/max) in maximized windows */
+/*@import "Monterey/hide-window-buttons.css"; /**/
+
+/* Import your custom stylesheet */
+@import "customChrome.css"; /**/

src/other/firefox/userChrome-Monterey-darker.css

@@ -0,0 +1,58 @@
+/*------------------------USAGE----------------------------
+ * Remove "/*" at the begining of "@import" line to ENABLE.
+ * Add "/*" at the begining of "@import" line to DISABLE.
+ */
+
+@import "Monterey/theme-darker.css"; /**/
+
+/*--------------Configure your Monterey theme--------------
+ * ONLY for Monterey theme
+ * Enable one of these options and disable the other ones.
+ */
+
+/* How many buttons on left headerbar */
+@import "Monterey/left_header_button_3.css"; /**/
+/*@import "Monterey/left_header_button_4.css"; /**/
+/*@import "Monterey/left_header_button_5.css"; /**/
+
+/* How many buttons on right headerbar */
+@import "Monterey/right_header_button_3.css"; /**/
+/*@import "Monterey/right_header_button_4.css"; /**/
+/*@import "Monterey/right_header_button_5.css"; /**/
+
+
+/*--------------Configure common theme features--------------*/
+
+/* Move tab close button to left. */
+/*@import "Monterey/left-tab-close-button.css"; /**/
+
+/* Hide the tab bar when only one tab is open (GNOMISH)
+ * You should move the new tab button somewhere else for this to work, because by
+ * default it is on the tab bar too. */
+/*@import "Monterey/hide-single-tab.css"; /**/
+
+/* Limit the URL bar's autocompletion popup's width to the URL bar's width (GNOMISH)
+ * This feature is included by default for Firefox 70+ */
+/*@import "Monterey/matching-autocomplete-width.css"; /**/
+
+/* Rounded window even when it gets maximized */
+/*@import "Monterey/rounded-window-maximized.css"; /**/
+
+/* Active tab high contrast */
+/*@import "Monterey/active-tab-contrast.css"; /**/
+
+/* Use system theme icons instead of Adwaita icons included by theme [BUGGED] */
+/*@import "Monterey/system-icons.css"; /**/
+
+/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED] */
+/* It can activate button action, with unpleasant behavior. */
+/*@import "Monterey/drag-window-headerbar-buttons.css"; /**/
+
+/* Make all tab icons look kinda like symbolic icons */
+/*@import "Monterey/symbolic-tab-icons.css"; /**/
+
+/* Hide window buttons (close/min/max) in maximized windows */
+/*@import "Monterey/hide-window-buttons.css"; /**/
+
+/* Import your custom stylesheet */
+@import "customChrome.css"; /**/

src/other/firefox/userChrome-WhiteSur-darker.css

@@ -0,0 +1,42 @@
+/*------------------------USAGE----------------------------
+ * Remove "/*" at the begining of "@import" line to ENABLE.
+ * Add "/*" at the begining of "@import" line to DISABLE.
+ */
+
+@import "WhiteSur/theme-darker.css"; /**/
+
+/*--------------Configure common theme features--------------*/
+
+/* Move tab close button to left. */
+/*@import "WhiteSur/left-tab-close-button.css"; /**/
+
+/* Hide the tab bar when only one tab is open (GNOMISH)
+ * You should move the new tab button somewhere else for this to work, because by
+ * default it is on the tab bar too. */
+/*@import "WhiteSur/hide-single-tab.css"; /**/
+
+/* Limit the URL bar's autocompletion popup's width to the URL bar's width (GNOMISH) 
+ * This feature is included by default for Firefox 70+ */
+/*@import "WhiteSur/matching-autocomplete-width.css"; /**/
+
+/* Rounded window even when it gets maximized */
+/*@import "WhiteSur/rounded-window-maximized.css"; /**/
+
+/* Active tab high contrast */
+/*@import "WhiteSur/active-tab-contrast.css"; /**/
+
+/* Use system theme icons instead of Adwaita icons included by theme [BUGGED] */
+/*@import "WhiteSur/system-icons.css"; /**/
+
+/* Allow drag window from headerbar buttons (GNOMISH) [BUGGED] */
+/* It can activate button action, with unpleasant behavior. */
+/*@import "WhiteSur/drag-window-headerbar-buttons.css"; /**/
+
+/* Make all tab icons look kinda like symbolic icons */
+/*@import "WhiteSur/symbolic-tab-icons.css"; /**/
+
+/* Hide window buttons (close/min/max) in maximized windows */
+/*@import "WhiteSur/hide-window-buttons.css"; /**/
+
+/* Import your custom stylesheet */
+@import "customChrome.css"; /**/

src/other/firefox/userContent-Monterey-darker.css

@@ -0,0 +1,7 @@
+@import "Monterey/colors/light.css";
+@import "Monterey/colors/darker.css";
+
+@import "Monterey/pages/common.css";
+@import "Monterey/pages/newtab.css";
+@import "Monterey/pages/reader.css";
+@import "Monterey/pages/privatebrowsing.css";

src/other/firefox/userContent-WhiteSur-darker.css

@@ -0,0 +1,7 @@
+@import "WhiteSur/colors/light.css";
+@import "WhiteSur/colors/darker.css";
+
+@import "Monterey/pages/common.css";
+@import "Monterey/pages/newtab.css";
+@import "Monterey/pages/reader.css";
+@import "Monterey/pages/privatebrowsing.css";

tweaks.sh

@@ -44,13 +44,14 @@ usage() {
   helpify "--nord, --nordcolor" ""                                                  "  Install '${THEME_NAME}' Nord ColorScheme themes"                             ""
 
   helpify "" "" "[Others].." "options"
-  sec_title "-f, --firefox" "        [(monterey/flat)|alt|adaptive]"                "  Without options default WhiteSur theme will install..."                      "  Options:"
+  sec_title "-f, --firefox" "        [(monterey/flat)|alt|darker|adaptive]"         "  Without options default WhiteSur theme will install..."                      "  Options:"
   sec_helpify "1. monterey" "      [3+3|3+4|3+5|4+3|4+4|4+5|5+3|5+4|5+5]"           "  Topbar buttons number: 'a+b'"                                                "  a: left side buttons number, b: right side buttons number"
   sec_helpify "2. flat" "          Monterey alt version"                            ""                                                                              "  Flat round tabs..."
   sec_helpify "3. alt" "           Alt windows button version"                      ""                                                                              "  Alt window button style like gtk theme"
-  sec_helpify "4. adaptive" "      Adaptive color version"                          "  You need install adaptive-tab-bar-colour plugin first"                       "  https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/"
+  sec_helpify "4. darker" "        Darker Firefox theme version"                    ""                                                                              "  Darker Firefox theme version"
+  sec_helpify "5. adaptive" "      Adaptive color version"                          "  You need install adaptive-tab-bar-colour plugin first"                       "  https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/"
 
-  helpify "-e, --edit-firefox"  "[(monterey/flat)|alt|adaptive]"                    "  Edit '${THEME_NAME}' theme for Firefox settings and also connect the theme to the current Firefox profiles" ""
+  helpify "-e, --edit-firefox"  "[(monterey/flat)|alt|darker|adaptive]"             "  Edit '${THEME_NAME}' theme for Firefox settings and also connect the theme to the current Firefox profiles" ""
 
   helpify "-F, --flatpak"       "Support options: [-o, -c, -t...]"                  "  Connect '${THEME_NAME}' theme to Flatpak"                                    "Without options will only install default themes"
 
@@ -163,6 +164,10 @@ while [[ $# -gt 0 ]]; do
             window="alt"
             prompt -i "Alt windows button version...\n"
             shift ;;
+          darker)
+            darker="-darker"
+            prompt -i "Darker Firefox theme version...\n"
+            shift ;;
           adaptive)
             adaptive="-adaptive"
             prompt -i "Firefox adaptive color version...\n"
@@ -329,6 +334,13 @@ else
   fi
 
   if [[ "${firefox}" == 'true' || "${edit_firefox}" == 'true' ]]; then
+
+    if [[ "${darker}" == '-darker' && "${adaptive}" == '-adaptive' ]]; then
+      prompt -w "FIREFOX: You can't use 'adaptive' and 'darker' at the same time. \n"
+      prompt -i "FIREFOX: Setting to adaptive only... \n"
+      darker=''
+    fi
+
     if [[ "${firefox}" == 'true' && "${gdm}" != 'true' ]]; then
       prompt -i "Installing '${firefoxtheme}' Firefox theme... \n"
       install_firefox_theme