setting up dark/white mode. fixed some other small things

2025-12-18 21:06:08 -05:00
parent 7f3818f795
commit c6d1bce771
11 changed files with 260 additions and 107 deletions
@@ -2,7 +2,6 @@
 import "./globals.css";
 import type { ReactNode } from "react";
 import { AuthProvider } from "@/context/AuthContext";
-
 import { Banner } from "@/components/Banner";

 export const metadata = {
@@ -13,17 +12,31 @@ export const metadata = {
  description: "Build rifles smarter, not harder.",
 };

+const themeScript = `
+(function () {
+  try {
+    const storedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const theme = storedTheme || (prefersDark ? "dark" : "light");
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  } catch (_) {}
+})();
+`;
+
 export default function RootLayout({ children }: { children: ReactNode }) {
  return (
-    <html lang="en">
-      <body className="bg-black text-zinc-50">
-        
-        <AuthProvider>
-        <Banner />
-        {children}
-        </AuthProvider>
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>

+      <body className="bg-white text-zinc-950 dark:bg-black dark:text-zinc-50">
+        {" "}
+        <AuthProvider>
+          <Banner />
+          {children}
+        </AuthProvider>
      </body>
    </html>
  );
-}
+}