Could we add a feature that detects if you are using dark mode, and swit

This commit is contained in:
Derek Slenk 2025-06-26 18:06:44 +00:00
parent 6b021fd315
commit a7476cb140
4 changed files with 32 additions and 3 deletions

11
package-lock.json generated
View file

@ -41,6 +41,7 @@
"genkit": "^1.13.0", "genkit": "^1.13.0",
"lucide-react": "^0.475.0", "lucide-react": "^0.475.0",
"next": "15.3.3", "next": "15.3.3",
"next-themes": "^0.3.0",
"patch-package": "^8.0.0", "patch-package": "^8.0.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-day-picker": "^8.10.1", "react-day-picker": "^8.10.1",
@ -7438,6 +7439,16 @@
} }
} }
}, },
"node_modules/next-themes": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
"integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18",
"react-dom": "^16.8 || ^17 || ^18"
}
},
"node_modules/next/node_modules/postcss": { "node_modules/next/node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

View file

@ -45,6 +45,7 @@
"genkit": "^1.13.0", "genkit": "^1.13.0",
"lucide-react": "^0.475.0", "lucide-react": "^0.475.0",
"next": "15.3.3", "next": "15.3.3",
"next-themes": "^0.3.0",
"patch-package": "^8.0.0", "patch-package": "^8.0.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-day-picker": "^8.10.1", "react-day-picker": "^8.10.1",

View file

@ -1,6 +1,7 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import './globals.css'; import './globals.css';
import { Toaster } from '@/components/ui/toaster'; import { Toaster } from '@/components/ui/toaster';
import { ThemeProvider } from '@/components/theme-provider';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Cheating Chelsea Exposed', title: 'Cheating Chelsea Exposed',
@ -14,7 +15,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link <link
@ -28,8 +29,15 @@ export default function RootLayout({
/> />
</head> </head>
<body className="font-body antialiased"> <body className="font-body antialiased">
{children} <ThemeProvider
<Toaster /> attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
<Toaster />
</ThemeProvider>
</body> </body>
</html> </html>
); );

View file

@ -0,0 +1,9 @@
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes/dist/types"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}