Add themes

src/components/context/AppContext.tsx

@@ -16,13 +16,14 @@ import { CacheProvider, EmotionCache } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { prefixer } from 'stylis';
 import rtlPlugin from 'stylis-plugin-rtl';
-import { createTheme } from '@/theme';
+import { createAndSetTheme } from '@/theme';
 import { useLocalStorage } from '@/util/useStorage.tsx';
 import { ThemeMode, ThemeModeContext } from '@/components/context/ThemeModeContext.tsx';
 import { NavBarContextProvider } from '@/components/navbar/NavBarContextProvider';
 import { LibraryOptionsContextProvider } from '@/components/library/LibraryOptionsProvider';
 import { ActiveDevice, DEFAULT_DEVICE, setActiveDevice } from '@/util/device.ts';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
+import { AppThemes } from '@/lib/ui/AppThemes.ts';
 
 interface Props {
     children: React.ReactNode;
@@ -56,18 +57,21 @@ export const AppContext: React.FC<Props> = ({ children }) => {
         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 [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE);
 
     const darkThemeContext = useMemo(
         () => ({
+            appTheme,
+            setAppTheme,
             themeMode,
             setThemeMode,
             pureBlackMode,
             setPureBlackMode,
         }),
-        [themeMode, pureBlackMode],
+        [themeMode, pureBlackMode, appTheme],
     );
 
     const activeDeviceContext = useMemo(
@@ -76,8 +80,8 @@ export const AppContext: React.FC<Props> = ({ children }) => {
     );
 
     const theme = useMemo(
-        () => createTheme(themeMode, currentDirection, undefined, pureBlackMode),
-        [themeMode, currentDirection, systemThemeMode, pureBlackMode],
+        () => createAndSetTheme(themeMode, appTheme, pureBlackMode, currentDirection),
+        [themeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme],
     );
 
     setActiveDevice(activeDevice);

src/components/context/ThemeModeContext.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { AppThemes } from '@/lib/ui/AppThemes.ts';
 
 export enum ThemeMode {
     SYSTEM = 'system',
@@ -15,6 +16,8 @@ export enum ThemeMode {
 }
 
 type ContextType = {
+    appTheme: AppThemes;
+    setAppTheme: React.Dispatch<React.SetStateAction<AppThemes>>;
     themeMode: ThemeMode;
     setThemeMode: React.Dispatch<React.SetStateAction<ThemeMode>>;
     pureBlackMode: boolean;
@@ -22,6 +25,8 @@ type ContextType = {
 };
 
 export const ThemeModeContext = React.createContext<ContextType>({
+    appTheme: 'default',
+    setAppTheme: (): void => {},
     themeMode: ThemeMode.SYSTEM,
     setThemeMode: (): void => {},
     pureBlackMode: false,

src/components/manga/MangaBadges.tsx

@@ -74,18 +74,19 @@ export const MangaBadges = ({
             {inLibraryIndicator && isInLibrary && (
                 <Typography
                     className="source-manga-library-state-indicator"
-                    sx={{ backgroundColor: 'primary.dark', p: 0.3 }}
+                    sx={{ backgroundColor: 'primary.dark', color: 'primary.contrastText', p: 0.3 }}
                 >
                     {t('manga.button.in_library')}
                 </Typography>
             )}
             {((showUnreadBadge && mode === 'default') || mode === 'duplicate') && (unread ?? 0) > 0 && (
-                <Badge sx={{ backgroundColor: 'primary.dark' }}>{unread}</Badge>
+                <Badge sx={{ backgroundColor: 'primary.main', color: 'primary.contrastText' }}>{unread}</Badge>
             )}
             {((showDownloadBadge && mode === 'default') || mode === 'duplicate') && (downloadCount ?? 0) > 0 && (
                 <Badge
                     sx={{
-                        backgroundColor: 'primary.light',
+                        backgroundColor: 'secondary.main',
+                        color: 'secondary.contrastText',
                     }}
                 >
                     {downloadCount}

src/components/manga/MangaDetails.tsx

@@ -156,7 +156,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
                         },
                     }}
                 >
-                    <OpenInFullIcon fontSize="large" />
+                    <OpenInFullIcon fontSize="large" color="primary" />
                 </Stack>
             </Stack>
             <Modal {...bindPopover(popupState)} sx={{ outline: 0 }}>