Use theme manager to update mui theme

src/RootAppRouter.tsx

@@ -1,4 +1,4 @@
-
+import { ThemeProvider } from '@mui/material/styles';
 import React from 'react';
 import {
     RouterProvider,
@@ -15,7 +15,7 @@ import AppHeader from 'components/AppHeader';
 import Backdrop from 'components/Backdrop';
 import BangRedirect from 'components/router/BangRedirect';
 import { createRouterHistory } from 'components/router/routerHistory';
-import UserThemeProvider from 'themes/UserThemeProvider';
+import appTheme from 'themes/themes';
 
 const layoutMode = localStorage.getItem('layout');
 const isExperimentalLayout = layoutMode === 'experimental';
@@ -51,11 +51,16 @@ function RootAppLayout() {
         .some(path => location.pathname.startsWith(`/${path}`));
 
     return (
-        <UserThemeProvider>
+        <ThemeProvider
+            theme={appTheme}
+            defaultMode='dark'
+            // Disable mui's default saving to local storage
+            storageManager={null}
+        >
             <Backdrop />
             <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
 
             <Outlet />
-        </UserThemeProvider>
+        </ThemeProvider>
     );
 }

src/scripts/themeManager.js

@@ -39,6 +39,10 @@ function setTheme(id) {
 
             currentThemeId = info.id;
 
+            // set the theme attribute for mui
+            document.documentElement.setAttribute('data-theme', info.id);
+
+            // set the meta theme color
             document.getElementById('themeColor').content = info.color;
         });
     });

src/themes/UserThemeProvider.tsx

@@ -1,47 +0,0 @@
-import { type SupportedColorScheme, ThemeProvider, useColorScheme } from '@mui/material/styles';
-import React, { type FC, type PropsWithChildren, useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
-import { useUserTheme } from 'hooks/useUserTheme';
-
-import appTheme, { COLOR_SCHEMES } from './themes';
-
-const isDashboardThemePage = (pathname: string) => [
-    // NOTE: The metadata manager doesn't seem to use the dashboard theme
-    DASHBOARD_APP_PATHS.Dashboard,
-    DASHBOARD_APP_PATHS.PluginConfig
-].some(path => pathname.startsWith(`/${path}`));
-
-const ColorSchemeSwitcher: FC = () => {
-    const [ isDashboard, setIsDashboard ] = useState(false);
-    const { setColorScheme, setMode } = useColorScheme();
-    const location = useLocation();
-    const { theme, dashboardTheme } = useUserTheme();
-
-    // Check if we are on a dashboard page when the path changes
-    useEffect(() => {
-        setIsDashboard(isDashboardThemePage(location.pathname));
-    }, [ location.pathname ]);
-
-    useEffect(() => {
-        const currentSchemeName = (isDashboard ? dashboardTheme : theme) as SupportedColorScheme;
-        const currentScheme = COLOR_SCHEMES[currentSchemeName];
-
-        setColorScheme(currentSchemeName);
-        setMode(currentScheme.palette?.mode || 'dark');
-    }, [ dashboardTheme, isDashboard, setColorScheme, setMode, theme ]);
-
-    return null;
-};
-
-const UserThemeProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
-    return (
-        <ThemeProvider theme={appTheme} defaultMode='dark'>
-            <ColorSchemeSwitcher />
-            {children}
-        </ThemeProvider>
-    );
-};
-
-export default UserThemeProvider;

src/themes/themes.ts

@@ -125,7 +125,7 @@ export const COLOR_SCHEMES = {
 const DEFAULT_THEME = createTheme({
     cssVariables: {
         cssVarPrefix: 'jf',
-        colorSchemeSelector: 'data',
+        colorSchemeSelector: '[data-theme="%s"]',
         disableCssColorScheme: true
     },
     defaultColorScheme: 'dark',