Merge pull request #27 from PelicanPlatform/fix-jumpiness

Fix jumpiness in the config page

utils/darkLightContainer.tsx

@@ -1,39 +1,25 @@
-import React, { use, useEffect, useState } from "react";
-import { PaletteMode, ThemeProvider, createTheme } from '@mui/material';
-import { useTheme } from 'next-themes';
-import CssBaseline from '@mui/material/CssBaseline';
+import React from "react";
+import { PaletteMode } from '@mui/material'
+import {  ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 
 export const DarkLightContainer = ({ children }) => {
     const { resolvedTheme } = useTheme();
-    const [theme, setTheme] = useState('dark');
-    useEffect(() => {
-        let mounted = true;
-        if (resolvedTheme === 'system') {
-            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                setTheme('dark');
-            }
-            else {
-                setTheme('light');
-            }
-        } else {
-            setTheme(resolvedTheme);
-        }
 
-        return () => {
-            mounted = false;
-        };
-    }, [resolvedTheme]);
+    // Default to 'light' mode if resolvedTheme is undefined
+    const mode: PaletteMode = resolvedTheme === 'dark' ? 'dark' : 'light';
 
     const muiTheme = createTheme({
         palette: {
-            mode: theme as PaletteMode,
-        }
+            mode: mode,
+        },
     });
-
+    
     return (
-        <ThemeProvider theme={muiTheme}>
-            <CssBaseline />
-            {children}
-        </ThemeProvider>
+        <NextThemeProvider>
+            <ThemeProvider theme={muiTheme}>
+                {children}
+            </ThemeProvider>
+        </NextThemeProvider>
     )
 }