Kris_HD1337/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added dark/light mode toggle

Browse Source
This commit is contained in:
IM23a-cernik
2025-03-20 10:00:00 +01:00
parent 3e94d0c9dc
commit 43565b4099
4 changed files with 191 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.js
+42 -29
View File
@@ -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>
);