Support for Windows accent colour in tabs toolbar

Adds support for Windows accent colour in the tab toolbar when the
option: browser.theme.windows.accent-color-in-tabs.enabled is set to
true in about:config and the corresponding Windows setting is enabled.

README.md

@@ -13,11 +13,12 @@ Screenshot: macOS / Firefox 120 / Tweaks: rounded corners, hide forward button.
 4. Close and restart Firefox, if performed correctly, the theme should now be installed.
 5. Optionally, listed below are some additional Firefox settings that can be changed using `about:config`:
 
-   | Description                                | Preference Name                              | Value   |
-   | ------------------------------------------ | -------------------------------------------- | ------- |
-   | Use Edge-themed context menu on macOS      | `widget.macos.native-context-menus`          | `false` |
-   | Use light theme in private browsing mode   | `browser.theme.dark-private-windows`         | `false` |
-   | Use rounded bottom window corners on Linux | `widget.gtk.rounded-bottom-corners.enabled ` | `true`  |
+   | Description                                                                                           | Preference Name                                      | Value   |
+   | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
+   | Use Edge-themed context menu on macOS                                                                 | `widget.macos.native-context-menus`                  | `false` |
+   | Use light theme in private browsing mode                                                              | `browser.theme.dark-private-windows`                 | `false` |
+   | Use rounded bottom window corners on Linux                                                            | `widget.gtk.rounded-bottom-corners.enabled `         | `true`  |
+   | Use Windows accent colour in tabs toolbar (must use Windows 'show accent colour in title bar' option) | `browser.theme.windows.accent-color-in-tabs.enabled` | `true`  |
 
    Additional tweaks can also be applied to the theme such as Floating tabs, Rounded browser corners and more. See [Tweaks](#tweaks).
 

chrome/global/browser.css

@@ -1,8 +1,9 @@
 /* Edge-Frfox - browser.css
  * https://github.com/bmFtZQ/edge-frfox */
 
-/* Windows has 1px missing space on top of window. */
-@media (-moz-platform: windows) {
+/* Windows has 1px missing space on top of window, but not when accent colour is
+ * applied to the title bar. */
+@media (-moz-platform: windows) and (not (-moz-windows-accent-color-in-titlebar)) {
   :root[sizemode="normal"][tabsintitlebar]:not([inFullscreen]) #navigator-toolbox {
     padding-top: 1px !important;
   }

chrome/global/colors.css

@@ -6,7 +6,7 @@
 /* `--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)"])) {
   /* Toolbars */
   --lwt-accent-color: light-dark(#cecece, #1C1C1C) !important;
   --lwt-accent-color-inactive: light-dark(#e8e8e8, #2e2e2e) !important;
@@ -26,8 +26,8 @@
   --newtab-background-color: light-dark(#f7f7f7, #252525) !important;
   --tabpanel-background-color: var(--newtab-background-color, var(--toolbar-bgcolor, transparent)) !important;
   /* Toolbar button overlays */
-  --toolbarbutton-hover-background: light-dark(rgb(0 0 0 / .08), rgb(255 255 255 / .08)) !important;
-  --toolbarbutton-active-background: light-dark(rgb(0 0 0 / .135), rgb(255 255 255 / .135)) !important;
+  --toolbarbutton-hover-background: color-mix(in srgb, currentColor 8%, transparent) !important;
+  --toolbarbutton-active-background: color-mix(in srgb, currentColor 13.5%, transparent) !important;
   /* Tab audio indicator overlay icon */
   --tab-icon-overlay-fill: var(--toolbar-color) !important;
   --tab-icon-overlay-stroke: var(--toolbar-bgcolor) !important;
@@ -152,6 +152,16 @@
     border-color: var(--arrowpanel-border-color) !important;
   }
 
+  /* 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) {
+      --lwt-accent-color: ActiveCaption !important;
+      --lwt-text-color: CaptionText !important;
+      --lwt-accent-color-inactive: InActiveCaption !important;
+      --lwt-text-color-inactive: InActiveCaptionText !important;
+    }
+  }
+
   .titlebar-button:not(.titlebar-close):hover {
     background-color: color-mix(in srgb, currentColor 11%, transparent) !important;
 
@@ -251,7 +261,7 @@
   /* `--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)"])) {
     /* Used for mixing colours differently in light/dark themes. */
     --uc-tint: light-dark(black, white);
     /* Colour adjusted for readability. */
@@ -287,9 +297,6 @@
     --urlbarView-highlight-color: var(--toolbar-field-color) !important;
     --urlbarView-hover-background: var(--panel-item-active-bgcolor) !important;
     --urlbarView-separator-color: var(--panel-separator-color) !important;
-    /* Toolbar button hover & click backgrounds. */
-    --toolbarbutton-hover-background: color-mix(in srgb, -moz-dialogtext 8%, transparent) !important;
-    --toolbarbutton-active-background: color-mix(in srgb, -moz-dialogtext 13.5%, transparent) !important;
     /* Menus/panels */
     --arrowpanel-background: Field !important;
     --arrowpanel-color: FieldText !important;