Add support for user themes for mui components

src/apps/experimental/routes/user/display/DisplayPreferences.tsx

@@ -12,10 +12,11 @@ import React, { Fragment } from 'react';
 
 import { appHost } from 'components/apphost';
 import { useApi } from 'hooks/useApi';
+import { useThemes } from 'hooks/useThemes';
 import globalize from 'scripts/globalize';
+
 import { DisplaySettingsValues } from './types';
 import { useScreensavers } from './hooks/useScreensavers';
-import { useServerThemes } from './hooks/useServerThemes';
 
 interface DisplayPreferencesProps {
     onChange: (event: SelectChangeEvent | React.SyntheticEvent) => void;
@@ -25,7 +26,7 @@ interface DisplayPreferencesProps {
 export function DisplayPreferences({ onChange, values }: Readonly<DisplayPreferencesProps>) {
     const { user } = useApi();
     const { screensavers } = useScreensavers();
-    const { themes } = useServerThemes();
+    const { themes } = useThemes();
 
     return (
         <Stack spacing={3}>

src/apps/experimental/routes/user/display/hooks/useServerThemes.ts

@@ -1,32 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import themeManager from 'scripts/themeManager';
-import { Theme } from 'types/webConfig';
-
-export function useServerThemes() {
-    const [themes, setThemes] = useState<Theme[]>();
-
-    useEffect(() => {
-        async function getServerThemes() {
-            const loadedThemes = await themeManager.getThemes();
-
-            setThemes(loadedThemes ?? []);
-        }
-
-        if (!themes) {
-            void getServerThemes();
-        }
-    // We've intentionally left the dependency array here to ensure that the effect happens only once.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const defaultTheme = useMemo(() => {
-        if (!themes) return null;
-        return themes.find((theme) => theme.default);
-    }, [themes]);
-
-    return {
-        themes: themes ?? [],
-        defaultTheme
-    };
-}

src/apps/stable/AppRouter.tsx

@@ -7,6 +7,7 @@ import { STABLE_APP_ROUTES } from './routes/routes';
 import Backdrop from 'components/Backdrop';
 import AppHeader from 'components/AppHeader';
 import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
+import UserThemeProvider from 'themes/UserThemeProvider';
 
 const router = createHashRouter([{
     element: <StableAppLayout />,
@@ -32,11 +33,11 @@ function StableAppLayout() {
         .some(path => location.pathname.startsWith(`/${path}`));
 
     return (
-        <>
+        <UserThemeProvider>
             <Backdrop />
             <AppHeader isHidden={isNewLayoutPath} />
 
             <Outlet />
-        </>
+        </UserThemeProvider>
     );
 }