diff --git a/app/globals.css b/app/globals.css
index a2dc41e..2bbb2cf 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,29 @@
@import "tailwindcss";
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
:root {
- --background: #ffffff;
- --foreground: #171717;
+ --background: #ffffff;
+ --foreground: #171717;
}
@theme inline {
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --font-sans: var(--font-geist-sans);
- --font-mono: var(--font-geist-mono);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --font-sans: var(--font-geist-sans);
+ --font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
+ :root {
+ --background: #0a0a0a;
+ --foreground: #ededed;
+ }
}
body {
- background: var(--background);
- color: var(--foreground);
- font-family: Arial, Helvetica, sans-serif;
-}
+ background: var(--background);
+ color: var(--foreground);
+ font-family: Arial, Helvetica, sans-serif;
+ transition: background-color 0.3s ease, color 0.3s ease;
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..0f7e0fe 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,7 @@
import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeToggle } from "../components/ThemeToggle";
import "./globals.css";
const geistSans = Geist({
@@ -23,11 +25,14 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
-
- {children}
+
+
+
+
+ {children}
+
);
diff --git a/components/ThemeToggle/index.tsx b/components/ThemeToggle/index.tsx
new file mode 100644
index 0000000..1f052ab
--- /dev/null
+++ b/components/ThemeToggle/index.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+ const { theme, setTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setTimeout(() => setMounted(true), 10);
+ }, []);
+
+ if (!mounted) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ );
+}
diff --git a/package-lock.json b/package-lock.json
index 04b7984..06b5d52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"next": "16.1.4",
+ "next-themes": "^0.4.6",
"react": "19.2.3",
"react-dom": "19.2.3"
},
@@ -5002,6 +5003,16 @@
}
}
},
+ "node_modules/next-themes": {
+ "version": "0.4.6",
+ "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+ "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+ }
+ },
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 9c49a55..d60f3d5 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"next": "16.1.4",
+ "next-themes": "^0.4.6",
"react": "19.2.3",
"react-dom": "19.2.3"
},
@@ -25,4 +26,4 @@
"typescript": "^5"
},
"types": "json-schema"
-}
\ No newline at end of file
+}