feat: add persistent theme switcher
This commit is contained in:
@@ -1,50 +1,38 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--canvas: #f2f5ee;
|
||||
--surface-elevated: #ffffff;
|
||||
--surface-raised: #fbfcf9;
|
||||
--surface-control: #f3f6f1;
|
||||
--text-primary: #092226;
|
||||
--text-secondary: #526662;
|
||||
--text-tertiary: #647572;
|
||||
--canvas: light-dark(#f2f5ee, #071719);
|
||||
--surface-elevated: light-dark(#ffffff, #0d2325);
|
||||
--surface-raised: light-dark(#fbfcf9, #10282a);
|
||||
--surface-control: light-dark(#f3f6f1, #0a1d1f);
|
||||
--text-primary: light-dark(#092226, #edf5ef);
|
||||
--text-secondary: light-dark(#526662, #b8c7c3);
|
||||
--text-tertiary: light-dark(#647572, #93a7a2);
|
||||
--text-on-dark: #f5f8f3;
|
||||
--border-strong: #cbd6ce;
|
||||
--border-subtle: #d6dfd7;
|
||||
--shadow-color: #14333812;
|
||||
--border-strong: light-dark(#cbd6ce, #3a5658);
|
||||
--border-subtle: light-dark(#d6dfd7, #294244);
|
||||
--shadow-color: light-dark(#14333812, #00000052);
|
||||
--paper: var(--canvas);
|
||||
--surface: var(--surface-elevated);
|
||||
--surface-soft: var(--surface-raised);
|
||||
--surface-field: var(--surface-control);
|
||||
--ink: var(--text-primary);
|
||||
--text: var(--text-primary);
|
||||
--text-muted: var(--text-secondary);
|
||||
--text-subtle: var(--text-tertiary);
|
||||
--line: var(--border-strong);
|
||||
--border: var(--border-strong);
|
||||
--border-soft: var(--border-subtle);
|
||||
--focus: light-dark(#7da529, #c9f45b);
|
||||
--success: light-dark(#426315, #c9ec8a);
|
||||
--success-soft: light-dark(#e2efcf, #243e25);
|
||||
--warning: light-dark(#73550c, #f3ce7a);
|
||||
--warning-soft: light-dark(#fff0c7, #46391d);
|
||||
--danger: light-dark(#842f25, #ffafa3);
|
||||
--danger-soft: light-dark(#f5d8d2, #4b2928);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--canvas: #071719;
|
||||
--surface-elevated: #0d2325;
|
||||
--surface-raised: #10282a;
|
||||
--surface-control: #0a1d1f;
|
||||
--text-primary: #edf5ef;
|
||||
--text-secondary: #b8c7c3;
|
||||
--text-tertiary: #93a7a2;
|
||||
--text-on-dark: #f4f8f5;
|
||||
--border-strong: #3a5658;
|
||||
--border-subtle: #294244;
|
||||
--shadow-color: #00000052;
|
||||
--paper: var(--canvas);
|
||||
--surface: var(--surface-elevated);
|
||||
--surface-soft: var(--surface-raised);
|
||||
--surface-field: var(--surface-control);
|
||||
--ink: var(--text-primary);
|
||||
--text: var(--text-primary);
|
||||
--text-muted: var(--text-secondary);
|
||||
--text-subtle: var(--text-tertiary);
|
||||
--line: var(--border-strong);
|
||||
--border: var(--border-strong);
|
||||
--border-soft: var(--border-subtle);
|
||||
--focus: #c9f45b;
|
||||
--success: #c9ec8a;
|
||||
--success-soft: #243e25;
|
||||
--warning: #f3ce7a;
|
||||
--warning-soft: #46391d;
|
||||
--danger: #ffafa3;
|
||||
--danger-soft: #4b2928;
|
||||
}
|
||||
:root[data-theme="light"] { color-scheme: light; }
|
||||
:root[data-theme="dark"] { color-scheme: dark; }
|
||||
|
||||
body { background: var(--canvas); color: var(--text-primary); }
|
||||
.brand-name span, .topbar nav a, .live-badge, .eyebrow, .overline,
|
||||
@@ -71,9 +59,9 @@
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
|
||||
.alpha-banner { background: linear-gradient(90deg, #132a26, #102426); color: var(--text-secondary); border-color: var(--border-strong); }
|
||||
.alpha-banner { background: linear-gradient(90deg, light-dark(#e8efdf, #132a26), light-dark(#f7f9f3, #102426)); color: var(--text-secondary); border-color: var(--border-strong); }
|
||||
.alpha-banner strong { color: var(--text-primary); }
|
||||
.alpha-banner__cta { background: var(--lime); color: #082226; }
|
||||
.alpha-banner__cta { background: light-dark(var(--deep), var(--lime)); color: light-dark(#fff, #082226); }
|
||||
|
||||
.spot-card:hover { background: var(--surface-raised); border-color: #6f8988; box-shadow: 0 18px 40px var(--shadow-color); }
|
||||
.report-form input, .report-form textarea, .report-form select,
|
||||
@@ -85,24 +73,31 @@
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
|
||||
.signal-card { background: linear-gradient(145deg, #20291f, #151f20); border-color: #756b3d; }
|
||||
.signal-card { background: linear-gradient(145deg, light-dark(#fffdf5, #20291f), light-dark(#f8f5e9, #151f20)); border-color: light-dark(#d6cda9, #756b3d); }
|
||||
.signal-card > p, .signal-card dd, .signal-heading p { color: var(--text-secondary); }
|
||||
.signal-card dt { color: #b9ae82; }
|
||||
.signal-card .missing-note { background: #453c20; color: #f0d889; }
|
||||
.signal-card .data-passport { background: #172628; border-color: #59605a; }
|
||||
.signal-card dt { color: light-dark(#776f56, #b9ae82); }
|
||||
.signal-card .missing-note { background: light-dark(#efe5bd, #453c20); color: light-dark(#6b550f, #f0d889); }
|
||||
.signal-card .data-passport { background: light-dark(#fffdf7, #172628); border-color: light-dark(#ddd3af, #59605a); }
|
||||
.source-chip { background: color-mix(in srgb, var(--chip) 24%, var(--surface-elevated)); }
|
||||
.notice.success { background: var(--success-soft); color: var(--success); }
|
||||
.notice.warning, .data-quality { background: var(--warning-soft); color: var(--warning); }
|
||||
.notice.error { background: var(--danger-soft); color: var(--danger); }
|
||||
.moderation-summary blockquote { background: var(--surface-raised); color: var(--text-secondary); }
|
||||
.moderation-actions .reject { background: var(--danger-soft); color: var(--danger); }
|
||||
.moderation-actions .delete { color: var(--danger); border-color: #82504c; }
|
||||
.moderation-actions .delete { color: var(--danger); border-color: light-dark(#d8aaa1, #82504c); }
|
||||
|
||||
.header-tools { justify-self: end; display: flex; align-items: center; gap: 14px; min-width: 0; }
|
||||
.theme-switcher { display: inline-flex; padding: 3px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-elevated); }
|
||||
.theme-switcher button { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 11px; }
|
||||
.theme-switcher button[aria-pressed="true"] { background: var(--deep); color: var(--lime); box-shadow: 0 2px 8px var(--shadow-color); }
|
||||
.theme-switcher button:focus-visible { outline-offset: 2px; }
|
||||
.theme-switcher b { font: inherit; }
|
||||
@media (max-width: 1320px) { .header-tools .live-badge { display: none; } }
|
||||
@media (max-width: 720px) { .header-tools { margin-left: auto; } .theme-switcher button { width: 34px; justify-content: center; padding: 0; } .theme-switcher b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
|
||||
.activity-timeline { background: var(--surface-elevated); border-color: var(--border-subtle); }
|
||||
.timeline-chart { border-color: var(--border-strong); background: repeating-linear-gradient(to top, transparent 0, transparent 35px, #294244 36px); }
|
||||
.timeline-chart { border-color: var(--border-strong); background: repeating-linear-gradient(to top, transparent 0, transparent 35px, var(--border-subtle) 36px); }
|
||||
.timeline-slot strong { color: var(--text-primary); }
|
||||
.timeline-slot small, .activity-legend { color: var(--text-tertiary); }
|
||||
}
|
||||
|
||||
@media print {
|
||||
:root { color-scheme: light; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user