feat(settings): replicate the WorkBuddy appearance panel and dark theme (TODO 11)

Recover the WorkBuddy 5.8.3 appearance page from REA evidence (appearance-DMmhwsxq.css + tokens-Df-i-zsO.css): 44 recovered .appearance-* rules, scoped light/dark tokens, original geometry (panel [232,40,638,640], preview 634x317, grid 634x218.391, cards 118.797x79.188) and the two REA-exported preview images with provenance sha256.

Wire the panel into SettingsDialog with only the requested light/dark cards, add scoped tokens to the settings shell so the dark theme no longer renders a white window with near-white text, and verify with scripts/verify-appearance-settings.cjs (21 assertions: geometry, instant switch, cross-window sync, persistence, dark/light surface sampling with contrast >= 4.5, no renderer errors). Update the legacy nav/account/desktop appearance verifiers to the new .appearance-card selectors.
This commit is contained in:
xiaohan.yuan committed 2026-10-17 09:27:59 +08:00
1 parent 7b68d9eb25
commit b36b52831b
25 files changed
+727 -21

No files matched your search

+3 -3
View File
@@ -92,7 +92,7 @@ if (!process.versions.electron) {
await step('ui-dark-theme-and-reused-settings-navigation')
await openSettings('appearance'); observe(settings)
await click('[data-settings-tab="appearance"]', settings)
await clickText('.segmented__item', '深色', settings)
await click('[aria-label="深色"].appearance-card', settings)
await wait('document.documentElement.dataset.theme==="dark"', 'main receives dark appearance')
let theme = await themeSnapshot('dark-selected-in-native-settings')
check('native UI dark changes both renderers and persistent shared storage', [theme.main, theme.settings], [['dark', 'dark'], ['dark', 'dark']])
@@ -100,7 +100,7 @@ if (!process.versions.electron) {
const previous = settings.id
await openSettings('model'); await wait('!!document.querySelector(".models-settings-panel")', 'reused settings navigates to actual models panel', settings)
check('openSettings(model) reuses existing native window', settings.id, previous)
check('reused settings actually navigated away from appearance', await read('!!document.querySelector(".models-settings-panel")&&!document.querySelector(".segmented")', settings), true)
check('reused settings actually navigated away from appearance', await read('!!document.querySelector(".models-settings-panel")&&!document.querySelector(".appearance-panel")', settings), true)
await click('.settings-window-close', settings)
for (let i = 0; i < 150 && !settings.isDestroyed(); i++) await pause(20)
check('settings close destroys actual native window', settings.isDestroyed(), true)
@@ -108,7 +108,7 @@ if (!process.versions.electron) {
check('reopened settings uses a fresh native window', settings.id !== previous, true)
theme = await themeSnapshot('reopened-settings-persists-dark')
check('native settings reopen preserves shared dark appearance', [theme.main, theme.settings], [['dark', 'dark'], ['dark', 'dark']])
await clickText('.segmented__item', '浅色', settings)
await click('[aria-label="浅色"].appearance-card', settings)
await wait('document.documentElement.dataset.theme==="light"', 'main receives light appearance')
theme = await themeSnapshot('light-restored-in-native-settings')
check('native UI light restores both renderers and storage', [theme.main, theme.settings], [['light', 'light'], ['light', 'light']])