From 8a26d86059fab9df66ba58d6e504bfbde501dc5f Mon Sep 17 00:00:00 2001
From: pu-raihan <raihanbinmary@gmail.com>
Date: Sat, 7 Sep 2024 07:25:38 +0530
Subject: [PATCH] fix: added dark scrollbar for the whole html document

---
 src/styles/index.css | 14 ++++++++++++++
 src/utils/theme.ts   |  6 +++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index a4046f8e..46135523 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -24,12 +24,19 @@ html {
   color: theme('colors.black');
 }
 
+html.dark {
+  color: theme('colors.white');
+  background-color: theme('colors.gray.900');
+}
+
 input[type='number']::-webkit-inner-spin-button {
   appearance: none;
 }
+
 input[type='date']::-webkit-calendar-picker-indicator {
   background-color: theme('colors.gray.900');
 }
+
 .window-drag {
   -webkit-app-region: drag;
 }
@@ -173,26 +180,32 @@ input[type='date']::-webkit-calendar-picker-indicator {
   background: transparent;
 }
 
+.dark.custom-scroll::-webkit-scrollbar-track:vertical,
 .dark .custom-scroll::-webkit-scrollbar-track:vertical {
   border-left-color: theme('colors.gray.800');
 }
 
+.dark.custom-scroll::-webkit-scrollbar-track:horizontal,
 .dark .custom-scroll::-webkit-scrollbar-track:horizontal {
   border-top-color: theme('colors.gray.800');
 }
 
+.dark.custom-scroll-thumb1::-webkit-scrollbar-thumb,
 .dark .custom-scroll-thumb1::-webkit-scrollbar-thumb {
   background: theme('colors.gray.850');
 }
 
+.dark.custom-scroll-thumb1::-webkit-scrollbar-thumb:hover,
 .dark .custom-scroll-thumb1::-webkit-scrollbar-thumb:hover {
   background: theme('colors.gray.800');
 }
 
+.dark.custom-scroll-thumb2::-webkit-scrollbar-thumb,
 .dark .custom-scroll-thumb2::-webkit-scrollbar-thumb {
   background: theme('colors.gray.800');
 }
 
+.dark.custom-scroll-thumb2::-webkit-scrollbar-thumb:hover,
 .dark .custom-scroll-thumb2::-webkit-scrollbar-thumb:hover {
   background: theme('colors.gray.875');
 }
@@ -232,6 +245,7 @@ input[type='date']::-webkit-calendar-picker-indicator {
   border-right: solid 1px theme('colors.gray.200');
 }
 
+[dir='rtl'].dark.custom-scroll::-webkit-scrollbar-track:vertical,
 [dir='rtl'].dark .custom-scroll::-webkit-scrollbar-track:vertical {
   border-right: solid 1px theme('colors.gray.850');
 }
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 06607500..dbcdfb4c 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,6 +1,10 @@
 export function setDarkMode(darkMode: boolean): void {
   if (darkMode) {
-    document.documentElement.classList.add('dark');
+    document.documentElement.classList.add(
+      'dark',
+      'custom-scroll',
+      'custom-scroll-thumb1'
+    );
     return;
   }
   document.documentElement.classList.remove('dark');