pyr0ball
58b179b275
- theme.css: CSS custom properties for both modes (surface, accent, text, sev, badge); .dark class override; smooth 0.15s transitions - uno.config.ts: colors now reference var() — all semantic classes auto-switch with the .dark class; dark: 'class' strategy enabled - main.ts: apply saved preference (localStorage ts-theme) or prefers-color-scheme before first paint to prevent flash - App.vue: ☾/☀ toggle button persists choice to localStorage - IncidentsView: severityStyle() uses badge CSS variables via inline style — fixes /opacity modifier incompatibility with CSS vars
52 lines
1.7 KiB
CSS
52 lines
1.7 KiB
CSS
/* Turnstone theme — light (default) and dark override via .dark on <html> */
|
|
|
|
:root {
|
|
--color-surface: #f8fafc;
|
|
--color-surface-raised: #f1f5f9;
|
|
--color-surface-border: #e2e8f0;
|
|
--color-accent: #2563eb;
|
|
--color-accent-muted: #dbeafe;
|
|
--color-text-primary: #0f172a;
|
|
--color-text-muted: #475569;
|
|
--color-text-dim: #94a3b8;
|
|
|
|
/* severity text colors */
|
|
--color-sev-debug: #6b7280;
|
|
--color-sev-info: #2563eb;
|
|
--color-sev-warn: #d97706;
|
|
--color-sev-error: #dc2626;
|
|
--color-sev-critical: #b91c1c;
|
|
|
|
/* severity badge — explicit bg + text pairs (no opacity hacks) */
|
|
--badge-low-bg: #f1f5f9; --badge-low-text: #475569;
|
|
--badge-medium-bg: #fef3c7; --badge-medium-text: #b45309;
|
|
--badge-high-bg: #ffedd5; --badge-high-text: #c2410c;
|
|
--badge-critical-bg: #fee2e2; --badge-critical-text: #b91c1c;
|
|
}
|
|
|
|
.dark {
|
|
--color-surface: #0f1117;
|
|
--color-surface-raised: #161b25;
|
|
--color-surface-border: #1e2636;
|
|
--color-accent: #4e9af1;
|
|
--color-accent-muted: #2a4a72;
|
|
--color-text-primary: #e2e8f0;
|
|
--color-text-muted: #94a3b8;
|
|
--color-text-dim: #475569;
|
|
|
|
--color-sev-debug: #6b7280;
|
|
--color-sev-info: #60a5fa;
|
|
--color-sev-warn: #fbbf24;
|
|
--color-sev-error: #f87171;
|
|
--color-sev-critical: #ef4444;
|
|
|
|
--badge-low-bg: #1e293b; --badge-low-text: #94a3b8;
|
|
--badge-medium-bg: #451a03; --badge-medium-text: #fbbf24;
|
|
--badge-high-bg: #431407; --badge-high-text: #fb923c;
|
|
--badge-critical-bg: #450a0a; --badge-critical-text: #f87171;
|
|
}
|
|
|
|
/* Smooth theme transitions */
|
|
*, *::before, *::after {
|
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
}
|