feat: Improved theme handling for single workspaces, b=no-bug, c=tabs, folders, workspaces

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1143,7 +1143,7 @@
         return forToolbar
           ? this.getToolbarModifiedBase()
           : this.isDarkMode
-            ? 'rgba(0, 0, 0, 0.4)'
+            ? 'linear-gradient(-45deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.4))'
             : 'transparent';
       } else if (themedColors.length === 1) {
         return this.getSingleRGBColor(themedColors[0], forToolbar);
@@ -1313,6 +1313,13 @@
           }
         }
 
+        if (theme) {
+          const workspaceElement = browser.gZenWorkspaces.workspaceElement(windowWorkspace.uuid);
+          if (workspaceElement) {
+            workspaceElement.clearThemeStyles();
+          }
+        }
+
         if (!skipUpdate) {
           browser.document.documentElement.style.setProperty(
             '--zen-main-browser-background-old',
@@ -1627,21 +1634,42 @@
 
     invalidateGradientCache() {
       this.#gradientsCache = {};
+      window.dispatchEvent(new Event('ZenGradientCacheChanged'));
     }
 
-    async getGradientForWorkspace(workspace) {
+    getGradientForWorkspace(workspace) {
       const uuid = workspace.uuid;
       if (this.#gradientsCache[uuid]) {
         return this.#gradientsCache[uuid];
       }
       const previousOpacity = this.currentOpacity;
       const previousLightness = this.#currentLightness;
-      this.currentOpacity = workspace.theme.opacity ?? 0.5;
-      this.#currentLightness = workspace.theme.lightness ?? 50;
-      const gradient = this.getGradient(workspace.theme.gradientColors);
+      const theme = workspace.theme;
+      this.currentOpacity = theme.opacity ?? 0.5;
+      this.#currentLightness = theme.lightness ?? 50;
+      const gradient = this.getGradient(theme.gradientColors);
       this.currentOpacity = previousOpacity;
       this.#currentLightness = previousLightness;
-      this.#gradientsCache[uuid] = [gradient, workspace.theme.texture ?? 0];
+      let dominantColor = this.getMostDominantColor(theme.gradientColors);
+      const isDefaultTheme = !dominantColor;
+      if (isDefaultTheme) {
+        dominantColor = this.getNativeAccentColor();
+      }
+      let isDarkMode = this.isDarkMode;
+      let isExplicitMode = false;
+      if (!isDefaultTheme && !this.isLegacyVersion) {
+        // Check for the primary color
+        isDarkMode = this.shouldBeDarkMode(dominantColor);
+        isExplicitMode = true;
+      }
+      this.#gradientsCache[uuid] = {
+        gradient,
+        grain: theme.texture ?? 0,
+        isDarkMode,
+        isExplicitMode,
+        toolbarColor: this.getToolbarColor(isDarkMode),
+        primaryColor: this.getAccentColorForUI(dominantColor),
+      };
       return this.#gradientsCache[uuid];
     }
   }

src/zen/workspaces/ZenWorkspace.mjs

@@ -144,6 +144,8 @@
 
       this.#updateOverflow();
 
+      window.addEventListener('ZenGradientCacheChanged', this.#onGradientCacheChanged.bind(this));
+
       this.dispatchEvent(
         new CustomEvent('ZenWorkspaceAttached', {
           bubbles: true,
@@ -224,6 +226,26 @@
     get newTabButton() {
       return this.querySelector('#tabs-newtab-button');
     }
+
+    #onGradientCacheChanged() {
+      const { isDarkMode, isExplicitMode, toolbarColor, primaryColor } =
+        gZenThemePicker.getGradientForWorkspace(
+          gZenWorkspaces.getWorkspaceFromId(this.workspaceUuid)
+        );
+      if (isExplicitMode) {
+        this.style.colorScheme = isDarkMode ? 'dark' : 'light';
+      } else {
+        this.style.colorScheme = '';
+      }
+      this.style.setProperty('--toolbox-textcolor', `rgba(${toolbarColor.join(',')})`);
+      this.style.setProperty('--zen-primary-color', primaryColor);
+    }
+
+    clearThemeStyles() {
+      this.style.colorScheme = '';
+      this.style.removeProperty('--toolbox-textcolor');
+      this.style.removeProperty('--zen-primary-color');
+    }
   }
 
   customElements.define('zen-workspace', nsZenWorkspace);

src/zen/workspaces/ZenWorkspaces.mjs

@@ -1719,9 +1719,9 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
       // Find the next workspace we are scrolling to
       const nextWorkspace = workspaces.workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)];
       if (nextWorkspace) {
-        const [nextGradient, nextGrain] =
-          await gZenThemePicker.getGradientForWorkspace(nextWorkspace);
-        const existingGrain = (await gZenThemePicker.getGradientForWorkspace(workspace))[1];
+        const { gradient: nextGradient, grain: nextGrain } =
+          gZenThemePicker.getGradientForWorkspace(nextWorkspace);
+        const existingGrain = gZenThemePicker.getGradientForWorkspace(workspace).grain;
         const percentage = Math.abs(offsetPixels) / 200;
         await new Promise((resolve) => {
           requestAnimationFrame(() => {

src/zen/workspaces/zen-workspaces.css

@@ -247,6 +247,7 @@ zen-workspace {
   position: absolute;
   height: 100%;
   overflow: hidden;
+  color: var(--toolbox-textcolor);
 
   :root:not([zen-sidebar-expanded='true']) & {
     width: 100%;