feat: manual theme picker (light/dark/system) in Settings

Theme previously followed only the OS's prefers-color-scheme, which
switches automatically on this user's Mac at sunset/sunrise. Adds an
explicit override in Settings: Light/Dark/System, System being the
previous (default) auto-follow-the-OS behavior.

Persisted client-side in localStorage (lib/theme.ts, same pattern as
language) rather than server-side like currency — it's a pure display
preference, and synchronous localStorage reads are what make the
anti-FOUC inline script in index.html possible. index.css already had the
[data-theme] CSS variables laid in ahead of time; only the JS to actually
set the attribute, and the Settings UI, were missing.

Covered by 2 new Playwright specs (theme-switcher.spec.ts) run against the
isolated e2e stack: explicit choice overrides a dark OS and survives
reload; switching back to "system" doesn't leave a stale forced theme.
This commit is contained in:
ZProger
2026-08-16 23:12:20 +03:00
parent 8e46726b4d
commit 75dd43c8e3
10 changed files with 157 additions and 4 deletions

View File

@@ -182,6 +182,10 @@ const ru = {
"settings.language": "Язык",
"settings.languageRussian": "Русский",
"settings.languageEnglish": "English",
"settings.theme": "Тема оформления",
"settings.themeLight": "Светлая",
"settings.themeDark": "Тёмная",
"settings.themeSystem": "Системная",
"settings.currency": "Основная валюта",
"settings.currencyHint":
"Меняет только отображение сумм — уже введённые значения не пересчитываются и не конвертируются.",
@@ -504,6 +508,10 @@ const en: Record<keyof typeof ru, string> = {
"settings.language": "Language",
"settings.languageRussian": "Русский",
"settings.languageEnglish": "English",
"settings.theme": "Theme",
"settings.themeLight": "Light",
"settings.themeDark": "Dark",
"settings.themeSystem": "System",
"settings.currency": "Primary currency",
"settings.currencyHint":
"Only changes how amounts are displayed — values you've already entered aren't recalculated or converted.",