Backport pull request #5589 from jellyfin-web/release-10.9.z

Add support for user themes for mui components

Original-merge: 61976b8101d8d58334df2f4df2d1138cdbebbd4e

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: Joshua M. Boniface <joshua@boniface.me>

src/hooks/useThemes.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+
+import { useWebConfig } from './useWebConfig';
+
+export function useThemes() {
+    const { themes } = useWebConfig();
+
+    const defaultTheme = useMemo(() => {
+        return themes?.find(theme => theme.default);
+    }, [ themes ]);
+
+    return {
+        themes: themes || [],
+        defaultTheme
+    };
+}

src/hooks/useUserTheme.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { currentSettings as userSettings } from 'scripts/settings/userSettings';
+import Events from 'utils/events';
+
+import { useApi } from './useApi';
+import { useThemes } from './useThemes';
+
+const THEME_FIELD_NAMES = [ 'appTheme', 'dashboardTheme' ];
+
+export function useUserTheme() {
+    const [ theme, setTheme ] = useState<string>();
+    const [ dashboardTheme, setDashboardTheme ] = useState<string>();
+
+    const { user } = useApi();
+    const { defaultTheme } = useThemes();
+
+    useEffect(() => {
+        if (defaultTheme) {
+            if (!theme) setTheme(defaultTheme.id);
+            if (!dashboardTheme) setDashboardTheme(defaultTheme.id);
+        }
+    }, [ dashboardTheme, defaultTheme, theme ]);
+
+    // Update the current themes with values from user settings
+    const updateThemesFromSettings = useCallback(() => {
+        const userTheme = userSettings.theme();
+        if (userTheme) setTheme(userTheme);
+        const userDashboardTheme = userSettings.dashboardTheme();
+        if (userDashboardTheme) setDashboardTheme(userDashboardTheme);
+    }, []);
+
+    const onUserSettingsChange = useCallback((_e, name?: string) => {
+        if (name && THEME_FIELD_NAMES.includes(name)) {
+            updateThemesFromSettings();
+        }
+    }, [ updateThemesFromSettings ]);
+
+    // Handle user settings changes
+    useEffect(() => {
+        Events.on(userSettings, 'change', onUserSettingsChange);
+
+        return () => {
+            Events.off(userSettings, 'change', onUserSettingsChange);
+        };
+    }, [ onUserSettingsChange ]);
+
+    // Update the theme if the user changes
+    useEffect(() => {
+        updateThemesFromSettings();
+    }, [ updateThemesFromSettings, user ]);
+
+    return {
+        theme,
+        dashboardTheme
+    };
+}