From be471ba06b55c1af0377bb435f1f55d3577f2588 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Wed, 4 Sep 2024 22:26:40 +0200
Subject: [PATCH] Update mui theme

---
 src/components/manga/MangaDetails.tsx         |  2 +-
 src/components/navbar/DefaultNavBar.tsx       |  3 +-
 .../navbar/navigation/DesktopSideBar.tsx      | 14 +++-
 .../navbar/navigation/MobileBottomBar.tsx     |  1 -
 src/components/tracker/TrackerActiveCard.tsx  |  2 +-
 src/components/tracker/TrackerMangaCard.tsx   |  1 +
 src/components/tracker/TrackerSearch.tsx      |  1 -
 src/screens/DownloadQueue.tsx                 | 10 +--
 src/theme.ts                                  | 81 ++++++++++---------
 9 files changed, 62 insertions(+), 53 deletions(-)

diff --git a/src/components/manga/MangaDetails.tsx b/src/components/manga/MangaDetails.tsx
index 3cc09439..5be25ab9 100644
--- a/src/components/manga/MangaDetails.tsx
+++ b/src/components/manga/MangaDetails.tsx
@@ -200,7 +200,7 @@ const DescriptionGenre = ({
                         position: isCollapsed ? 'absolute' : null,
                         width: '100%',
                         bottom: 0,
-                        background: (theme) => `linear-gradient(transparent 1px, ${theme.palette.background.paper})`,
+                        background: (theme) => `linear-gradient(transparent 1px, ${theme.palette.background.default})`,
                     }}
                 >
                     <IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}>
diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
index 8f797329..4f00de2e 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/src/components/navbar/DefaultNavBar.tsx
@@ -138,7 +138,7 @@ export function DefaultNavBar() {
                                 alignItems: 'center',
                             }}
                         >
-                            <IconButton color="inherit" aria-label="open drawer" onClick={() => setIsCollapsed(false)}>
+                            <IconButton aria-label="open drawer" onClick={() => setIsCollapsed(false)}>
                                 <MenuIcon />
                             </IconButton>
                         </Stack>
@@ -157,7 +157,6 @@ export function DefaultNavBar() {
                                 component="button"
                                 sx={{ marginRight: 2 }}
                                 size="large"
-                                color="inherit"
                                 aria-label="menu"
                                 onClick={handleBack}
                             >
diff --git a/src/components/navbar/navigation/DesktopSideBar.tsx b/src/components/navbar/navigation/DesktopSideBar.tsx
index de188ff3..64ad6b5c 100644
--- a/src/components/navbar/navigation/DesktopSideBar.tsx
+++ b/src/components/navbar/navigation/DesktopSideBar.tsx
@@ -58,7 +58,14 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
             <Tooltip title={t(title)} placement="right">
                 <ListItem sx={listItemProps}>
                     <ListItemIcon sx={listItemIconProps}>
-                        <Icon sx={{ color: isActive ? 'primary.main' : undefined }} />
+                        <Icon
+                            sx={{
+                                color: isActive ? 'primary.dark' : undefined,
+                                ...theme.applyStyles('dark', {
+                                    color: isActive ? 'primary.light' : undefined,
+                                }),
+                            }}
+                        />
                     </ListItemIcon>
                     <ListItemText
                         primary={t(title)}
@@ -69,7 +76,10 @@ const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 ...(isCollapsed ? theme.typography.caption : {}),
-                                color: isActive ? 'primary.main' : undefined,
+                                color: isActive ? 'primary.dark' : undefined,
+                                ...theme.applyStyles('dark', {
+                                    color: isActive ? 'primary.light' : undefined,
+                                }),
                             },
                         }}
                     />
diff --git a/src/components/navbar/navigation/MobileBottomBar.tsx b/src/components/navbar/navigation/MobileBottomBar.tsx
index 737e0de6..9a327d2e 100644
--- a/src/components/navbar/navigation/MobileBottomBar.tsx
+++ b/src/components/navbar/navigation/MobileBottomBar.tsx
@@ -40,7 +40,6 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
             elevation={3}
         >
             <BottomNavigation
-                sx={{ backgroundColor: 'custom.light' }}
                 showLabels
                 value={selectedNavBarItem}
                 onChange={(_, newValue: string) => {
diff --git a/src/components/tracker/TrackerActiveCard.tsx b/src/components/tracker/TrackerActiveCard.tsx
index 6b4f53ca..79c7d655 100644
--- a/src/components/tracker/TrackerActiveCard.tsx
+++ b/src/components/tracker/TrackerActiveCard.tsx
@@ -257,7 +257,7 @@ export const TrackerActiveCard = ({
         <Card sx={CARD_STYLING}>
             <CardContent sx={{ padding: 0 }}>
                 <TrackerActiveHeader trackRecord={trackRecord} tracker={tracker} openSearch={onClick} />
-                <Card>
+                <Card sx={{ backgroundColor: 'background.default' }}>
                     <CardContent sx={{ padding: '0' }}>
                         <Box sx={{ padding: 1 }}>
                             <TrackerActiveCardInfoRow>
diff --git a/src/components/tracker/TrackerMangaCard.tsx b/src/components/tracker/TrackerMangaCard.tsx
index 58adc676..4467b294 100644
--- a/src/components/tracker/TrackerMangaCard.tsx
+++ b/src/components/tracker/TrackerMangaCard.tsx
@@ -117,6 +117,7 @@ export const TrackerMangaCard = ({
     return (
         <Card
             sx={{
+                backgroundColor: 'background.default',
                 marginBottom: 2,
                 '&:last-child': { marginBottom: 8 },
             }}
diff --git a/src/components/tracker/TrackerSearch.tsx b/src/components/tracker/TrackerSearch.tsx
index 1b832dd1..d5adfdd3 100644
--- a/src/components/tracker/TrackerSearch.tsx
+++ b/src/components/tracker/TrackerSearch.tsx
@@ -182,7 +182,6 @@ export const TrackerSearch = ({
                         <Button
                             disabled={bindTrackerMutation.loading}
                             size="large"
-                            color="primary"
                             variant="contained"
                             onClick={trackManga}
                             sx={{ width: '75%' }}
diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index 60c1ec9e..70656e86 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -44,23 +44,17 @@ const HeightPreservingItem = ({ children, ...props }: BoxProps) => (
 const DownloadChapterItem = ({
     provided,
     item,
-    isDragging,
     handleDelete,
 }: {
     provided: DraggableProvided;
     item: ChapterDownloadStatus;
-    isDragging: boolean;
     handleDelete: (chapter: ChapterIdInfo) => void;
 }) => {
     const { t } = useTranslation();
 
     return (
         <Box {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} sx={{ p: 1, pb: 0 }}>
-            <Card
-                sx={{
-                    backgroundColor: isDragging ? 'custom.light' : undefined,
-                }}
-            >
+            <Card>
                 <CardActionArea component={Link} to={`/manga/${item.manga.id}`}>
                     <CardContent
                         sx={{
@@ -253,7 +247,6 @@ export const DownloadQueue: React.FC = () => {
                     <DownloadChapterItem
                         provided={provided}
                         item={queue[rubric.source.index]}
-                        isDragging={snapshot.isDragging}
                         handleDelete={handleDelete}
                     />
                 )}
@@ -277,7 +270,6 @@ export const DownloadQueue: React.FC = () => {
                                         <DownloadChapterItem
                                             provided={draggableProvided}
                                             item={item}
-                                            isDragging={false}
                                             handleDelete={handleDelete}
                                         />
                                     )}
diff --git a/src/theme.ts b/src/theme.ts
index c08f7f0b..ed13941a 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -11,52 +11,63 @@ import {
     darken,
     Direction,
     lighten,
-    Palette as MuiPalette,
+    Palette,
     responsiveFontSizes,
     Theme,
 } from '@mui/material/styles';
 
-declare module '@mui/material/styles/createPalette' {
-    interface Palette {
-        custom: Palette['primary'];
-    }
-
-    interface PaletteOptions {
-        custom: PaletteOptions['primary'];
-    }
-}
-
 export const SCROLLBAR_WIDTH = 14;
 
-type DefaultMuiPalette = Omit<MuiPalette, 'custom'>;
-type DefaultMuiTheme = Omit<Theme, 'palette'> & { palette: DefaultMuiPalette };
-
 let theme: Theme;
 export const getCurrentTheme = () => theme;
-export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
-    const baseTheme: DefaultMuiTheme = createMuiTheme({
+export const createTheme = (
+    dark?: boolean,
+    direction: Direction = 'ltr',
+    color: string = '#5b74ef',
+    pureBlackMode: boolean = false,
+) => {
+    const isDarkMode = dark || pureBlackMode;
+
+    const baseTheme = createMuiTheme({
         direction,
         palette: {
-            mode: dark ? 'dark' : 'light',
+            mode: isDarkMode ? 'dark' : 'light',
+            primary: {
+                main: color,
+            },
         },
-    } as Theme);
+    });
 
-    const suwayomiTheme = createMuiTheme(
-        {
-            palette: {
-                custom: {
-                    main: dark ? baseTheme.palette.common.black : baseTheme.palette.common.white,
-                    light: dark ? baseTheme.palette.grey[900] : baseTheme.palette.grey[100],
+    const backgroundTrueBlack: Palette['background'] = {
+        paper: '#111',
+        default: '#000',
+    };
+    const backgroundDark: Palette['background'] = {
+        paper: darken(baseTheme.palette.primary.main, 0.75),
+        default: darken(baseTheme.palette.primary.main, 0.85),
+    };
+    const backgroundLight: Palette['background'] = {
+        paper: lighten(baseTheme.palette.primary.dark, 0.75),
+        default: lighten(baseTheme.palette.primary.dark, 0.85),
+    };
+    const backgroundThemeMode = isDarkMode ? backgroundDark : backgroundLight;
+    const background = pureBlackMode ? backgroundTrueBlack : backgroundThemeMode;
+
+    const colorTheme = createMuiTheme(baseTheme, {
+        palette: {
+            background,
+        },
+    });
+
+    const suwayomiTheme = createMuiTheme(colorTheme, {
+        components: {
+            MuiUseMediaQuery: {
+                defaultProps: {
+                    noSsr: true,
                 },
             },
-            components: {
-                MuiUseMediaQuery: {
-                    defaultProps: {
-                        noSsr: true,
-                    },
-                },
-                MuiCssBaseline: {
-                    styleOverrides: `
+            MuiCssBaseline: {
+                styleOverrides: `
                         *::-webkit-scrollbar {
                           width: ${SCROLLBAR_WIDTH}px;
                         }
@@ -64,17 +75,15 @@ export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
                           border: 4px solid rgba(0, 0, 0, 0);
                           background-clip: padding-box;
                           border-radius: 9999px;
-                          background-color: ${dark ? lighten(baseTheme.palette.background.default, 0.4) : darken(baseTheme.palette.background.default, 0.4)};
+                          background-color: ${colorTheme.palette.primary[isDarkMode ? 'dark' : 'light']};
                         }
                         *::-webkit-scrollbar-thumb:hover {
                           border-width: 2px;
                         }
                     `,
-                },
             },
         },
-        baseTheme,
-    );
+    });
 
     theme = responsiveFontSizes(suwayomiTheme);