From b207639445e3f871c92cf9db0058aa0719f552e3 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 20 May 2024 16:28:36 +0200
Subject: [PATCH] Change scrollbar styling

---
 src/theme.ts | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/theme.ts b/src/theme.ts
index 130051ab..608b597f 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -6,7 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { createTheme as createMuiTheme, Direction, Palette as MuiPalette, Theme } from '@mui/material/styles';
+import {
+    createTheme as createMuiTheme,
+    darken,
+    Direction,
+    lighten,
+    Palette as MuiPalette,
+    Theme,
+} from '@mui/material/styles';
 
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
@@ -47,16 +54,19 @@ export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
                 },
                 MuiCssBaseline: {
                     styleOverrides: `
-                *::-webkit-scrollbar {
-                    width: 10px;
-                    background: ${dark ? '#222' : '#e1e1e1'};   
-                }
-                
-                *::-webkit-scrollbar-thumb {
-                    background: ${dark ? '#111' : '#aaa'};
-                    border-radius: 5px;
-                }
-            `,
+                        *::-webkit-scrollbar {
+                          width: 14px;
+                        }
+                        *::-webkit-scrollbar-thumb {
+                          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)};
+                        }
+                        *::-webkit-scrollbar-thumb:hover {
+                          border-width: 2px;
+                        }
+                    `,
                 },
             },
         },