Update mui theme

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') }}>

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}
                             >

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,
+                                }),
                             },
                         }}
                     />

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) => {

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>

src/components/tracker/TrackerMangaCard.tsx

@@ -117,6 +117,7 @@ export const TrackerMangaCard = ({
     return (
         <Card
             sx={{
+                backgroundColor: 'background.default',
                 marginBottom: 2,
                 '&:last-child': { marginBottom: 8 },
             }}

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%' }}

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}
                                         />
                                     )}

src/theme.ts

@@ -11,44 +11,55 @@ 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(
-        {
+    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: {
-                custom: {
-                    main: dark ? baseTheme.palette.common.black : baseTheme.palette.common.white,
-                    light: dark ? baseTheme.palette.grey[900] : baseTheme.palette.grey[100],
-                },
+            background,
         },
+    });
+
+    const suwayomiTheme = createMuiTheme(colorTheme, {
         components: {
             MuiUseMediaQuery: {
                 defaultProps: {
@@ -64,7 +75,7 @@ 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;
@@ -72,9 +83,7 @@ export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
                     `,
             },
         },
-        },
-        baseTheme,
-    );
+    });
 
     theme = responsiveFontSizes(suwayomiTheme);