diff --git a/app/layout.tsx b/app/layout.tsx
index 8a410a2..2fe9fa7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
import type { Metadata } from "next";
import "./globals.css";
+import Providers from "@/components/Providers";
export const metadata: Metadata = {
title: "MBO-Tech-IT | Docker, Kubernetes & Cloud-Infrastruktur",
@@ -24,8 +25,10 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
-
- {children}
+
+
+ {children}
+
);
}
diff --git a/components/Providers.tsx b/components/Providers.tsx
new file mode 100644
index 0000000..492da1d
--- /dev/null
+++ b/components/Providers.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..3660d57
--- /dev/null
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+ const { theme, setTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) return null;
+
+ const isDark = theme === "dark";
+
+ return (
+
+ );
+}
diff --git a/package-lock.json b/package-lock.json
index c6cad83..81f26c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"next": "^15.2.0",
+ "next-themes": "^0.4.6",
"nodemailer": "^8.0.6",
"react": "^19.0.0",
"react-dom": "^19.0.0"
@@ -1372,6 +1373,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 c3b6b95..2d771b4 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"next": "^15.2.0",
+ "next-themes": "^0.4.6",
"nodemailer": "^8.0.6",
"react": "^19.0.0",
"react-dom": "^19.0.0"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7f5a622..2e17e4e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
import type { Config } from "tailwindcss";
const config: Config = {
+ darkMode: "class",
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",