From 6260a9420a3485053e50d7d89acf3ce779ad33c5 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Sun, 16 Jun 2024 23:16:30 +0300
Subject: [PATCH 1/3] feat: using custom scrollbar css for dark mode

---
 src/index.tsx            |  1 +
 src/styles/scrollbar.css | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/styles/scrollbar.css

diff --git a/src/index.tsx b/src/index.tsx
index 7e00ed36a..4586fd9b2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client';
 
 import 'nprogress/nprogress.css';
 import 'tailwindcss/tailwind.css';
+import './styles/scrollbar.css';
 
 import { App } from './app';
 
diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
new file mode 100644
index 000000000..27b5f5e7f
--- /dev/null
+++ b/src/styles/scrollbar.css
@@ -0,0 +1,21 @@
+html.dark::-webkit-scrollbar,
+html.dark div.flex-grow::-webkit-scrollbar {
+    width: 10px;
+}
+
+html.dark::-webkit-scrollbar-track,
+html.dark div.flex-grow::-webkit-scrollbar-track {
+    background-color: #090E15;
+}
+
+html.dark::-webkit-scrollbar-thumb,
+html.dark div.flex-grow::-webkit-scrollbar-thumb {
+    background-color: #24292e;
+    border-radius: 10px;
+}
+
+html.dark::-webkit-scrollbar-thumb:hover,
+html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
+    background-color: #3a3f44;
+    border-radius: 10px;
+}

From ed673057ac86541f9c92b6734fd7327151681a3d Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Sun, 16 Jun 2024 23:35:50 +0300
Subject: [PATCH 2/3] feat: move scrollbar css into index.html

---
 index.html               | 22 ++++++++++++++++++++++
 src/index.tsx            |  1 -
 src/styles/scrollbar.css | 21 ---------------------
 3 files changed, 22 insertions(+), 22 deletions(-)
 delete mode 100644 src/styles/scrollbar.css

diff --git a/index.html b/index.html
index 12888be56..dbac7ee69 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,28 @@
       -webkit-user-select: none;
     }
 
+    html.dark::-webkit-scrollbar,
+    html.dark div.flex-grow::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    html.dark::-webkit-scrollbar-track,
+    html.dark div.flex-grow::-webkit-scrollbar-track {
+        background-color: #090E15;
+    }
+
+    html.dark::-webkit-scrollbar-thumb,
+    html.dark div.flex-grow::-webkit-scrollbar-thumb {
+        background-color: #24292e;
+        border-radius: 10px;
+    }
+
+    html.dark::-webkit-scrollbar-thumb:hover,
+    html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
+        background-color: #3a3f44;
+        border-radius: 10px;
+    }
+
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
         "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
diff --git a/src/index.tsx b/src/index.tsx
index 4586fd9b2..7e00ed36a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,6 @@ import { createRoot } from 'react-dom/client';
 
 import 'nprogress/nprogress.css';
 import 'tailwindcss/tailwind.css';
-import './styles/scrollbar.css';
 
 import { App } from './app';
 
diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
deleted file mode 100644
index 27b5f5e7f..000000000
--- a/src/styles/scrollbar.css
+++ /dev/null
@@ -1,21 +0,0 @@
-html.dark::-webkit-scrollbar,
-html.dark div.flex-grow::-webkit-scrollbar {
-    width: 10px;
-}
-
-html.dark::-webkit-scrollbar-track,
-html.dark div.flex-grow::-webkit-scrollbar-track {
-    background-color: #090E15;
-}
-
-html.dark::-webkit-scrollbar-thumb,
-html.dark div.flex-grow::-webkit-scrollbar-thumb {
-    background-color: #24292e;
-    border-radius: 10px;
-}
-
-html.dark::-webkit-scrollbar-thumb:hover,
-html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
-    background-color: #3a3f44;
-    border-radius: 10px;
-}

From f600cdf137f7641f796af83a800b3807926f4481 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Mon, 17 Jun 2024 00:37:26 +0300
Subject: [PATCH 3/3] feat: add custom scrollbar css to light mode

note: `html::-webkit-scrollbar` is used because a top level `::-webkit-scrollbar` would override the `html.dark::-webkit-scrollbar` style even with `!important`
---
 index.html | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index dbac7ee69..0d6c1a871 100644
--- a/index.html
+++ b/index.html
@@ -25,11 +25,23 @@
       -webkit-user-select: none;
     }
 
-    html.dark::-webkit-scrollbar,
-    html.dark div.flex-grow::-webkit-scrollbar {
+    html::-webkit-scrollbar,
+    div.flex-grow::-webkit-scrollbar {
         width: 10px;
     }
 
+    html::-webkit-scrollbar-thumb,
+    div.flex-grow::-webkit-scrollbar-thumb {
+        background-color: #c1c1c1;
+        border-radius: 10px;
+    }
+
+    html::-webkit-scrollbar-thumb:hover,
+    div.flex-grow::-webkit-scrollbar-thumb:hover {
+        background-color: #a8a8a8;
+        border-radius: 10px;
+    }
+
     html.dark::-webkit-scrollbar-track,
     html.dark div.flex-grow::-webkit-scrollbar-track {
         background-color: #090E15;
@@ -38,13 +50,11 @@
     html.dark::-webkit-scrollbar-thumb,
     html.dark div.flex-grow::-webkit-scrollbar-thumb {
         background-color: #24292e;
-        border-radius: 10px;
     }
 
     html.dark::-webkit-scrollbar-thumb:hover,
     html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
         background-color: #3a3f44;
-        border-radius: 10px;
     }
 
     body {