fix: enforce dark theme by default and update CSS variables

This commit is contained in:
seaznCode 2026-01-27 18:49:00 +01:00
parent aecf6bf703
commit a4c3d36e59
3 changed files with 5 additions and 21 deletions

View File

@ -106,18 +106,9 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
return 'U' return 'U'
} }
// Initial theme (dark/light) + mark mounted + start header animation // Initial theme (force dark) + mark mounted + start header animation
useEffect(() => { useEffect(() => {
const stored = localStorage.getItem('theme')
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
const useDark = stored === 'dark' || (!stored && prefersDark)
if (useDark) {
document.documentElement.classList.add('dark') document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
setMounted(true) setMounted(true)
setAnimateIn(true) setAnimateIn(true)
}, []) }, [])

View File

@ -1,8 +1,8 @@
@import "tailwindcss"; @import "tailwindcss";
:root { :root {
--background: #ffffff; --background: #0a0a0a;
--foreground: #171717; --foreground: #ededed;
/* Brand Colors */ /* Brand Colors */
--color-brand-accent: #8D6B1D; --color-brand-accent: #8D6B1D;
@ -19,13 +19,6 @@
/* Theme variables moved to :root for compatibility */ /* Theme variables moved to :root for compatibility */
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
html { html {
overflow-x: hidden; overflow-x: hidden;
} }

View File

@ -28,7 +28,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en" > <html lang="en" className="dark">
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors`} className={`${geistSans.variable} ${geistMono.variable} antialiased bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors`}
> >