From 65f21f17b1375dd24851c0e71ea5a77e61c1b4bd Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 9 Sep 2024 21:12:05 +0200
Subject: [PATCH] Support overriding mui theme "components"

---
 src/theme.ts | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/theme.ts b/src/theme.ts
index b5bd5472..4a1e5e4f 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -75,13 +75,45 @@ export const createTheme = (
 
     const suwayomiTheme = createMuiTheme(colorTheme, {
         components: {
+            ...appTheme.muiTheme.components,
             MuiUseMediaQuery: {
                 defaultProps: {
                     noSsr: true,
                 },
             },
             MuiCssBaseline: {
-                styleOverrides: `
+                ...appTheme.muiTheme.components?.MuiCssBaseline,
+                styleOverrides:
+                    typeof appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides === 'object'
+                        ? {
+                              ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides,
+                              '*::-webkit-scrollbar': {
+                                  width: `${SCROLLBAR_SIZE}px`,
+                                  height: `${SCROLLBAR_SIZE}px`,
+                                  // @ts-ignore - '*::-webkit-scrollbar' is a valid key
+                                  ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
+                                      '*::-webkit-scrollbar'
+                                  ],
+                              },
+                              '*::-webkit-scrollbar-thumb': {
+                                  border: '4px solid rgba(0, 0, 0, 0)',
+                                  backgroundClip: 'padding-box',
+                                  borderRadius: '9999px',
+                                  backgroundColor: `${colorTheme.palette.primary[isDarkMode ? 'dark' : 'light']}`,
+                                  // @ts-ignore - '*::-webkit-scrollbar-thumb' is a valid key
+                                  ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
+                                      '*::-webkit-scrollbar-thumb'
+                                  ],
+                              },
+                              '*::-webkit-scrollbar-thumb:hover': {
+                                  borderWidth: '2px',
+                                  // @ts-ignore - '*::-webkit-scrollbar-thumb:hover' is a valid key
+                                  ...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
+                                      '*::-webkit-scrollbar-thumb:hover'
+                                  ],
+                              },
+                          }
+                        : `
                         *::-webkit-scrollbar {
                           width: ${SCROLLBAR_SIZE}px;
                           height: ${SCROLLBAR_SIZE}px;
@@ -95,6 +127,8 @@ export const createTheme = (
                         *::-webkit-scrollbar-thumb:hover {
                           border-width: 2px;
                         }
+                        
+                        ${appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides ?? ''}
                     `,
             },
         },