Use dynamic color schemes on manga page

src/modules/theme/contexts/AppThemeContext.tsx

@@ -6,7 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
+import { Palette } from '@vibrant/color';
+import { FastAverageColorResult } from 'fast-average-color';
 import { AppThemes } from '@/modules/theme/services/AppThemes.ts';
 
 export enum ThemeMode {
@@ -22,6 +24,10 @@ export type TAppThemeContext = {
     setThemeMode: React.Dispatch<React.SetStateAction<ThemeMode>>;
     pureBlackMode: boolean;
     setPureBlackMode: React.Dispatch<React.SetStateAction<boolean>>;
+    dynamicColor: (NonNullableProperties<Palette> & { average: FastAverageColorResult }) | null;
+    setDynamicColor: React.Dispatch<
+        React.SetStateAction<(NonNullableProperties<Palette> & { average: FastAverageColorResult }) | null>
+    >;
 };
 
 export const AppThemeContext = React.createContext<TAppThemeContext>({
@@ -31,4 +37,8 @@ export const AppThemeContext = React.createContext<TAppThemeContext>({
     setThemeMode: (): void => {},
     pureBlackMode: false,
     setPureBlackMode: (): void => {},
+    dynamicColor: null,
+    setDynamicColor: (): void => {},
 });
+
+export const useAppThemeContext = () => useContext(AppThemeContext);

src/modules/theme/contexts/AppThemeContextProvider.tsx

@@ -10,7 +10,7 @@ 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 { AppThemeContext, TAppThemeContext, 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';
@@ -31,6 +31,7 @@ export const AppThemeContextProvider = ({ children }: { children: ReactNode }) =
     const directionRef = useRef<Direction>('ltr');
 
     const [systemThemeMode, setSystemThemeMode] = useState<ThemeMode>(MediaQuery.getSystemThemeMode());
+    const [dynamicColor, setDynamicColor] = useState<TAppThemeContext['dynamicColor']>(null);
 
     const actualThemeMode = mode ?? themeMode ?? 'dark';
     const currentDirection = i18n.dir();
@@ -43,8 +44,10 @@ export const AppThemeContextProvider = ({ children }: { children: ReactNode }) =
             setThemeMode,
             pureBlackMode,
             setPureBlackMode,
+            dynamicColor,
+            setDynamicColor,
         }),
-        [themeMode, pureBlackMode, appTheme],
+        [themeMode, pureBlackMode, appTheme, dynamicColor],
     );
 
     const theme = useMemo(
@@ -54,8 +57,9 @@ export const AppThemeContextProvider = ({ children }: { children: ReactNode }) =
                 getTheme(appTheme, customThemes),
                 pureBlackMode,
                 currentDirection,
+                dynamicColor,
             ),
-        [actualThemeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes],
+        [actualThemeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes, dynamicColor],
     );
 
     useLayoutEffect(() => {