add linux/gtk theme support

README.md

@@ -24,13 +24,14 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch
 
 **Note: Most frequently tested on macOS**
 
-## Screenshots (Windows)
+## Screenshots
 |Theme|Light|Dark|
 |-|-|-|
-|Default|![Light](screenshots/light.png)|![Dark](screenshots/dark.png)|
-|Floating Tabs|![Light, Floating Tabs](screenshots/light-floating-tabs.png)|![Dark, Floating Tabs](screenshots/dark-floating-tabs.png)|
-|Mica|![Light, Mica](screenshots/light-mica.png)|![Dark, Mica](screenshots/dark-mica.png)|
-|Mica and Floating Tabs|![Light, Mica and Floating Tabs](screenshots/light-mica-floating-tabs.png)|![Dark, Mica and Floating Tabs](screenshots/dark-mica-floating-tabs.png)|
+|Default (Windows 11)|![Light](screenshots/light.png)|![Dark](screenshots/dark.png)|
+|Floating Tabs (Windows 11)|![Light, Floating Tabs](screenshots/light-floating-tabs.png)|![Dark, Floating Tabs](screenshots/dark-floating-tabs.png)|
+|Mica (Windows 11)|![Light, Mica](screenshots/light-mica.png)|![Dark, Mica](screenshots/dark-mica.png)|
+|Mica and Floating Tabs (Windows 11)|![Light, Mica and Floating Tabs](screenshots/light-mica-floating-tabs.png)|![Dark, Mica and Floating Tabs](screenshots/dark-mica-floating-tabs.png)|
+|GTK (GNOME 42, [adw-gtk3](https://github.com/lassekongo83/adw-gtk3) theme)|![Light, GTK](screenshots/gtk-light.png)|![Dark, GTK](screenshots/gtk-dark.png)|
 
 ## Tweaks
 Certain tweaks can be applied to the theme, to enable them navigate to `about:config` and create a boolean key for each tweak you want to use and set it to `true`, then restart the browser.

chrome/global/colors.css

@@ -21,7 +21,7 @@
   --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
   --toolbar-field-focus-color: var(--toolbar-field-color) !important;
   --toolbar-field-focus-border-color: #0055D7 !important;
-  --urlbar-icon-fill-opacity: 1 !important;
+  --urlbar-icon-fill-opacity: 0.6 !important;
   --urlbar-popup-url-color: #0072C9 !important;
   --lwt-brighttext-url-color: var(--urlbar-popup-url-color) !important;
   --urlbar-box-bgcolor: var(--toolbar-field-background-color) !important;
@@ -279,3 +279,103 @@ body[lwt-sidebar-brighttext][style*="--lwt-sidebar-background-color: rgb(56, 56,
     border-radius: 2px !important;
   }
 }
+
+/* Linux / GTK csd support */
+@media (-moz-gtk-csd-available) {
+  :root:not(:-moz-lwtheme) {
+    --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important;
+    --toolbar-bgimage: none !important;
+    --toolbar-color: -moz-dialogtext !important;
+    --tab-selected-bgimage: none !important;
+    --chrome-content-separator-color: ThreeDShadow !important;
+    --panel-separator-color: ThreeDShadow !important;
+    --button-bgcolor: color-mix(in srgb, currentColor 10%, transparent) !important;
+    --button-hover-bgcolor: color-mix(in srgb, currentColor 14%, transparent) !important;
+    --button-active-bgcolor: color-mix(in srgb, currentColor 20%, transparent) !important;
+    --button-color: currentColor !important;
+    --button-primary-bgcolor: -moz-accent-color !important;
+    --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, -moz-accent-color) !important;
+    --button-primary-active-bgcolor: color-mix(in srgb, black 20%, -moz-accent-color) !important;
+    --button-primary-color: -moz-accent-color-foreground !important;
+    --autocomplete-popup-hover-background: var(--arrowpanel-dimmed) !important;
+    --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent) !important;
+    --urlbar-box-bgcolor: var(--button-bgcolor) !important;
+    --urlbar-box-focus-bgcolor: var(--button-bgcolor) !important;
+    --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor) !important;
+    --urlbar-box-active-bgcolor: var(--button-active-bgcolor) !important;
+    --urlbar-box-text-color: inherit !important;
+    --urlbar-box-hover-text-color: var(--urlbar-box-text-color) !important;
+    --urlbar-icon-fill-opacity: 0.9 !important;
+    --urlbar-popup-url-color: -moz-nativehyperlinktext !important;
+    --lwt-brighttext-url-color: #00ddff !important;
+    --toolbarbutton-icon-fill-attention: -moz-nativehyperlinktext !important;
+    --focus-outline-color: -moz-accent-color !important;
+    --arrowpanel-background: Field !important;
+    --arrowpanel-color: FieldText !important;
+    --arrowpanel-border-color: ThreeDShadow !important;
+    --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important;
+    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent) !important;
+    --panel-description-color: GrayText !important;
+    --panel-disabled-color: GrayText !important;
+    --toolbarbutton-icon-fill: currentColor !important;
+    --toolbar-field-background-color: Field !important;
+    --toolbar-field-color: FieldText !important;
+    --toolbar-field-border-color: ThreeDShadow !important;
+    --toolbar-field-focus-background-color: Field !important;
+    --toolbar-field-focus-color: FieldText !important;
+    --toolbar-field-focus-border-color: -moz-accent-color !important;
+    --toolbarbutton-hover-background: color-mix(in srgb, -moz-dialogtext 14%, transparent) !important;
+    --toolbarbutton-active-background: color-mix(in srgb, -moz-dialogtext 20%, transparent) !important;
+    --uc-urlbar-shadow: none;
+    --autocomplete-popup-highlight-color: FieldText !important;
+    --autocomplete-popup-highlight-background: color-mix(in srgb, currentColor 8%, transparent) !important;
+    --autocomplete-popup-hover-background: color-mix(in srgb, currentColor 12%, transparent) !important;
+    --autocomplete-popup-separator-color: #0000 !important;
+    --panel-item-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important;
+    --panel-item-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important;
+    --panel-separator-color: ThreeDShadow !important;
+    --panel-banner-item-update-supported-bgcolor: #1bba6b !important;
+    --focus-outline-color: -moz-accent-color !important;
+    --uc-private-browsing-indicator: -moz-accent-color !important;
+    --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor);
+    --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor);
+    --uc-private-browding-indicator-text: var(--button-primary-color);
+  }
+
+  #sidebar-box:not([lwt-sidebar]) {
+    --sidebar-background-color: -moz-dialog !important;
+    --sidebar-text-color:  -moz-dialog-text !important;
+  }
+
+  #browser:not([style*="--sidebar-border-color"]) {
+    --sidebar-border-color: ThreeDShadow !important;
+  }
+
+  .sidebar-panel:not([lwt-sidebar]) {
+    color: -moz-dialogtext !important;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root:not(:-moz-lwtheme) {
+      --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 65%, #fff) !important;
+      --urlbar-icon-fill-opacity: 0.7 !important;
+      --toolbar-field-border-color: transparent !important;
+      --toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
+      --toolbar-field-color: FieldText !important;
+      --toolbar-field-focus-background-color: Field !important;
+      --toolbar-field-focus-color: FieldText !important;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(:-moz-lwtheme) {
+      --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 90%, #fff) !important;
+      --urlbar-icon-fill-opacity: 1.0 !important;
+      --toolbar-field-border-color: transparent !important;
+      --toolbar-field-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
+      --toolbar-field-color: FieldText !important;
+      --toolbar-field-focus-background-color: color-mix(in srgb, Field 90%, -moz-dialogtext) !important;
+      --toolbar-field-focus-color: FieldText !important;
+    }
+  }
+}

chrome/global/tweaks.css

@@ -60,6 +60,13 @@ browsing indicator) */
     --chrome-content-separator-color: #535353 !important;
   }
 
+  @media (-moz-gtk-csd-available) {
+    :root:not(:-moz-lwtheme) {
+      --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 80%, #fff) !important;
+      --toolbar-field-background-color: Field !important;
+    }
+  }
+
   /* remove toolbar bg */
   #nav-bar,
   #PersonalToolbar {

chrome/icons/icons.css

@@ -2,7 +2,7 @@
 
 /* windows 11 style window controls (no known way to detect between windows 10
 and 11 so applied to both) */
-@media (-moz-windows-compositor) {
+@media (-moz-windows-compositor), (-moz-gtk-csd-available) {
   .titlebar-min {
     list-style-image: url("win11-minimize.svg") !important;
   }

chrome/toolbar/navbar.css

@@ -65,6 +65,21 @@
   background: var(--uc-private-browding-indicator-active, color-mix(in srgb, var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention)) 70%, transparent)) !important;
 }
 
+@media (-moz-gtk-csd-available) {
+  :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme) {
+    background: -moz-accent-color !important;
+    color: -moz-accent-color-foreground !important;
+  }
+  
+  :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme):hover {
+    background:color-mix(in srgb, black 8%, -moz-accent-color) !important;
+  }
+  
+  :root[privatebrowsingmode] #fxa-toolbar-menu-button:not(:-moz-lwtheme):not([disabled=true]):is([open], [checked], :hover:active) {
+    background: color-mix(in srgb, black 16%, -moz-accent-color) !important;
+  }
+}
+
 :root[privatebrowsingmode] #nav-bar #fxa-toolbar-menu-button>.toolbarbutton-badge-stack {
   background: transparent !important;
   margin-inline: 0 !important;

chrome/toolbar/tabbar.css

@@ -105,16 +105,18 @@
 }
 
 /* fix colours */
-#navigator-toolbox:not(:-moz-lwtheme) {
-  background-color: var(--lwt-accent-color) !important;
-  color: var(--lwt-text-color) !important;
-}
+@media not (-moz-gtk-csd-available) {
+  #navigator-toolbox:not(:-moz-lwtheme) {
+    background-color: var(--lwt-accent-color) !important;
+    color: var(--lwt-text-color) !important;
+  }
 
-/* force inactive window on default theme */
-@media not (-moz-platform: windows-win7) {
-  @media not (-moz-platform: windows-win8) {
-    #navigator-toolbox:-moz-window-inactive:not(:-moz-lwtheme) {
-      background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
+  /* force inactive window on default theme */
+  @media not (-moz-platform: windows-win7) {
+    @media not (-moz-platform: windows-win8) {
+      #navigator-toolbox:-moz-window-inactive:not(:-moz-lwtheme) {
+        background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
+      }
     }
   }
 }
@@ -125,7 +127,7 @@
 
 #TabsToolbar .toolbarbutton-animatable-box,
 #TabsToolbar .toolbarbutton-1 {
-  fill: var(--lwt-text-color) !important;
+  fill: currentColor !important;
 }
 
 .tabbrowser-tab[multiselected]:not(:-moz-lwtheme),

chrome/toolbar/urlbar.css

@@ -13,13 +13,18 @@
   --urlbar-box-bgcolor: unset !important;
 }
 
-#urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background:not(:-moz-lwtheme),
-#searchbar:not(:-moz-lwtheme):focus-within,
 :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
 :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #searchbar:focus-within {
   outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important;
 }
 
+@media not (-moz-gtk-csd-available) {
+  #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background:not(:-moz-lwtheme),
+  #searchbar:not(:-moz-lwtheme):focus-within {
+    outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important;
+  }
+}
+
 :root:not([lwtheme-brighttext="true"]) #urlbar-background {
   box-shadow: var(--uc-urlbar-shadow, none);
 }
@@ -168,26 +173,15 @@
 }
 
 /* make urlbar icons opaque in default theme */
-@media not (prefers-contrast) {
-  :is(:root:not(:-moz-lwtheme), :root[style*="--lwt-accent-color: rgb(240, 240, 244)"]) :is(
-    .urlbar-icon:not(#star-button[starred]),
-    .sharing-icon,
-    #identity-icon,
-    .searchbar-search-icon,
-    #identity-icon-label,
-    #permissions-granted-icon,
-    #tracking-protection-icon,
-    .notification-anchor-icon,
-    #blocked-permissions-container > .blocked-permission-icon) {
-    opacity: 0.6 !important;
-  }
-}
-
 #urlbar-input::placeholder,
 .searchbar-textbox::placeholder {
   opacity: 0.6 !important;
 }
 
+:is(:root:not(:-moz-lwtheme), :root[style*="--lwt-accent-color: rgb(240, 240, 244)"]) #identity-icon-label {
+  opacity: var(--urlbar-icon-fill-opacity) !important;
+}
+
 /* remove background from urlbar box */
 #identity-box[pageproxystate="valid"].notSecureText>.identity-box-button:not(:hover, [open]),
 #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button:not(:hover, [open]),
@@ -219,7 +213,6 @@
 }
 
 @media not (prefers-reduced-motion) {
-
   :is(#identity-box[pageproxystate="valid"].notSecureText>.identity-box-button,
     #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button,
     #identity-box[pageproxystate="valid"].extensionPage>.identity-box-button)::after {