diff --git a/app/globals.css b/app/globals.css
index 050e9f1..34b0561 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -145,6 +145,12 @@
html {
@apply font-sans;
}
+ :root {
+ color-scheme: light;
+ }
+ .dark {
+ color-scheme: dark;
+ }
}
/* Scrollbar styling */
diff --git a/app/layout.tsx b/app/layout.tsx
index 4fee975..2601489 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { AppShell } from "@/components/layout/AppShell";
+import { ThemeProvider } from "@/components/ThemeProvider";
import "./globals.css";
const geistSans = Geist({
@@ -31,10 +32,13 @@ export default function RootLayout({
return (
- {children}
+
+ {children}
+
);
diff --git a/components/ThemeProvider.tsx b/components/ThemeProvider.tsx
new file mode 100644
index 0000000..cb16184
--- /dev/null
+++ b/components/ThemeProvider.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+type Props = { children: React.ReactNode };
+
+/**
+ * `theme` / `light` | `dark` in localStorage (default dark, no system theme) — matches aauth.dev site.
+ */
+export function ThemeProvider({ children }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..25cee9a
--- /dev/null
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+ const { resolvedTheme, setTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) {
+ return (
+
+ );
+ }
+
+ const isDark = resolvedTheme === "dark";
+
+ return (
+
+ );
+}
diff --git a/components/layout/AppShell.tsx b/components/layout/AppShell.tsx
index 765819e..d0c526c 100644
--- a/components/layout/AppShell.tsx
+++ b/components/layout/AppShell.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
import { useState } from "react";
import { Menu } from "lucide-react";
import { Sidebar } from "./Sidebar";
+import { ThemeToggle } from "@/components/ThemeToggle";
const EXT_LINKS = [
{ label: "AAuth.dev", href: "https://aauth.dev" },
@@ -50,7 +51,8 @@ export function AppShell({ children }: { children: React.ReactNode }) {
-