bugfix: the whole theming structure overhauled. light/dark mode icon added.

2026-04-29 01:22:53 +03:30
parent bdd889ac09
commit a264523e12
20 changed files with 422 additions and 217 deletions
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,7 +1,10 @@
 // src/app/layout.tsx
 import type { Metadata } from 'next';
+import Script from 'next/script';
 import '@/styles/globals.css';
+import '@/styles/background-web.css';
 import { AuthProvider } from '@/lib/hooks/useAuth';
+import { THEME_STORAGE_KEY } from '@/lib/theme';

 export const metadata: Metadata = {
  title: 'DyoLink - Dental Clinic & Lab Communication Hub',
@@ -13,9 +16,14 @@ export default function RootLayout({
 }: {
  children: React.ReactNode;
 }) {
+  const themeInit = `(function(){try{var k=${JSON.stringify(THEME_STORAGE_KEY)};var t=localStorage.getItem(k);document.documentElement.setAttribute('data-theme',t==='light'||t==='dark'?t:'dark');}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();`;
+
  return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
      <body>
+        <Script id="theme-init" strategy="beforeInteractive">
+          {themeInit}
+        </Script>
        <AuthProvider>
          {children}
        </AuthProvider>