From 15d8fa4affdab0749574d805c8b834f901f8bec5 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sat, 27 Dec 2025 17:57:45 +0000
Subject: [PATCH] chore: sync mui theme mode with document

---
 .../src/app/providers/providers-component.tsx | 26 ++++++++++++-------
 .../nextjs/src/app/providers/theme-context.ts |  1 +
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontends/nextjs/src/app/providers/providers-component.tsx b/frontends/nextjs/src/app/providers/providers-component.tsx
index 8ef029c35..471c09f14 100644
--- a/frontends/nextjs/src/app/providers/providers-component.tsx
+++ b/frontends/nextjs/src/app/providers/providers-component.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { CssBaseline, ThemeProvider as MuiThemeProvider } from '@mui/material'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { lightTheme, darkTheme } from '@/theme/mui-theme'
@@ -21,17 +21,25 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
   const [mode, setMode] = useState<ThemeMode>('system')
 
-  const theme = useMemo(() => {
+  const resolvedMode = useMemo<Exclude<ThemeMode, 'system'>>(() => {
     if (mode === 'system') {
-      // Detect system preference
-      const isDark = typeof window !== 'undefined'
-        ? window.matchMedia('(prefers-color-scheme: dark)').matches
-        : false
-      return isDark ? darkTheme : lightTheme
+      return typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
     }
-    return mode === 'dark' ? darkTheme : lightTheme
+
+    return mode
   }, [mode])
 
+  const theme = useMemo(() => (resolvedMode === 'dark' ? darkTheme : lightTheme), [resolvedMode])
+
+  useEffect(() => {
+    const root = document.documentElement
+
+    root.dataset.theme = resolvedMode
+    root.style.colorScheme = resolvedMode
+  }, [resolvedMode])
+
   const toggleTheme = () => {
     setMode(current => {
       if (current === 'light') return 'dark'
@@ -41,7 +49,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <ThemeContext.Provider value={{ mode, setMode, toggleTheme }}>
+    <ThemeContext.Provider value={{ mode, resolvedMode, setMode, toggleTheme }}>
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
         <QueryClientProvider client={queryClient}>
diff --git a/frontends/nextjs/src/app/providers/theme-context.ts b/frontends/nextjs/src/app/providers/theme-context.ts
index e04ff0479..7be3b2fc6 100644
--- a/frontends/nextjs/src/app/providers/theme-context.ts
+++ b/frontends/nextjs/src/app/providers/theme-context.ts
@@ -4,6 +4,7 @@ export type ThemeMode = 'light' | 'dark' | 'system'
 
 export interface ThemeContextType {
   mode: ThemeMode
+  resolvedMode: Exclude<ThemeMode, 'system'>
   setMode: (mode: ThemeMode) => void
   toggleTheme: () => void
 }