Implement theme color-based transparent tabs (closes #48)

filips123 · Sep 1, 2021 · e672ce2 · e672ce2
1 parent 8feec64
commit e672ce2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/native/userchrome/profile/chrome/pwa/content/browser.css b/native/userchrome/profile/chrome/pwa/content/browser.css
@@ -10,6 +10,13 @@
     --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important;
   }
 
+  /* Fix tab colors */
+
+  .tab-background[multiselected="true"], .tab-background[selected="true"] {
+    background-color: rgba(0, 0, 0, 0.1) !important;
+    background-image: none !important;
+  }
+
   /* Hide tabs and tab-related elements when tabs mode is disabled */
 
   html:not([tabsmode]) #new-tab-button,

diff --git a/native/userchrome/profile/chrome/pwa/utils/systemIntegration.jsm b/native/userchrome/profile/chrome/pwa/utils/systemIntegration.jsm
@@ -127,8 +127,9 @@ function setWindowColors (window, site) {
     const brightness = Math.round(((colors[0] * 299) + (colors[1] * 587) + (colors[2] * 114)) / 1000);
     const textColor = (brightness > 125) ? 'black' : 'white';
 
-    // Set background and text colors to the titlebar
+    // Set background and text colors to the titlebar and tabs
     styles.innerHTML += `#navigator-toolbox, html[tabsintitlebar] #main-menubar > *, html[tabsintitlebar] #titlebar > * { background-color: ${themeColor} !important; color: ${textColor} !important; }`;
+    styles.innerHTML += `.tabbrowser-tab { color: ${textColor} !important; }`;
 
     // Some Gtk+ themes use rounded corners, so Firefox by default disables styling of the titlebar
     // We need to detect and prevent this, and add own rounded corners using CSS