Improve floating tabs theme colour adjustments

bmFtZQ · Jan 17, 2024 · 95d6f37 · 95d6f37
1 parent bc13b59
commit 95d6f37
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -162,15 +162,6 @@ Disable the custom Edge-themed context menu and use the default Firefox menus.
 
 ---
 
-### Use system accent colours
-Uses the system titlebar colours for the tabs toolbar, this can be useful if you
-use the Windows option: 'Show accent colour on title bars and windows borders',
-as the Firefox titlebar will match other windows.
-
-`uc.tweak.colors.system-accent-color`
-
----
-
 ## Acknowledgements
 [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox)
 

diff --git a/chrome/global/browser.css b/chrome/global/browser.css
@@ -60,6 +60,10 @@
 
     @media (-moz-bool-pref: "uc.tweak.floating-tabs") {
       --browser-frame-bgcolor: var(--lwt-accent-color);
+
+      &:-moz-window-inactive {
+        --browser-frame-bgcolor: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+      }
     }
   }
 

diff --git a/chrome/global/colors.css b/chrome/global/colors.css
@@ -121,6 +121,24 @@
   }
 }
 
+/* Apply colours to the default 'Auto' theme. */
+#navigator-toolbox:not(:-moz-lwtheme) {
+  background-color: var(--lwt-accent-color) !important;
+  color: var(--lwt-text-color) !important;
+
+  /* Inactive window background colours. */
+  &:-moz-window-inactive {
+    background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
+    color: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important;
+  }
+}
+
+/* Make sure that the tab toolbar opacity is always 1, inactive window colours
+ * are already supplied by this theme. */
+ :root[tabsintitlebar] #titlebar:-moz-window-inactive {
+  opacity: 1 !important;
+}
+
 /* Make the titlebar buttons black/white on default themes */
 :root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
   color: var(--lwt-text-color) !important;
@@ -154,7 +172,8 @@
 
   /* Use accent colour in titlebar when Windows option is enabled. */
   @media (-moz-windows-accent-color-in-titlebar) and (-moz-bool-pref: "browser.theme.windows.accent-color-in-tabs.enabled") {
-    :root:not(:-moz-lwtheme) {
+    /* Uses :root:root to beat specificity of floating tabs adjustments. */
+    :root:root:not(:-moz-lwtheme) {
       --lwt-accent-color: ActiveCaption !important;
       --lwt-text-color: CaptionText !important;
       --lwt-accent-color-inactive: InActiveCaption !important;

diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css
@@ -31,7 +31,7 @@ bugs with certain themes eg. dark text on dark background.) */
   /* `--newtab-background-color-secondary used` to differentiate between a dark
    * private window and private window with the 'Dark' theme enabled.
    * May not be the most reliable method, but works for now up to FF 123. */
-  :root[privatebrowsingmode="temporary"][style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"]) {
+  :root[privatebrowsingmode="temporary"]:where([style*="--lwt-accent-color: rgb(28, 27, 34)"]:not([style*="--newtab-background-color-secondary: rgb(66, 65, 77)"])) {
     --lwt-accent-color: light-dark(#f3f3f3, #202020) !important;
     --lwt-accent-color-inactive: unset !important;
     --toolbar-bgcolor: light-dark(#fff, #3F3F3F) !important;
@@ -40,6 +40,19 @@ bugs with certain themes eg. dark text on dark background.) */
     --lwt-tab-line-color: light-dark(transparent, rgb(255 255 255 / 0.06)) !important;
   }
 
+  /* Uses :root body to avoid affecting other variables by changing
+   * --toolbar-color. */
+  :root body {
+    /* Use tabbar colours for better readability when using custom themes. */
+    --toolbar-color: var(--lwt-text-color) !important;
+    --toolbarbutton-icon-fill: var(--lwt-text-color) !important;
+
+    &:-moz-window-inactive {
+      --toolbar-color: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important;
+      --toolbarbutton-icon-fill:  var(--lwt-text-color-inactive, var(--lwt-text-color)) !important;
+    }
+  }
+
   @media (-moz-gtk-csd-available) {
     :root:not(:-moz-lwtheme) {
       --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important;

diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css
@@ -40,24 +40,6 @@
   }
 }
 
-/* Fix window background colours. */
-#navigator-toolbox:not(:-moz-lwtheme) {
-  background-color: var(--lwt-accent-color) !important;
-  color: var(--lwt-text-color) !important;
-
-  /* Inactive window background colours. */
-  &:-moz-window-inactive {
-    background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
-    color: var(--lwt-text-color-inactive, var(--lwt-text-color)) !important;
-  }
-}
-
-/* Make sure that the tab toolbar opacity is always 1, inactive window colours
- * are already supplied by this theme. */
-:root[tabsintitlebar] #titlebar:-moz-window-inactive {
-  opacity: 1 !important;
-}
-
 /* ::::: Tab transitions ::::: */
 
 /* Tab grow/shrink transition. */