From dd2c7d353ef7215f7ce7ffeb197f5bf0a9481b0d Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 13 Aug 2025 16:06:02 +0200
Subject: [PATCH] style(frontend): dark scrollbars for song list, main content,
 and details panel to match theme

---
 packages/frontend/src/App.tsx                 | 24 +++++++++++--------
 .../src/components/PaginatedSongList.tsx      | 19 +++++++++++++++
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index 7df6c84..c427b51 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -636,7 +636,14 @@ const RekordboxReader: React.FC = () => {
                     overflow="hidden" 
                   >
                     {/* Song List */}
-                    <Box flex={1} overflowY="auto" minH={0}>
+                    <Box flex={1} overflowY="auto" minH={0} 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)' }
+                    }}>
                       <PaginatedSongList
                         songs={songs}
                         onAddToPlaylist={handleAddSongsToPlaylist}
@@ -676,15 +683,12 @@ const RekordboxReader: React.FC = () => {
                         bg="gray.900"
                         minH={0}
                         sx={{
-                          '&::-webkit-scrollbar': {
-                            width: '8px',
-                            borderRadius: '8px',
-                            backgroundColor: 'gray.900',
-                          },
-                          '&::-webkit-scrollbar-thumb': {
-                            backgroundColor: 'gray.700',
-                            borderRadius: '8px',
-                          },
+                          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)' },
                         }}
                       >
                         <SongDetails song={selectedSong} />
diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index caf5f15..0274ff7 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -502,6 +502,25 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
         overflowY="auto" 
         mt={2} 
         id="song-list-container"
+        sx={{
+          scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
+          scrollbarWidth: 'thin',
+          '&::-webkit-scrollbar': {
+            width: '8px',
+            height: '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)'
+          }
+        }}
       >
         <Box position="relative" height={`${rowVirtualizer.getTotalSize()}px`}>
           <Box onDragEnd={handleDragEnd}>