style: optimize theme provider and App layout

src/components/ThemeProvider.tsx

@@ -1,4 +1,5 @@
 import { createContext, type ReactNode, useEffect, useState } from "react";
+import { DateTime } from "luxon";
 
 export type Theme = "dark" | "light" | "system";
 
@@ -28,40 +29,40 @@ export function ThemeProvider({
 		() => (localStorage.getItem(storageKey) as Theme) || "system",
 	);
 
+	const [hour, setHour] = useState(() => DateTime.now().hour);
+
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setHour(DateTime.now().hour);
+		}, 60000);
+		return () => clearInterval(timer);
+	}, []);
+
 	useEffect(() => {
 		const root = window.document.documentElement;
 
 		root.classList.add("disable-transitions");
 		root.classList.remove("light", "dark");
 
+		let effectiveTheme = theme;
 		if (theme === "system") {
-			const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-				.matches
-				? "dark"
-				: "light";
-
-			root.classList.add(systemTheme);
-			const themeColor =
-				systemTheme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
-			document
-				.querySelector('meta[name="theme-color"]')
-				?.setAttribute("content", themeColor);
-			const timeoutId = window.setTimeout(() => {
-				root.classList.remove("disable-transitions");
-			}, 0);
-			return () => window.clearTimeout(timeoutId);
+			// Time-based theme: 18:00 - 06:00 is dark
+			const isNight = hour >= 18 || hour < 6;
+			effectiveTheme = isNight ? "dark" : "light";
 		}
 
-		root.classList.add(theme);
-		const themeColor = theme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
+		root.classList.add(effectiveTheme);
+		const themeColor =
+			effectiveTheme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
 		document
 			.querySelector('meta[name="theme-color"]')
 			?.setAttribute("content", themeColor);
+		
 		const timeoutId = window.setTimeout(() => {
 			root.classList.remove("disable-transitions");
 		}, 0);
 		return () => window.clearTimeout(timeoutId);
-	}, [theme]);
+	}, [theme, hour]);
 
 	const value = {
 		theme,