diff --git a/app/globals.css b/app/globals.css
index cf67854..ecd7a8b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,6 +6,10 @@
color-scheme: light;
}
+.dark {
+ color-scheme: dark;
+}
+
* {
@apply box-border;
}
diff --git a/app/layout.tsx b/app/layout.tsx
index 1684f24..5e1b9b7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,7 +9,7 @@ export const metadata = {
export default function RootLayout({ children }: { children: ReactNode }) {
return (
-
+
{children}
diff --git a/app/page.tsx b/app/page.tsx
index a1b5596..16dc2c0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@
import { useMemo, useState } from "react";
import { CompareForm } from "../components/compare-form";
+import { ThemeToggle } from "../components/theme-toggle";
import { ResultDashboard } from "../components/result-dashboard";
import { DashboardSkeleton } from "../components/skeletons";
import { UserResult } from "@/types/user-result";
@@ -74,7 +75,7 @@ export default function HomePage() {
DevImpact
-
+
diff --git a/app/providers.tsx b/app/providers.tsx
index 9b467c1..27206f5 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -1,11 +1,14 @@
"use client";
+import { ThemeProvider } from "next-themes";
import { TooltipProvider } from "@/components/ui/tooltip";
export default function Providers({ children }: { children: React.ReactNode }) {
return (
-
- {children}
-
+
+
+ {children}
+
+
);
}
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 0000000..8972acf
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+ const { theme, setTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => setMounted(true), []);
+
+ if (!mounted) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}