theming: fix the theming to set the correct dark mode

Clubs-Council-IIITH · Jan 13, 2025 · 21dfc5b · 21dfc5b
1 parent b85ad73
commit 21dfc5b
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/src/components/ThemeRegistry/ThemeRegistry.jsx b/src/components/ThemeRegistry/ThemeRegistry.jsx
@@ -32,6 +32,20 @@ export default function ThemeRegistry({ children, nonce }) {
   const theme = createTheme(themeOptions);
   theme.components = componentsOverride(theme);
 
+  // Update the global background color
+  React.useEffect(() => {
+    const backgroundColor = prefersDarkMode.isDark
+      ? palette.dark.background.default
+      : palette.light.background.default;
+
+    document.body.style.backgroundColor = backgroundColor;
+
+    return () => {
+      // Optional cleanup
+      document.body.style.backgroundColor = "";
+    };
+  }, [prefersDarkMode]);
+
   return (
     <NextAppDirEmotionCacheProvider options={{ key: "mui", nonce: nonce }}>
       <ThemeProvider theme={theme}>