From a10d4d2de9b8e8cfce79912d6469e2e1d837184b Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Sat, 4 Apr 2026 03:15:00 +0200
Subject: [PATCH] Theme scrollbars for dark mode

Add global webkit and Firefox scrollbar styling using semantic
color tokens. Fix component scrollbar classes in GlobalSearchBar
and CompanySwitcher from hardcoded gray to theme-aware colors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 resources/css/invoiceshelf.css                | 20 +++++++++++++++++++
 .../scripts/components/CompanySwitcher.vue    |  2 +-
 .../scripts/components/GlobalSearchBar.vue    |  4 ++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/resources/css/invoiceshelf.css b/resources/css/invoiceshelf.css
index 01fe3dd9..c50c145b 100644
--- a/resources/css/invoiceshelf.css
+++ b/resources/css/invoiceshelf.css
@@ -210,6 +210,26 @@ body {
     min-height: 100vh;
     min-height: -webkit-fill-available;
     color: var(--color-heading);
+    scrollbar-color: var(--color-surface-muted) var(--color-surface-secondary);
+}
+
+/* Webkit scrollbars */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-surface-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-surface-muted);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-line-strong);
 }
 
 html {
diff --git a/resources/scripts/components/CompanySwitcher.vue b/resources/scripts/components/CompanySwitcher.vue
index 2881ad62..cf2888ee 100644
--- a/resources/scripts/components/CompanySwitcher.vue
+++ b/resources/scripts/components/CompanySwitcher.vue
@@ -53,7 +53,7 @@
             scrollbar-thin scrollbar-thumb-rounded-full
             w-[300px]
             max-h-[350px]
-            scrollbar-thumb-gray-300 scrollbar-track-gray-10
+            scrollbar-thumb-surface-muted scrollbar-track-surface-secondary
             pb-4
           "
         >
diff --git a/resources/scripts/components/GlobalSearchBar.vue b/resources/scripts/components/GlobalSearchBar.vue
index b3b21653..688787c8 100644
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@@ -29,8 +29,8 @@
         class="
           scrollbar-thin
           scrollbar-thumb-rounded-full
-          scrollbar-thumb-gray-300
-          scrollbar-track-gray-100
+          scrollbar-thumb-surface-muted
+          scrollbar-track-surface-secondary
           overflow-y-auto
           bg-surface
           rounded-md