63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import "tailwindcss/tailwind.css";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import NightModeToggle from "@/components/NightModeToggle";
|
|
import Navbar from "@/components/NavigationBar";
|
|
|
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const savedTheme = localStorage.getItem("theme");
|
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
|
|
const shouldEnableDark = savedTheme === "dark" || (!savedTheme && prefersDark);
|
|
setIsDarkMode(shouldEnableDark);
|
|
|
|
if (shouldEnableDark) {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}, []);
|
|
|
|
const toggleDarkMode = () => {
|
|
const newTheme = isDarkMode ? "light" : "dark";
|
|
setIsDarkMode(!isDarkMode);
|
|
localStorage.setItem("theme", newTheme);
|
|
|
|
document.documentElement.classList.toggle("dark", !isDarkMode);
|
|
};
|
|
|
|
return (
|
|
<html lang="en" className={isDarkMode ? "dark" : ""} suppressHydrationWarning>
|
|
<head>
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
})();
|
|
`,
|
|
}}
|
|
/>
|
|
</head>
|
|
<body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
|
|
<Navbar />
|
|
<main className="relative">{children}</main>
|
|
<div className="fixed bottom-4 right-4">
|
|
<NightModeToggle isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|