mirror of
https://github.com/Zproger/Aurum.git
synced 2026-10-13 11:06:40 +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.
118 lines
2.9 KiB
CSS
118 lines
2.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/*
|
|
* Semantic tokens, light values first. Dark values are re-declared for both
|
|
* the OS-level `prefers-color-scheme` and the manual `[data-theme]` toggle
|
|
* (Settings → Theme, see lib/theme.ts), per the dataviz skill's reference
|
|
* palette (references/palette.md).
|
|
*/
|
|
:root {
|
|
color-scheme: light;
|
|
--surface-0: #f9f9f7; /* page plane */
|
|
--surface-1: #fcfcfb; /* card surface */
|
|
--surface-2: #f2f1ed; /* hover/active wash */
|
|
--text-primary: #0b0b0b;
|
|
--text-secondary: #52514e;
|
|
--text-muted: #898781;
|
|
--border: rgba(11, 11, 11, 0.1);
|
|
--gridline: #e1e0d9;
|
|
|
|
--success: #006300;
|
|
--danger: #c1302a;
|
|
|
|
--series-1: #2a78d6; /* blue */
|
|
--series-2: #eb6834; /* orange */
|
|
--series-3: #1baf7a; /* aqua */
|
|
--series-4: #eda100; /* yellow */
|
|
--series-5: #e87ba4; /* magenta */
|
|
--series-6: #008300; /* green */
|
|
--series-7: #4a3aa7; /* violet */
|
|
--series-8: #e34948; /* red */
|
|
--series-other: #898781;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
color-scheme: dark;
|
|
--surface-0: #0d0d0d;
|
|
--surface-1: #1a1a19;
|
|
--surface-2: #232322;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #c3c2b7;
|
|
--text-muted: #898781;
|
|
--border: rgba(255, 255, 255, 0.1);
|
|
--gridline: #2c2c2a;
|
|
|
|
--success: #0ca30c;
|
|
--danger: #e66767;
|
|
|
|
--series-1: #3987e5;
|
|
--series-2: #d95926;
|
|
--series-3: #199e70;
|
|
--series-4: #c98500;
|
|
--series-5: #d55181;
|
|
--series-6: #008300;
|
|
--series-7: #9085e9;
|
|
--series-8: #e66767;
|
|
}
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--surface-0: #0d0d0d;
|
|
--surface-1: #1a1a19;
|
|
--surface-2: #232322;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #c3c2b7;
|
|
--text-muted: #898781;
|
|
--border: rgba(255, 255, 255, 0.1);
|
|
--gridline: #2c2c2a;
|
|
|
|
--success: #0ca30c;
|
|
--danger: #e66767;
|
|
|
|
--series-1: #3987e5;
|
|
--series-2: #d95926;
|
|
--series-3: #199e70;
|
|
--series-4: #c98500;
|
|
--series-5: #d55181;
|
|
--series-6: #008300;
|
|
--series-7: #9085e9;
|
|
--series-8: #e66767;
|
|
}
|
|
|
|
@theme {
|
|
--color-surface-0: var(--surface-0);
|
|
--color-surface-1: var(--surface-1);
|
|
--color-surface-2: var(--surface-2);
|
|
--color-text-primary: var(--text-primary);
|
|
--color-text-secondary: var(--text-secondary);
|
|
--color-text-muted: var(--text-muted);
|
|
--color-border: var(--border);
|
|
--color-gridline: var(--gridline);
|
|
--color-success: var(--success);
|
|
--color-danger: var(--danger);
|
|
|
|
--color-series-1: var(--series-1);
|
|
--color-series-2: var(--series-2);
|
|
--color-series-3: var(--series-3);
|
|
--color-series-4: var(--series-4);
|
|
--color-series-5: var(--series-5);
|
|
--color-series-6: var(--series-6);
|
|
--color-series-7: var(--series-7);
|
|
--color-series-8: var(--series-8);
|
|
--color-series-other: var(--series-other);
|
|
|
|
--font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--surface-0);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
* {
|
|
border-color: var(--color-border);
|
|
}
|