fix(theme): dark theme + landing toggle now actually applies

Two bugs:
1. [data-theme="dark"] block was defined BEFORE :root in source CSS,
   so :root cascade overrode it. Moved to AFTER :root and bumped
   specificity to html[data-theme="dark"] to beat plain :root.
2. Theme toggle button only existed in the topbar, which is hidden
   on landing/login/sso-callback scenes. Added a ThemeToggle to
   the Landing header so users can flip theme from the home page.

Confidence: high
Scope-risk: narrow
This commit is contained in:
2026-06-14 11:52:02 +04:00
parent 6f8832d222
commit f1324b7539
7 changed files with 159 additions and 14 deletions
+24 -4
View File
@@ -2,7 +2,7 @@
import { motion } from "framer-motion";
import { useApp } from "../state/store";
import { liveMeta } from "../data/scenarios";
import { Sparkles, Arrow, Cmd, Bot, Pulse } from "../components/icons";
import { Sparkles, Arrow, Cmd, Bot, Pulse, Sun, Moon } from "../components/icons";
export default function Landing() {
const setScene = useApp((s) => s.setScene);
@@ -28,9 +28,12 @@ export default function Landing() {
<span className="brand-divider" />
<span className="brand-sub">Mission Control</span>
</div>
<button className="link-btn" onClick={() => setCmdOpen(true)}>
<Cmd size={13} /> Command <kbd>K</kbd>
</button>
<div className="landing-top-actions">
<ThemeToggle />
<button className="link-btn" onClick={() => setCmdOpen(true)}>
<Cmd size={13} /> Command <kbd>K</kbd>
</button>
</div>
</header>
<main className="landing-main">
@@ -132,3 +135,20 @@ export default function Landing() {
</div>
);
}
function ThemeToggle() {
const theme = useApp((s) => s.theme);
const setTheme = useApp((s) => s.setTheme);
const isDark = theme === "dark";
return (
<button
className="link-btn theme-toggle"
onClick={() => setTheme(isDark ? "light" : "dark")}
title={isDark ? "Switch to light theme" : "Switch to dark theme"}
aria-label="Toggle theme"
>
{isDark ? <Sun size={13} /> : <Moon size={13} />}
<span className="theme-toggle-label">{isDark ? "LIGHT" : "DARK"}</span>
</button>
);
}