daniel-gitea/cgr-next-js
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented theme switcher as an exercise

Browse Source
This commit is contained in:
Eduard Schulteis
2026-01-23 16:38:04 +01:00
parent 497741fe1b
commit d07ec05ecc
5 changed files with 74 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/globals.css
View File

@@ -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;
}

15
app/layout.tsx
View File

@@ -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 (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<html lang="en" suppressHydrationWarning>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<ThemeProvider defaultTheme="system" enableSystem>
<nav className="bg-gray-100 dark:bg-gray-800 p-4">
<ThemeToggle />
</nav>
{children}
</ThemeProvider>
</body>
</html>
);