feat: using custom scrollbar css for dark mdoe

gitify-app · Jun 16, 2024 · 9d67e0a · 9d67e0a
1 parent db9733c
commit 9d67e0a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git 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
@@ -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;
+}