fix(7606): sync theme-color meta with client-side dark-mode switch

PR #7636 emits <meta name="theme-color"> server-side from
settings.skinVariants. That covers operators who hard-code a dark
toolbar in settings.json, but not the runtime path: pad.ts auto-flips
the toolbar to super-dark when enableDarkMode is on, the browser
reports prefers-color-scheme: dark, and no localStorage white-mode
override is set, plus the user can flip it via #options-darkmode.
Both paths run skinVariants.updateSkinVariantsClasses(), which until
now never touched the meta — so dark-mode users kept the light
#ffffff baseline and saw a white address bar above a dark toolbar
(stffen on #7606 after 2.7.3).

Push the toolbar-color lookup into updateSkinVariantsClasses so the
meta tracks every class change: the auto-switch on init, the user
toggle, and the skinVariants builder. Mirrors the CSS-source-order
table from src/node/utils/SkinColors.ts (last matching *-toolbar
token wins). When no meta is present (non-colibris skin, server
omits it) the helper is a no-op.

Adds Playwright coverage for both paths under
colorScheme: 'light' (manual toggle) and 'dark' (auto-switch on
dark-OS clients — the case stffen reported).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: JohnMcLear

src/static/js/skin_variants.ts

@@ -4,6 +4,34 @@
 const containers = ['editor', 'background', 'toolbar'];
 const colors = ['super-light', 'light', 'dark', 'super-dark'];
 
+// Mirrors src/node/utils/SkinColors.ts: toolbar variants in CSS source order
+// from src/static/skins/colibris/src/pad-variants.css. The last matching token
+// wins, so iterate in source order.
+const TOOLBAR_COLORS_IN_CSS_ORDER: Array<[string, string]> = [
+  ['super-light-toolbar', '#ffffff'],
+  ['light-toolbar', '#f2f3f4'],
+  ['super-dark-toolbar', '#485365'],
+  ['dark-toolbar', '#576273'],
+];
+
+// Keep <meta name="theme-color"> in sync with the toolbar the user actually
+// sees. The server emits a baseline derived from settings.skinVariants, but
+// pad.ts may flip the toolbar to super-dark on first paint (enableDarkMode
+// + prefers-color-scheme:dark + no localStorage white-mode override) and
+// the user can toggle via #options-darkmode. Without this, dark-mode users
+// keep the light meta and see a white address bar above a dark toolbar
+// (issue #7606 follow-up).
+const updateThemeColorMeta = (newClasses: string[]) => {
+  const meta = document.querySelector('meta[name="theme-color"]');
+  if (!meta) return;
+  const tokens = new Set(newClasses.join(' ').split(/\s+/).filter(Boolean));
+  let color = '#ffffff';
+  for (const [variant, c] of TOOLBAR_COLORS_IN_CSS_ORDER) {
+    if (tokens.has(variant)) color = c;
+  }
+  meta.setAttribute('content', color);
+};
+
 // add corresponding classes when config change
 const updateSkinVariantsClasses = (newClasses) => {
   const domsToUpdate = [
@@ -21,6 +49,8 @@ const updateSkinVariantsClasses = (newClasses) => {
   domsToUpdate.forEach((el) => { el.removeClass('full-width-editor'); });
 
   domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); });
+
+  updateThemeColorMeta(newClasses);
 };
 
 

src/tests/frontend-new/specs/theme_color_dark_mode.spec.ts

@@ -0,0 +1,42 @@
+import {expect, test} from '@playwright/test';
+import {goToNewPad} from '../helper/padHelper';
+
+const themeColor = (page: import('@playwright/test').Page) =>
+    page.locator('meta[name="theme-color"]').getAttribute('content');
+
+test.describe('light color scheme', () => {
+  test.use({colorScheme: 'light'});
+
+  test('theme-color meta tracks the dark-mode toggle', async ({page}) => {
+    await goToNewPad(page);
+    // Server emits the light baseline derived from settings.skinVariants.
+    expect(await themeColor(page)).toBe('#ffffff');
+
+    await page.locator('button[data-l10n-id="pad.toolbar.settings.title"]').click();
+    await expect(page.locator('#theme-toggle-row')).toBeVisible();
+
+    // Colibris styles the native checkbox via a sibling label; click the label
+    // so the toggle fires the real change event the production code listens on.
+    await page.locator('label[for="options-darkmode"]').click();
+    // pad.ts forces super-dark-toolbar (#485365) regardless of the configured
+    // light skinVariants, so the meta must follow the client-applied class.
+    await expect.poll(() => themeColor(page)).toBe('#485365');
+
+    await page.locator('label[for="options-darkmode"]').click();
+    await expect.poll(() => themeColor(page)).toBe('#ffffff');
+  });
+});
+
+test.describe('dark color scheme', () => {
+  test.use({colorScheme: 'dark'});
+
+  test('theme-color meta follows the auto dark-mode switch on dark-OS clients',
+      async ({page}) => {
+    await goToNewPad(page);
+    // pad.ts auto-switches to super-dark-toolbar when enableDarkMode is on,
+    // matchMedia(prefers-color-scheme:dark) matches, and no localStorage
+    // white-mode override is set. The meta must follow the applied class —
+    // this is the case stffen reported on issue #7606.
+    await expect.poll(() => themeColor(page)).toBe('#485365');
+  });
+});