implemented theme management

2026-04-15 11:15:15 +03:30
parent 9fb168e888
commit e587a7f6cc
7 changed files with 115 additions and 24 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,39 +0,0 @@
-@import 'tailwindcss';
-
-*,
-*::before,
-*::after,
-*::-webkit-scrollbar {
-  box-sizing: border-box;
-}
-
-* {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-*::-webkit-scrollbar {
-  display: none;
-}
-
-body {
-  margin: 0;
-}
-
-@theme {
-  --color-primary: #cbd5e1;
-  --color-text: #273343;
-
-  /* constants */
-  --color-neo-aqua: #16a795;
-  --color-core-red: #ef4444;
-  --color-warning: #eedd55;
-  --color-information: #0ea5e9;
-  --color-error: #ef4444;
-  --color-success: #22c55e;
-}
-
-[data-theme='dark'] {
-  --color-primary: #273343;
-  --color-text: #cbd5e1;
-}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,19 +1,38 @@
-import type { Metadata } from "next";
-import "./globals.css";
+import { ClientAppProvider } from '@/providers/ClientAppProvider'
+import '@/styles/globals.css'
+import type { Metadata } from 'next'

 export const metadata: Metadata = {
-  title: "Offline App",
-};
+  title: 'Theater of dreams',
+}

 export default function RootLayout({
  children,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }) {
  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}
+    <html lang='en' suppressHydrationWarning>
+      <head>
+        {/* Prevent theme flicker before hydration */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme');
+                  const theme = stored || 'dark';
+                  document.documentElement.setAttribute('data-theme', theme);
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>

+      <body className='bg-primary'>
+        <ClientAppProvider>{children}</ClientAppProvider>
+      </body>
+    </html>
+  )
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,9 @@
+import ThemeToggle from '@/components/UI/ThemeToggle'
+
 export default function Home() {
  return (
    <main>
+      <ThemeToggle />
      <h1>Offline Next.js Template 🚀</h1>
      <p>This project was generated completely offline.</p>
    </main>