mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-03-28 03:29:25 +01:00
b1edef27e8
Add a warm charcoal dark mode ("Night Ops") using CSS variable swapping
under [data-theme="dark"]. All 23 desert palette variables are overridden
with dark-mode counterparts, and ~313 generic Tailwind classes (bg-white,
text-gray-*, border-gray-*) are replaced with semantic tokens.
Infrastructure:
- CSS variable overrides in app.css for both themes
- ThemeProvider + useTheme hook (localStorage + KV store sync)
- ThemeToggle component (moon/sun icons, "Night Ops"/"Day Ops" labels)
- FOUC prevention script in inertia_layout.edge
- Toggle placed in StyledSidebar and Footer for access on every page
Color replacements across 50 files:
- bg-white → bg-surface-primary
- bg-gray-50/100 → bg-surface-secondary
- text-gray-900/800 → text-text-primary
- text-gray-600/500 → text-text-secondary/text-text-muted
- border-gray-200/300 → border-border-subtle/border-border-default
- text-desert-white → text-white (fixes invisible text on colored bg)
- Button hover/active states use dedicated btn-green-hover/active vars
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
35 lines
952 B
Plaintext
35 lines
952 B
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
|
|
|
|
<title inertia>Project N.O.M.A.D</title>
|
|
|
|
<script>
|
|
(function() {
|
|
try {
|
|
var theme = localStorage.getItem('nomad:theme');
|
|
if (theme === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
}
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
|
|
@stack('dumper')
|
|
@viteReactRefresh()
|
|
@inertiaHead()
|
|
@vite(['inertia/app/app.tsx', `inertia/pages/${page.component}.tsx`])
|
|
</head>
|
|
|
|
<body class="min-h-screen w-screen font-sans">
|
|
@inertia()
|
|
</body>
|
|
|
|
</html> |