feat: Accent color will now use the system accent color, b=no-bug, c=common, workspaces

prefs/theme.yaml

@@ -3,7 +3,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 - name: zen.theme.accent-color
-  value: '#ffb787'
+  value: 'system'
 
 - name: zen.theme.content-element-separation
   value: 8

src/browser/themes/shared/zen-icons/icons.css

@@ -35,7 +35,8 @@
 #stop-button,
 .close-icon,
 .zen-glance-sidebar-close,
-.zen-theme-picker-custom-list-item-remove {
+.zen-theme-picker-custom-list-item-remove,
+#appMenu-quit-button2 {
   list-style-image: url('close.svg') !important;
 }
 

src/zen/common/styles/zen-browser-ui.css

@@ -46,9 +46,15 @@
   pointer-events: none;
 
   isolation: isolate;
-
   background: var(--zen-themed-toolbar-bg-transparent);
 
+  /*
+   *  Important: We set the color to `AccentColor` so we can
+   *  Compute the stylings and get the native accent color.
+   *  Please, do not remove this.
+   */
+  color: AccentColor;
+
   &::after,
   &::before {
     content: '';

src/zen/common/zenThemeModifier.js

@@ -97,7 +97,10 @@ var ZenThemeModifier = {
    * Update the accent color.
    */
   updateAccentColor() {
-    const accentColor = Services.prefs.getStringPref('zen.theme.accent-color');
+    let accentColor = Services.prefs.getStringPref('zen.theme.accent-color');
+    if (accentColor.startsWith('system:')) {
+      accentColor = accentColor.replace('system:', '').trim();
+    }
     document.documentElement.style.setProperty('--zen-primary-color', accentColor);
   },
 };

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1501,7 +1501,16 @@
 
     getNativeAccentColor() {
       const accentColor = Services.prefs.getStringPref('zen.theme.accent-color');
-      const rgb = this.hexToRgb(accentColor);
+      let rgb;
+      if (accentColor.startsWith('system')) {
+        const rawRgb = window.getComputedStyle(document.getElementById('zen-browser-background'))[
+          'color'
+        ];
+        Services.prefs.setStringPref('zen.theme.accent-color', `system:${rawRgb}`);
+        rgb = rawRgb.match(/\d+/g).map(Number);
+      } else {
+        rgb = this.hexToRgb(accentColor);
+      }
       if (this.isDarkMode) {
         // If the theme is dark, we want to use a lighter color
         return this.blendColors(rgb, [0, 0, 0], 40);