NixReaper
ddb51a8b4d
Add ThemeContext (dark/light, persisted to localStorage, applied as data-theme on <html>). Theme toggle is a sun/moon flip switch at the right end of the dashboard info bar. CSS overrides in index.css target every hardcoded Tailwind arbitrary colour class used across all pages via [data-theme="light"] selectors, so the entire panel switches without touching individual page files. Light palette: page #f0f4f8, cards/sidebar #ffffff, hover #f1f5f9, borders #e2e8f0, text #0f172a. Chart tooltip is made theme-aware via inline-style interpolation since Tailwind CSS overrides cannot reach Recharts inline styles.
90 lines
3.1 KiB
CSS
90 lines
3.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--bg-primary: #0f1117;
|
|
--bg-secondary: #1a1d27;
|
|
--bg-card: #1e2130;
|
|
--border: #2a2d3e;
|
|
--text-primary: #e2e8f0;
|
|
--text-muted: #64748b;
|
|
--accent: #6366f1;
|
|
--accent-hover: #4f46e5;
|
|
--success: #10b981;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-secondary);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #3a3d4e;
|
|
}
|
|
|
|
/* ── Light theme ─────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="light"] {
|
|
--bg-primary: #f0f4f8;
|
|
--bg-secondary: #ffffff;
|
|
--bg-card: #f1f5f9;
|
|
--border: #e2e8f0;
|
|
--text-primary: #0f172a;
|
|
--text-muted: #64748b;
|
|
}
|
|
|
|
[data-theme="light"] body {
|
|
background-color: #f0f4f8;
|
|
color: #0f172a;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
|
|
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
|
|
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
|
|
/* ── Background overrides ──────────────────────────────────────────────── */
|
|
/* Page background (darkest) */
|
|
[data-theme="light"] .bg-\[\#0f1117\] { background-color: #f0f4f8 !important; }
|
|
/* Cards / sidebar */
|
|
[data-theme="light"] .bg-\[\#1a1d27\] { background-color: #ffffff !important; }
|
|
/* Hover / alternate rows */
|
|
[data-theme="light"] .bg-\[\#1e2130\] { background-color: #f1f5f9 !important; }
|
|
|
|
/* ── Border overrides ──────────────────────────────────────────────────── */
|
|
[data-theme="light"] .border-\[\#2a2d3e\] { border-color: #e2e8f0 !important; }
|
|
|
|
/* ── Text overrides ────────────────────────────────────────────────────── */
|
|
[data-theme="light"] .text-white { color: #0f172a !important; }
|
|
[data-theme="light"] .text-\[\#94a3b8\] { color: #475569 !important; }
|
|
[data-theme="light"] .text-\[\#64748b\] { color: #64748b !important; }
|
|
[data-theme="light"] .text-\[\#4a5568\] { color: #94a3b8 !important; }
|
|
|
|
/* ── Input fields ──────────────────────────────────────────────────────── */
|
|
[data-theme="light"] input { color: #0f172a !important; }
|
|
[data-theme="light"] input::placeholder { color: #94a3b8 !important; }
|