Extract theme context logic into its own provider

2025-01-25 19:22:24 +01:00
parent ce6722d584
commit b7fc1ae6ff
8 changed files with 137 additions and 127 deletions
--- a/src/modules/core/contexts/AppContext.tsx
+++ b/src/modules/core/contexts/AppContext.tsx
@@ -6,118 +6,53 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { Direction, StyledEngineProvider, ThemeProvider, useColorScheme } from '@mui/material/styles';
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { StyledEngineProvider } from '@mui/material/styles';
+import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
-import { useTranslation } from 'react-i18next';
-import { CacheProvider } from '@emotion/react';
 import { SnackbarProvider } from 'notistack';
-import { createAndSetTheme } from '@/modules/theme/services/ThemeCreator.ts';
-import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
-import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
 import { NavBarContextProvider } from '@/modules/navigation-bar/contexts/NavBarContextProvider.tsx';
 import { LibraryOptionsContextProvider } from '@/modules/library/contexts/LibraryOptionsProvider.tsx';
 import { ActiveDeviceContextProvider } from '@/modules/device/contexts/DeviceContext.tsx';
-import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
-import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
-import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { ReaderContextProvider } from '@/modules/reader/contexts/ReaderContextProvider.tsx';
-import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
 import { AppHotkeysProvider } from '@/modules/hotkeys/contexts/AppHotkeysProvider.tsx';
 import { SnackbarWithDescription } from '@/modules/core/components/snackbar/SnackbarWithDescription.tsx';
 import { AppPageHistoryContextProvider } from '@/modules/core/contexts/AppPageHistoryContextProvider.tsx';
+import { AppThemeContextProvider } from '@/modules/theme/contexts/AppThemeContextProvider.tsx';

 interface Props {
    children: React.ReactNode;
 }

-export const AppContext: React.FC<Props> = ({ children }) => {
-    const directionRef = useRef<Direction>('ltr');
-    const { i18n } = useTranslation();
-
-    const currentDirection = i18n.dir();
-
-    if (directionRef.current !== currentDirection) {
-        document.dir = currentDirection;
-        directionRef.current = currentDirection;
-    }
-
-    const {
-        settings: { customThemes },
-    } = useMetadataServerSettings();
-
-    const [systemThemeMode, setSystemThemeMode] = useState<ThemeMode>(MediaQuery.getSystemThemeMode());
-    useLayoutEffect(() => {
-        const unsubscribe = MediaQuery.listenToSystemThemeChange(setSystemThemeMode);
-
-        return () => unsubscribe();
-    }, []);
-
-    const [appTheme, setAppTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
-    const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
-    const [pureBlackMode, setPureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
-
-    const { mode } = useColorScheme();
-    const actualThemeMode = mode ?? themeMode ?? 'dark';
-
-    const darkThemeContext = useMemo(
-        () => ({
-            appTheme,
-            setAppTheme,
-            themeMode,
-            setThemeMode,
-            pureBlackMode,
-            setPureBlackMode,
-        }),
-        [themeMode, pureBlackMode, appTheme],
-    );
-
-    const theme = useMemo(
-        () =>
-            createAndSetTheme(
-                actualThemeMode as ThemeMode,
-                getTheme(appTheme, customThemes),
-                pureBlackMode,
-                currentDirection,
-            ),
-        [actualThemeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes],
-    );
-
-    return (
-        <Router>
-            <StyledEngineProvider injectFirst>
-                <CacheProvider value={DIRECTION_TO_CACHE[currentDirection]}>
-                    <ThemeProvider theme={theme}>
-                        <ThemeModeContext.Provider value={darkThemeContext}>
-                            <QueryParamProvider adapter={ReactRouter6Adapter}>
-                                <LibraryOptionsContextProvider>
-                                    <NavBarContextProvider>
-                                        <AppPageHistoryContextProvider>
-                                            <ActiveDeviceContextProvider>
-                                                <SnackbarProvider
-                                                    Components={{
-                                                        default: SnackbarWithDescription,
-                                                        info: SnackbarWithDescription,
-                                                        success: SnackbarWithDescription,
-                                                        warning: SnackbarWithDescription,
-                                                        error: SnackbarWithDescription,
-                                                    }}
-                                                >
-                                                    <ReaderContextProvider>
-                                                        <AppHotkeysProvider>{children}</AppHotkeysProvider>
-                                                    </ReaderContextProvider>
-                                                </SnackbarProvider>
-                                            </ActiveDeviceContextProvider>
-                                        </AppPageHistoryContextProvider>
-                                    </NavBarContextProvider>
-                                </LibraryOptionsContextProvider>
-                            </QueryParamProvider>
-                        </ThemeModeContext.Provider>
-                    </ThemeProvider>
-                </CacheProvider>
-            </StyledEngineProvider>
-        </Router>
-    );
-};
+export const AppContext: React.FC<Props> = ({ children }) => (
+    <Router>
+        <StyledEngineProvider injectFirst>
+            <AppThemeContextProvider>
+                <QueryParamProvider adapter={ReactRouter6Adapter}>
+                    <LibraryOptionsContextProvider>
+                        <NavBarContextProvider>
+                            <AppPageHistoryContextProvider>
+                                <ActiveDeviceContextProvider>
+                                    <SnackbarProvider
+                                        Components={{
+                                            default: SnackbarWithDescription,
+                                            info: SnackbarWithDescription,
+                                            success: SnackbarWithDescription,
+                                            warning: SnackbarWithDescription,
+                                            error: SnackbarWithDescription,
+                                        }}
+                                    >
+                                        <ReaderContextProvider>
+                                            <AppHotkeysProvider>{children}</AppHotkeysProvider>
+                                        </ReaderContextProvider>
+                                    </SnackbarProvider>
+                                </ActiveDeviceContextProvider>
+                            </AppPageHistoryContextProvider>
+                        </NavBarContextProvider>
+                    </LibraryOptionsContextProvider>
+                </QueryParamProvider>
+            </AppThemeContextProvider>
+        </StyledEngineProvider>
+    </Router>
+);
--- a/src/modules/core/utils/MediaQuery.tsx
+++ b/src/modules/core/utils/MediaQuery.tsx
@@ -10,7 +10,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { Breakpoint } from '@mui/material/styles';
 import { useCallback, useState } from 'react';
 import { getCurrentTheme } from '@/modules/theme/services/ThemeCreator.ts';
-import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
+import { ThemeMode } from '@/modules/theme/contexts/AppThemeContext.tsx';
 import { AppStorage } from '@/lib/storage/AppStorage.ts';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';

--- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx
@@ -13,7 +13,7 @@ import Box, { BoxProps } from '@mui/material/Box';
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
-import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
+import { ThemeMode } from '@/modules/theme/contexts/AppThemeContext.tsx';
 import { createTheme } from '@/modules/theme/services/ThemeCreator.ts';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
--- a/src/modules/settings/screens/Appearance.tsx
+++ b/src/modules/settings/screens/Appearance.tsx
@@ -16,7 +16,7 @@ import ListSubheader from '@mui/material/ListSubheader';
 import Switch from '@mui/material/Switch';
 import Link from '@mui/material/Link';
 import { useColorScheme } from '@mui/material/styles';
-import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
+import { ThemeMode, AppThemeContext } from '@/modules/theme/contexts/AppThemeContext.tsx';
 import { Select } from '@/modules/core/components/inputs/Select.tsx';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
@@ -39,7 +39,7 @@ import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContex

 export const Appearance = () => {
    const { t, i18n } = useTranslation();
-    const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode } = useContext(ThemeModeContext);
+    const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode } = useContext(AppThemeContext);
    const { mode, setMode } = useColorScheme();
    const actualThemeMode = (mode ?? themeMode) as ThemeMode;

--- a/src/modules/theme/components/ThemePreview.tsx
+++ b/src/modules/theme/components/ThemePreview.tsx
@@ -19,7 +19,7 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import EditIcon from '@mui/icons-material/Edit';
 import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
-import { ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
+import { AppThemeContext } from '@/modules/theme/contexts/AppThemeContext.tsx';
 import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/modules/theme/services/AppThemes.ts';
 import { createTheme } from '@/modules/theme/services/ThemeCreator.ts';
 import { ThemeCreationDialog } from '@/modules/theme/components/CreateThemeDialog.tsx';
@@ -37,7 +37,7 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel

    const { t } = useTranslation();
    const theme = useTheme();
-    const { themeMode, setAppTheme, appTheme: activeAppTheme, pureBlackMode } = useContext(ThemeModeContext);
+    const { themeMode, setAppTheme, appTheme: activeAppTheme, pureBlackMode } = useContext(AppThemeContext);

    const popupState = usePopupState({ variant: 'popover', popupId: `theme-edit-dialog-${appTheme.id}` });

--- a/src/modules/theme/contexts/ThemeModeContext.tsx
+++ b/src/modules/theme/contexts/ThemeModeContext.tsx
@@ -15,7 +15,7 @@ export enum ThemeMode {
    LIGHT = 'light',
 }

-type ThemeModeContextType = {
+export type TAppThemeContext = {
    appTheme: AppThemes;
    setAppTheme: React.Dispatch<React.SetStateAction<AppThemes>>;
    themeMode: ThemeMode;
@@ -24,7 +24,7 @@ type ThemeModeContextType = {
    setPureBlackMode: React.Dispatch<React.SetStateAction<boolean>>;
 };

-export const ThemeModeContext = React.createContext<ThemeModeContextType>({
+export const AppThemeContext = React.createContext<TAppThemeContext>({
    appTheme: 'default',
    setAppTheme: (): void => {},
    themeMode: ThemeMode.SYSTEM,
--- a/src/modules/theme/contexts/AppThemeContextProvider.tsx
+++ b/src/modules/theme/contexts/AppThemeContextProvider.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Direction, ThemeProvider, useColorScheme } from '@mui/material/styles';
+import { CacheProvider } from '@emotion/react';
+import { useTranslation } from 'react-i18next';
+import { AppThemeContext, ThemeMode } from '@/modules/theme/contexts/AppThemeContext.tsx';
+import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
+import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
+import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
+import { createAndSetTheme } from '@/modules/theme/services/ThemeCreator.ts';
+
+export const AppThemeContextProvider = ({ children }: { children: ReactNode }) => {
+    const { i18n } = useTranslation();
+    const { mode } = useColorScheme();
+    const {
+        settings: { customThemes },
+    } = useMetadataServerSettings();
+    const [appTheme, setAppTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
+    const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
+    const [pureBlackMode, setPureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
+
+    const directionRef = useRef<Direction>('ltr');
+
+    const [systemThemeMode, setSystemThemeMode] = useState<ThemeMode>(MediaQuery.getSystemThemeMode());
+
+    const actualThemeMode = mode ?? themeMode ?? 'dark';
+    const currentDirection = i18n.dir();
+
+    const appThemeContext = useMemo(
+        () => ({
+            appTheme,
+            setAppTheme,
+            themeMode,
+            setThemeMode,
+            pureBlackMode,
+            setPureBlackMode,
+        }),
+        [themeMode, pureBlackMode, appTheme],
+    );
+
+    const theme = useMemo(
+        () =>
+            createAndSetTheme(
+                actualThemeMode as ThemeMode,
+                getTheme(appTheme, customThemes),
+                pureBlackMode,
+                currentDirection,
+            ),
+        [actualThemeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes],
+    );
+
+    useLayoutEffect(() => {
+        const unsubscribe = MediaQuery.listenToSystemThemeChange(setSystemThemeMode);
+
+        return () => unsubscribe();
+    }, []);
+
+    if (directionRef.current !== currentDirection) {
+        document.dir = currentDirection;
+        directionRef.current = currentDirection;
+    }
+
+    return (
+        <AppThemeContext.Provider value={appThemeContext}>
+            <CacheProvider value={DIRECTION_TO_CACHE[currentDirection]}>
+                <ThemeProvider theme={theme}>{children}</ThemeProvider>
+            </CacheProvider>
+        </AppThemeContext.Provider>
+    );
+};
--- a/src/modules/theme/services/ThemeCreator.ts
+++ b/src/modules/theme/services/ThemeCreator.ts
@@ -21,7 +21,7 @@ import { useCallback } from 'react';
 import { deepmerge } from '@mui/utils';
 // eslint-disable-next-line no-restricted-imports
 import { PaletteBackgroundChannel } from '@mui/material/styles/createThemeWithVars';
-import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
+import { ThemeMode } from '@/modules/theme/contexts/AppThemeContext.tsx';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 import { AppTheme, loadThemeFonts } from '@/modules/theme/services/AppThemes.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
@@ -29,15 +29,9 @@ import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';

 const SCROLLBAR_SIZE = 14;

-declare module '@mui/material/styles' {
-    interface CssThemeVariables {
-        enabled: true;
-    }
-}
-
 const getBackgroundColor = (
    type: 'light' | 'dark',
-    appTheme: AppTheme,
+    appTheme: AppTheme['muiTheme'],
    theme: Theme,
    setPureBlackMode: boolean = false,
 ): (Partial<TypeBackground> & Partial<PaletteBackgroundChannel>) | undefined => {
@@ -49,11 +43,8 @@ const getBackgroundColor = (
    }

    if (type === 'light' && !!theme.colorSchemes.light) {
-        if (
-            typeof appTheme.muiTheme.colorSchemes?.light === 'object' &&
-            appTheme.muiTheme.colorSchemes.light.palette?.background
-        ) {
-            return appTheme.muiTheme.colorSchemes.light.palette.background;
+        if (typeof appTheme.colorSchemes?.light === 'object' && appTheme.colorSchemes.light.palette?.background) {
+            return appTheme.colorSchemes.light.palette.background;
        }

        return {
@@ -63,11 +54,8 @@ const getBackgroundColor = (
    }

    if (type === 'dark' && !!theme.colorSchemes.dark) {
-        if (
-            typeof appTheme.muiTheme.colorSchemes?.dark === 'object' &&
-            appTheme.muiTheme.colorSchemes.dark.palette?.background
-        ) {
-            return appTheme.muiTheme.colorSchemes.dark.palette.background;
+        if (typeof appTheme.colorSchemes?.dark === 'object' && appTheme.colorSchemes.dark.palette?.background) {
+            return appTheme.colorSchemes.dark.palette.background;
        }

        return {
@@ -84,6 +72,7 @@ export const createTheme = (
    appTheme: AppTheme,
    pureBlackMode: boolean = false,
    direction: Direction = 'ltr',
+    dynamicColor: string | null = null,
 ) => {
    const systemMode = MediaQuery.getSystemThemeMode();

@@ -91,6 +80,13 @@ export const createTheme = (
    const isDarkMode = mode === ThemeMode.DARK;
    const setPureBlackMode = isDarkMode && pureBlackMode;

+    const themeDynamicColor = {
+        ...appTheme.muiTheme,
+        light: { palette: { primary: { main: dynamicColor } } },
+        dark: { palette: { primary: { main: dynamicColor } } },
+    };
+    const themeFinalColor = dynamicColor ? themeDynamicColor : appTheme.muiTheme;
+
    const themeForColors = createMuiTheme({ ...appTheme.muiTheme, defaultColorScheme: mode });

    const suwayomiTheme = createMuiTheme(
@@ -101,14 +97,14 @@ export const createTheme = (
                light: appTheme.muiTheme.colorSchemes?.light
                    ? {
                          palette: {
-                              background: getBackgroundColor('light', appTheme, themeForColors),
+                              background: getBackgroundColor('light', themeFinalColor, themeForColors),
                          },
                      }
                    : undefined,
                dark: appTheme.muiTheme.colorSchemes?.dark
                    ? {
                          palette: {
-                              background: getBackgroundColor('dark', appTheme, themeForColors, setPureBlackMode),
+                              background: getBackgroundColor('dark', themeFinalColor, themeForColors, setPureBlackMode),
                          },
                      }
                    : undefined,