From feac54e2e0d65b4833245e31c16ed3521c8f811d Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 13 Aug 2025 16:08:38 +0200
Subject: [PATCH] style(frontend): dark scrollbars for playlist sidebar and
 mobile drawer

---
 packages/frontend/src/App.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index c427b51..b36f486 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -587,6 +587,14 @@ const RekordboxReader: React.FC = () => {
                       borderColor="gray.700"
                       overflowY="auto"
                       bg="gray.900"
+                      sx={{
+                        scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
+                        scrollbarWidth: 'thin',
+                        '&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
+                        '&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--chakra-colors-gray-700)', borderRadius: '8px' },
+                        '&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'var(--chakra-colors-gray-600)' },
+                        '&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' }
+                      }}
                     >
                       {playlistManager}
                       <ResizeHandle onMouseDown={handleResizeStart} />
@@ -621,7 +629,14 @@ const RekordboxReader: React.FC = () => {
                           _hover={{ color: "blue.300", bg: "whiteAlpha.200" }}
                         />
                       </DrawerHeader>
-                      <DrawerBody p={2}>
+                      <DrawerBody p={2} sx={{
+                        scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
+                        scrollbarWidth: 'thin',
+                        '&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
+                        '&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--chakra-colors-gray-700)', borderRadius: '8px' },
+                        '&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'var(--chakra-colors-gray-600)' },
+                        '&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' }
+                      }}>
                         {playlistManager}
                       </DrawerBody>
                     </DrawerContent>