mirror of
https://github.com/Zproger/Aurum.git
synced 2026-10-13 02:56:39 +07:00
75dd43c8e3
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.
33 lines
1.4 KiB
HTML
33 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#0b0b0b" />
|
|
<title>Aurum — Личные финансы</title>
|
|
<script>
|
|
// Applies the saved theme (light/dark/system) to <html> before the
|
|
// first paint, so an explicit override never flashes the wrong theme
|
|
// for a frame while React/lib/theme.ts loads. "system" needs no
|
|
// attribute at all — index.css's prefers-color-scheme media query
|
|
// already handles that case with zero JS.
|
|
(function () {
|
|
var stored = localStorage.getItem("aurum:theme");
|
|
if (stored === "light" || stored === "dark") {
|
|
document.documentElement.setAttribute("data-theme", stored);
|
|
}
|
|
var isDark =
|
|
stored === "dark" || (stored !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
var meta = document.querySelector('meta[name="theme-color"]');
|
|
// Kept in sync by hand with index.css's --surface-0 light/dark values.
|
|
if (meta) meta.setAttribute("content", isDark ? "#0d0d0d" : "#f9f9f7");
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|