fix: enforce dark theme by default and update CSS variables
This commit is contained in:
parent
aecf6bf703
commit
a4c3d36e59
@ -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)
|
||||||
}, [])
|
}, [])
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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`}
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user