Why is this working?
Unanswered
Erythrina gall wasp posted this in #help-forum

Erythrina gall waspOP
Head.tsx
"use client"
import React, {useState} from 'react'
import Link from 'next/link'
const Head = () => {
const [theme, setTheme] = useState("light");
// Function to toggle between light and dark themes
const toggleTheme = () => {
if (theme === "light") {
setTheme("dark");
document.documentElement.classList.add("dark"); // Add dark mode class
} else {
setTheme("light");
document.documentElement.classList.remove("dark"); // Remove dark mode class
}
};
return (
<div className=''>
<button
className='bg-gradientButton text-smallText rounded-md p-1'
onClick={toggleTheme}
>
{theme === "light" ? "Light" : "Dark"}
</button>
<Link href={"/signin"}>Sign In</Link>
</div>
)
}
export default Head
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Sidebar from "./components/Sidebar";
import Head from "./components/Head";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="light" >
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-backgroundColor`}
>
<div className="flex gap-5">
<div>
<div className="bg-backgroundColor text-headerColor max-w-[310px] h-screen shadow-glow_box oberflow-y-auto md:min-w-[200px]">
<Sidebar />
</div>
</div>
<Head />
{children}
</div>
</body>
</html>
);
}
1 Reply

Erythrina gall waspOP
why is this working