zgaetano/deltacast-sdi-recorder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add light theme with data-theme toggle support

Browse source
This commit is contained in:
Zac Gaetano 2026-04-14 10:13:41 -04:00
parent 2e62f5822c
commit 51e7e8f327
1 changed files with 43 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
frontend/src/index.css
View file

@ -1,26 +1,53 @@
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;500;600;700;900&family=Barlow:wght@300;400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;500;600;700;900&family=Barlow:wght@300;400;500&display=swap');
:root { /* ── DARK THEME (default) ── */
:root,
[data-theme="dark"] {
--bg-deepest: #080a0e; --bg-deepest: #080a0e;
--bg-dark: #0d1117; --bg-dark: #0d1117;
--bg-panel: #111620; --bg-panel: #111620;
--bg-card: #141b28; --bg-card: #141b28;
--bg-card-hover: #1a2235; --bg-card-hover: #1a2235;
--border: #1e2d45; --border: #1e2d45;
--border-bright: #2a4060; --border-bright: #2a4060;
--dragon-blue: #1a3aff; --dragon-blue: #1a3aff;
--dragon-blue-dim: #0f2299; --dragon-blue-dim: #0f2299;
--accent-amber: #ff9a1a; --accent-amber: #ff9a1a;
--rec-red: #ff2020; --rec-red: #ff2020;
--rec-red-glow: rgba(255, 32, 32, 0.4); --rec-red-glow: rgba(255, 32, 32, 0.4);
--green-safe: #00e676; --green-safe: #00e676;
--text-primary: #e8eef8; --text-primary: #e8eef8;
--text-secondary: #7a8fa8; --text-secondary: #7a8fa8;
--text-muted: #3d5270; --text-muted: #3d5270;
--text-mono: #a8c4e0; --text-mono: #a8c4e0;
--font-ui: 'Barlow Condensed', sans-serif; --shadow-card: 0 2px 12px rgba(0,0,0,0.5);
--font-ui: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', sans-serif; --font-body: 'Barlow', sans-serif;
--font-mono: 'Share Tech Mono', monospace; --font-mono: 'Share Tech Mono', monospace;
--scanline-opacity: 0.025;
}
/* ── LIGHT THEME ── */
[data-theme="light"] {
--bg-deepest: #eef1f7;
--bg-dark: #dde3ee;
--bg-panel: #f4f6fb;
--bg-card: #ffffff;
--bg-card-hover: #f0f4ff;
--border: #c8d4e8;
--border-bright: #a0b4d0;
--dragon-blue: #1a3aff;
--dragon-blue-dim: #3a5aff;
--accent-amber: #d4780a;
--rec-red: #d41010;
--rec-red-glow: rgba(212, 16, 16, 0.25);
--green-safe: #00a855;
--text-primary: #0d1520;
--text-secondary: #3a5070;
--text-muted: #7a90aa;
--text-mono: #2a4060;
--shadow-card: 0 2px 12px rgba(0,0,0,0.1);
--scanline-opacity: 0;
} }
*, *::before, *::after { *, *::before, *::after {
@ -38,9 +65,10 @@ body {
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
transition: background 0.2s, color 0.2s;
} }
/* Scanline overlay */ /* Scanline overlay — visible only in dark mode */
body::before { body::before {
content: ''; content: '';
position: fixed; position: fixed;
@ -49,8 +77,8 @@ body::before {
to bottom, to bottom,
transparent 0px, transparent 0px,
transparent 2px, transparent 2px,
rgba(0, 0, 0, 0.025) 2px, rgba(0, 0, 0, var(--scanline-opacity)) 2px,
rgba(0, 0, 0, 0.025) 4px rgba(0, 0, 0, var(--scanline-opacity)) 4px
); );
pointer-events: none; pointer-events: none;
z-index: 9999; z-index: 9999;