add dark mode

2026-01-28 21:12:04 +00:00 · 2025-04-04 11:38:44 +02:00
parent 31cb676567
commit 9cb72fa134
9 changed files with 407 additions and 118 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import '@/styles/globals.css'
 import type { Metadata } from 'next'
 import { Geist } from 'next/font/google'

+import { MainHeader } from '@/components/header'
+import { ThemeProvider } from '@/components/theme-provider'
 import { TRPCReactProvider } from '@/trpc/react'
 import { NextIntlClientProvider } from 'next-intl'
 import { getLocale } from 'next-intl/server'
@@ -23,10 +25,24 @@ export default async function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
  const locale = await getLocale()
  return (
-    <html lang={locale} className={`${geist.variable}`}>
+    <html
+      lang={locale}
+      className={`${geist.variable}`}
+      suppressHydrationWarning
+    >
      <body>
        <TRPCReactProvider>
-          <NextIntlClientProvider>{children}</NextIntlClientProvider>
+          <NextIntlClientProvider>
+            <ThemeProvider
+              attribute='class'
+              defaultTheme='system'
+              enableSystem
+              disableTransitionOnChange
+            >
+              <MainHeader />
+              {children}
+            </ThemeProvider>
+          </NextIntlClientProvider>
        </TRPCReactProvider>
      </body>
    </html>