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:
+10
-10
@@ -9,16 +9,6 @@
|
||||
- 1px rules, square edges, monospace operational density
|
||||
===================================================================== */
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bp-paper: #0c1322;
|
||||
--bp-paper-2: #1a2740;
|
||||
--bp-paper-3: #243453;
|
||||
--bp-navy: #e6edf7;
|
||||
--bp-navy-2: #d5dde9;
|
||||
--bp-muted: #7a8aa8;
|
||||
--bp-muted-2: #4a5b80;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Doctrinal hex tokens — declared once, referenced everywhere via var(). */
|
||||
--bp-paper: #f5f7fb;
|
||||
@@ -80,6 +70,16 @@
|
||||
--radius-xl: 0;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--bp-paper: #0c1322;
|
||||
--bp-paper-2: #1a2740;
|
||||
--bp-paper-3: #243453;
|
||||
--bp-navy: #e6edf7;
|
||||
--bp-navy-2: #d5dde9;
|
||||
--bp-muted: #7a8aa8;
|
||||
--bp-muted-2: #4a5b80;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
Base
|
||||
===================================================================== */
|
||||
|
||||
+24
-4
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user