vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add light theme toggle

Browse source
This commit is contained in:
vince 2026-06-20 00:49:22 +02:00
parent bbc81cea0d
commit cdb269e505
17 changed files with 415 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/lib/ui/tokens.css
View file

@ -1,14 +1,27 @@
:root {
:root,
[data-ui-theme="dark"] {
color-scheme: dark;
--ui-color-canvas: #020302;
--ui-color-surface: #060706;
--ui-color-surface-raised: #0b0d0c;
--ui-color-surface-panel: rgba(3, 4, 3, 0.86);
--ui-color-surface-module: rgba(6, 8, 7, 0.82);
--ui-color-surface-footer: rgba(2, 3, 2, 0.92);
--ui-color-surface-inset: #030403;
--ui-color-surface-icon: #050605;
--ui-color-line: rgba(244, 244, 244, 0.16);
--ui-color-line-strong: rgba(244, 244, 244, 0.32);
--ui-color-grid-line: rgba(255, 255, 255, 0.035);
--ui-color-frame-spine: rgba(255, 255, 255, 0.08);
--ui-color-frame-wash: rgba(0, 0, 0, 0.18);
--ui-color-card-gradient-start: rgba(13, 15, 14, 0.82);
--ui-color-card-gradient-end: rgba(2, 3, 2, 0.92);
--ui-color-hover: rgba(244, 244, 244, 0.035);
--ui-color-text: #f3f4ed;
--ui-color-muted: #8d948c;
--ui-color-dim: #555b55;
--ui-color-accent: #d7ff00;
--ui-color-accent-contrast: #050605;
--ui-color-ok: #bfff00;
--ui-color-warning: #ffb020;
--ui-color-danger: #ff1744;
@ -33,6 +46,37 @@
--ui-focus-ring: 0 0 0 2px var(--ui-color-canvas), 0 0 0 4px var(--ui-color-accent);
}
[data-ui-theme="light"] {
color-scheme: light;
--ui-color-canvas: #f3f5ed;
--ui-color-surface: #ffffff;
--ui-color-surface-raised: #eef1e7;
--ui-color-surface-panel: rgba(255, 255, 255, 0.9);
--ui-color-surface-module: rgba(255, 255, 255, 0.84);
--ui-color-surface-footer: rgba(248, 250, 241, 0.94);
--ui-color-surface-inset: #e4e8db;
--ui-color-surface-icon: #f8faf1;
--ui-color-line: rgba(19, 25, 19, 0.18);
--ui-color-line-strong: rgba(19, 25, 19, 0.34);
--ui-color-grid-line: rgba(19, 25, 19, 0.055);
--ui-color-frame-spine: rgba(19, 25, 19, 0.1);
--ui-color-frame-wash: rgba(255, 255, 255, 0.48);
--ui-color-card-gradient-start: rgba(255, 255, 255, 0.92);
--ui-color-card-gradient-end: rgba(230, 235, 221, 0.88);
--ui-color-hover: rgba(19, 25, 19, 0.055);
--ui-color-text: #11170f;
--ui-color-muted: #5d665a;
--ui-color-dim: #7d8779;
--ui-color-accent: #516f00;
--ui-color-accent-contrast: #ffffff;
--ui-color-ok: #4c7400;
--ui-color-warning: #a45b00;
--ui-color-danger: #bd173f;
--ui-color-stale: #596975;
--ui-color-unavailable: #6c7479;
--ui-shadow-hard: 0 0 0 1px rgba(81, 111, 0, 0.18) inset;
}
html {
background: var(--ui-color-canvas);
}
@ -42,8 +86,8 @@ body {
min-height: 100vh;
margin: 0;
background:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px),
var(--ui-color-canvas);
background-size: 48px 48px, 48px 48px, auto;
color: var(--ui-color-text);