From 9516fa54ec5286fa43162257dfece316766cf736 Mon Sep 17 00:00:00 2001
From: EffessDev <faseeh1080@gmail.com>
Date: Mon, 6 Jul 2026 19:23:03 +0530
Subject: [PATCH] feat: implement dark mode for scrollbars

---
 src/layouts/default.vue |  3 ---
 src/styles/index.css    | 26 ++++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 3e5f9108..70efb12b 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -25,9 +25,6 @@ const rootRepositoryRoutes = ['contributing', 'changelog']
           <div
             class="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block"
           />
-          <div
-            class="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block"
-          />
           <div class="w-64 pr-8 xl:w-72 xl:pr-16">
             <the-sidebar-desktop />
           </div>
diff --git a/src/styles/index.css b/src/styles/index.css
index 84b3d79d..9f901e06 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -5,6 +5,32 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  color-scheme: light;
+  --scrollbar-track: white;
+  --scrollbar-thumb: #cbd5e1;
+}
+
+html.dark {
+  color-scheme: dark;
+  --scrollbar-track: #111827;
+  --scrollbar-thumb: #475569;
+}
+
+html,
+body {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 999px;
+}
+
 /* 
  * Prose overrides - must be loaded after @tailwind utilities
  * This file contains styles that override Tailwind Typography defaults