From 43565b4099752d8c058c7b114f33bfae4c00936b Mon Sep 17 00:00:00 2001
From: IM23a-cernik <cernik@bzz.ch>
Date: Thu, 20 Mar 2025 10:00:00 +0100
Subject: [PATCH] added dark/light mode toggle

---
 src/app/globals.css               | 119 ++++++++++++++++++++++++++++++
 src/app/layout.js                 |  71 ++++++++++--------
 src/components/mode-toggle.jsx    |  22 ++++++
 src/components/theme-provider.jsx |   8 ++
 4 files changed, 191 insertions(+), 29 deletions(-)
 create mode 100644 src/components/mode-toggle.jsx
 create mode 100644 src/components/theme-provider.jsx

diff --git a/src/app/globals.css b/src/app/globals.css
index f1d8c73..7430409 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1 +1,120 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.028 261.692);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 261.692);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.028 261.692);
+  --primary: oklch(0.21 0.034 264.665);
+  --primary-foreground: oklch(0.985 0.002 247.839);
+  --secondary: oklch(0.967 0.003 264.542);
+  --secondary-foreground: oklch(0.21 0.034 264.665);
+  --muted: oklch(0.967 0.003 264.542);
+  --muted-foreground: oklch(0.551 0.027 264.364);
+  --accent: oklch(0.967 0.003 264.542);
+  --accent-foreground: oklch(0.21 0.034 264.665);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.928 0.006 264.531);
+  --input: oklch(0.928 0.006 264.531);
+  --ring: oklch(0.707 0.022 261.325);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-primary: oklch(0.21 0.034 264.665);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.967 0.003 264.542);
+  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+.dark {
+  --background: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.985 0.002 247.839);
+  --card: oklch(0.21 0.034 264.665);
+  --card-foreground: oklch(0.985 0.002 247.839);
+  --popover: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.985 0.002 247.839);
+  --primary: oklch(0.928 0.006 264.531);
+  --primary-foreground: oklch(0.21 0.034 264.665);
+  --secondary: oklch(0.278 0.033 256.848);
+  --secondary-foreground: oklch(0.985 0.002 247.839);
+  --muted: oklch(0.278 0.033 256.848);
+  --muted-foreground: oklch(0.707 0.022 261.325);
+  --accent: oklch(0.278 0.033 256.848);
+  --accent-foreground: oklch(0.985 0.002 247.839);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.278 0.033 256.848);
+  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/src/app/layout.js b/src/app/layout.js
index 196d5ce..2212024 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,38 +1,51 @@
+"use client"
+
 import "./globals.css";
 import Link from "next/link";
+import {ThemeProvider} from "@/components/theme-provider";
+import {ModeToggle} from "@/components/mode-toggle";
+import {useTheme} from "next-themes";
+
 
 export default function RootLayout({children}) {
     return (
-        <html lang="en">
+        <html lang="en" suppressHydrationWarning>
         <body
-            className={"bg-black text-emerald-300"}>
-        <header className={"flex text-5xl p-3 justify-between border-b-2 border-emerald-300"}>
-            <button className={""}>&#9776;</button>
-            <div className={""}>Kristians Portfolio</div>
-            <button className={""}>&#9790;</button>
-        </header>
-        <div className={"p-5"}>
-            {children}
-        </div>
-        <footer className="">
-            <ul className="flex justify-evenly flex-wrap border-t-2 border-emerald-300 p-3">
-                <li className="">
-                    <Link href="/privacy">
-                        Privacy Policy
-                    </Link>
-                </li>
-                <li className="">
-                    <Link href="/contact">
-                        Contact
-                    </Link>
-                </li>
-                <li className="">
-                    <Link href="/about">
-                        About
-                    </Link>
-                </li>
-            </ul>
-        </footer>
+            className={"bg-gray-200 dark:bg-black text-emerald-800 dark:text-emerald-300"}>
+        <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem
+            disableTransitionOnChange
+        >
+            <header className={"flex text-3xl md:text-5xl p-3 justify-between border-b-2 border-emerald-800 dark:border-emerald-300 content-center"}>
+                <button className={""}>&#9776;</button>
+                <div className={"p-2"}>Kristians Portfolio</div>
+                <ModeToggle/>
+            </header>
+            <div className={"p-5"}>
+                {children}
+            </div>
+            <footer className="">
+                <ul className="flex justify-evenly flex-wrap border-t-2 border-emerald-800 dark:border-emerald-300 p-3">
+                    <li className="">
+                        <Link href="/privacy">
+                            Privacy Policy
+                        </Link>
+                    </li>
+                    <li className="">
+                        <Link href="/contact">
+                            Contact
+                        </Link>
+                    </li>
+                    <li className="">
+                        <Link href="/about">
+                            About
+                        </Link>
+                    </li>
+                </ul>
+            </footer>
+        </ThemeProvider>
         </body>
         </html>
     );
diff --git a/src/components/mode-toggle.jsx b/src/components/mode-toggle.jsx
new file mode 100644
index 0000000..8cbffc4
--- /dev/null
+++ b/src/components/mode-toggle.jsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import {Moon, Sun} from "lucide-react"
+import {useTheme} from "next-themes"
+
+import {Button} from "@/components/ui/button"
+
+export function ModeToggle() {
+    const {theme, setTheme} = useTheme()
+
+    return (
+        <Button variant="outline" size="icon" onClick={() =>
+            setTheme(theme === "dark" ? "light" : "dark")}
+                className="bg-gray-300 dark:bg-transparent text-yellow-600 dark:text-yellow-300 lg:scale-150 m-2">
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-125 transition-all dark:-rotate-90 dark:scale-0"/>
+            <Moon
+                className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-125"/>
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    )
+}
\ No newline at end of file
diff --git a/src/components/theme-provider.jsx b/src/components/theme-provider.jsx
new file mode 100644
index 0000000..5d6b4d4
--- /dev/null
+++ b/src/components/theme-provider.jsx
@@ -0,0 +1,8 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({ children, ...props }) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}