Added color choice functionality and edited look and feel settings

src/browser/base/content/zenThemeModifier.js

@@ -52,6 +52,11 @@
       updateAccentColor() {
         const accentColor = Services.prefs.getStringPref(kZenThemeAccentColorPref, "#0b57d0");
         document.documentElement.style.setProperty("--zen-primary-color", accentColor);
+        // Notify the page that the accent color has changed, only if a function
+        // handler is defined.
+        if (typeof window.zenPageAccentColorChanged === "function") {
+          window.zenPageAccentColorChanged(accentColor);
+        }
       },
  
    };

src/browser/components/preferences/main-inc-xhtml.patch

@@ -0,0 +1,20 @@
+diff --git a/browser/components/preferences/main.inc.xhtml b/browser/components/preferences/main.inc.xhtml
+index aaacdb6d977a69ca62d59bd861b26948980c400d..b014cfaf5b8f31bc5a37135c92dbf213b08eeba0 100644
+--- a/browser/components/preferences/main.inc.xhtml
++++ b/browser/components/preferences/main.inc.xhtml
+@@ -155,6 +155,7 @@
+ </hbox>
+ 
+ <!-- Website appearance -->
++#if 0
+ <groupbox id="webAppearanceGroup" data-category="paneGeneral" hidden="true">
+   <html:h2 data-l10n-id="preferences-web-appearance-header"/>
+   <html:div id="webAppearanceSettings">
+@@ -195,6 +196,7 @@
+     </html:div>
+   </html:div>
+ </groupbox>
++#endif
+ 
+ <!-- Colors -->
+ <groupbox id="colorsGroup" data-category="paneGeneral" hidden="true">

src/browser/components/preferences/zen-looks.js

@@ -1,6 +1,49 @@
 
+const kZenColors = [
+  "#2868cf",
+  "#74d7cb",
+  "#a0d490",
+  "#dec663",
+  "#ffb787",
+  "#dec1b1",
+  "#ffb1c0",
+  "#ddbfc3",
+  "#f6b0ea",
+  "#d4bbff",
+];
+
 var gZenLooksAndFeel = {
   init() {
-    
-  }
+    this._initializeColorPicker(this._getInitialAccentColor());
+    window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
+  },
+
+  _initializeColorPicker(accentColor) {
+    let elem = document.getElementById("zenLooksAndFeelColorOptions");
+    elem.innerHTML = "";
+    for (let color of kZenColors) {
+      let colorElemParen = document.createElement("div");
+      let colorElem = document.createElement("div");
+      colorElemParen.classList.add("zenLooksAndFeelColorOptionParen");
+      colorElem.classList.add("zenLooksAndFeelColorOption");
+      colorElem.style.setProperty("--zen-primary-color", color, "important");
+      if (accentColor === color) {
+        colorElemParen.setAttribute("selected", "true");
+      }
+      colorElemParen.addEventListener("click", () => {
+        Services.prefs.setStringPref("zen.theme.accent-color", color);
+      });
+      colorElemParen.appendChild(colorElem);
+      elem.appendChild(colorElemParen);
+    }
+    // TODO: add custom color selection!
+  },
+
+  _handleAccentColorChange(accentColor) {
+    this._initializeColorPicker(accentColor);
+  },
+
+  _getInitialAccentColor() {
+    return Services.prefs.getStringPref("zen.theme.accent-color", kZenColors[0]);
+  },
 };

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -6,8 +6,53 @@
       data-category="paneZenLooks">
 </hbox>
 
-<groupbox data-category="paneZenLooks" hidden="true" class="highlighting-group">
- TODO!
+<groupbox id="zenLooksAndFeelGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
+      <label><html:h2 data-l10n-id="zen-look-and-feel-colors-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-colors-description" />
+
+      <hbox id="zenLooksAndFeelColorOptions" align="center">
+      </hbox>
+</groupbox>
+
+<groupbox id="webAppearanceGroup" data-category="paneZenLooks" hidden="true">
+  <html:h2 data-l10n-id="preferences-web-appearance-header"/>
+  <html:div id="webAppearanceSettings">
+    <description class="description-deemphasized" data-l10n-id="preferences-web-appearance-description"/>
+    <html:div id="web-appearance-override-warning" class="info-box-container">
+      <html:div class="info-icon-container">
+        <html:img class="info-icon"/>
+      </html:div>
+      <description data-l10n-id="preferences-web-appearance-override-warning">
+        <html:a class="text-link" data-l10n-name="colors-link" id="web-appearance-manage-colors-link" href="#"/>
+      </description>
+    </html:div>
+    <form xmlns="http://www.w3.org/1999/xhtml" id="web-appearance-chooser" autocomplete="off">
+      <label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-auto">
+        <div class="web-appearance-choice-image-container"><img role="presentation" alt="" width="54" height="42" /></div>
+        <div class="web-appearance-choice-footer">
+          <input type="radio" name="web-appearance" value="auto" data-l10n-id="preferences-web-appearance-choice-input-auto"
+          /><span data-l10n-id="preferences-web-appearance-choice-auto" />
+        </div>
+      </label>
+      <label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-light">
+        <div class="web-appearance-choice-image-container"><img role="presentation" alt="" width="54" height="42" /></div>
+        <div class="web-appearance-choice-footer">
+          <input type="radio" name="web-appearance" value="light" data-l10n-id="preferences-web-appearance-choice-input-light"
+          /><span data-l10n-id="preferences-web-appearance-choice-light" />
+        </div>
+      </label>
+      <label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-dark">
+        <div class="web-appearance-choice-image-container"><img role="presentation" alt="" width="54" height="42" /></div>
+        <div class="web-appearance-choice-footer">
+          <input type="radio" name="web-appearance" value="dark" data-l10n-id="preferences-web-appearance-choice-input-dark"
+          /><span data-l10n-id="preferences-web-appearance-choice-dark" />
+        </div>
+      </label>
+    </form>
+    <html:div data-l10n-id="preferences-web-appearance-footer">
+      <html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
+    </html:div>
+  </html:div>
 </groupbox>
 
 </html:template>

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -2,3 +2,7 @@
 pane-zen-looks-title = Look And Feel
 category-zen-looks =
     .tooltiptext = { pane-zen-looks-title }
+
+
+zen-look-and-feel-colors-header = Pick a theme colour
+zen-look-and-feel-colors-description = Make { -brand-short-name } look and feel the way you like

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

@@ -2,3 +2,61 @@
 #category-zen-looks > .category-icon {
   list-style-image: url("chrome://browser/skin/customize.svg");
 }
+
+/* Look and feel */
+
+#zenLooksAndFeelColorOptions {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 108px);
+  gap: 5px;
+  margin: 10px 0 15px 0;
+}
+
+.zenLooksAndFeelColorOptionParen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+  border-radius: 10px;
+  cursor: pointer;
+  background: var(--in-content-box-info-background);
+  width: fit-content;
+  margin-top: 10px;
+  border: 2px solid transparent;
+}
+
+.zenLooksAndFeelColorOptionParen[selected="true"] {
+  border-color: var(--zen-primary-color);
+}
+
+.zenLooksAndFeelColorOption {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: var(--zen-primary-color);
+  position: relative;
+  overflow: hidden;
+}
+
+.zenLooksAndFeelColorOption::before {
+  content: "";
+  display: block;
+  width: 50%;
+  height: 50%;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  background: var(--zen-colors-secondary);
+}
+
+.zenLooksAndFeelColorOption::after {
+  content: "";
+  display: block;
+  width: 50%;
+  height: 50%;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  background: var(--zen-colors-tertiary);
+}

src/toolkit/themes/shared/in-content/zen-common-shared.css

@@ -2,7 +2,13 @@
 @import url("zen-common-shared-ui-override.css");
 
 :host(:is(.anonymous-content-host, notification-message)),
-:root {
+:root,
+.zenLooksAndFeelColorOption {
+
+  /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
+   * in the preferences page.
+   */
+
   /** Primary colors examples:
    * - green: #96D785;
    * - blue: #0b57d0;
@@ -10,11 +16,11 @@
    */
 
   /** Primary color will be injected by the theme as `--zen-primary-color` */
-  --zen-primary-color: #0b57d0; /* This is the default blue color, in case the theme doesn't provide a primary color */
+  --zen-primary-color: #2868cf; /* This is the default blue color, in case the theme doesn't provide a primary color */
 
   /** Zen colors are generated automatically from the primary color */
   --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
-  --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 20%, white 80%);
+  --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, white 60%);
   --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 4%, white 96%);
 
   --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);