From 806b8f2377abbeadf8cdf817ab15df761b430661 Mon Sep 17 00:00:00 2001 From: Pavan Teja Date: Sat, 7 Mar 2026 11:07:37 +0530 Subject: [PATCH] fix: resolve hydration mismatch on theme toggle --- frontend/next-env.d.ts | 6 +++++ frontend/src/app/globals.css | 14 +++++++++++- frontend/src/app/layout.tsx | 20 ++++++++++++++--- frontend/src/components/ThemeToggle.tsx | 29 +++++++++++++++++++++++++ package-lock.json | 12 ++++++++++ 5 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 frontend/next-env.d.ts create mode 100644 frontend/src/components/ThemeToggle.tsx create mode 100644 package-lock.json diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts new file mode 100644 index 0000000..830fb59 --- /dev/null +++ b/frontend/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 54ea001..2c03c8b 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -1,6 +1,17 @@ @import 'tailwindcss'; :root { + --bg-primary: #ffffff; + --bg-secondary: #f3f4f6; + --bg-card: #ffffff; + --text-primary: #111827; + --text-secondary: #4b5563; + --accent: #6366f1; + --accent-muted: #4f46e5; + --border: #e5e7eb; +} + +[data-theme='dark'] { --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-card: #1a1a2e; @@ -15,4 +26,5 @@ body { background: var(--bg-primary); color: var(--text-primary); font-family: system-ui, -apple-system, sans-serif; -} + transition: background-color 0.3s, color 0.3s; +} \ No newline at end of file diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 1acf22c..c26752f 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from 'next' import './globals.css' +import ThemeToggle from '@/components/ThemeToggle' export const metadata: Metadata = { title: 'deep-cuts', @@ -8,18 +9,31 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + + +