Fix scrollbar color on all platforms

Fix #6
jhildenbiddle · Mar 8, 2024 · dba7ba0 · dba7ba0
1 parent e340320
commit dba7ba0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/src/core/app.css b/src/core/app.css
@@ -21,6 +21,21 @@
 /* ========================================================================== */
 /* App
 /* ========================================================================== */
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color);
+}
+
+.mac-os {
+    ::-webkit-scrollbar {
+      max-width: var(--scrollbar-width);
+      max-height: var(--scrollbar-width);
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 100vw;
+    }
+}
+
 /* Tabs */
 body:not([class*="seamless"]) :is(#typora-sidebar, content) {
     border-top: 1px solid var(--border-color);

diff --git a/src/core/vars-theme-dark.css b/src/core/vars-theme-dark.css
@@ -22,6 +22,7 @@
     --input-background : var(--mono-50);
     --menu-background  : var(--mono-100);
     --menu-border-width: 1px;
+    --scrollbar-thumb-color: var(--mono-200);
 
     /* Elements */
     --kbd-background  : var(--mono-100);

diff --git a/src/core/vars-theme.css b/src/core/vars-theme.css
@@ -93,6 +93,8 @@
     --menu-background             : #fff;
     --menu-border-width           : 0;
     --menu-color                  : inherit;
+    --scrollbar-thumb-color       : var(--mono-300);
+    --scrollbar-width             : 6px;
     --search-match-color          : var(--text-color);
     --selection-color             : ;
     --sidebar-active-background   : var(--color-hover);

diff --git a/src/themeable-dark.css b/src/themeable-dark.css
@@ -1,7 +1,3 @@
 @import "core/_import.css";
 @import "core/vars-palette-dark.css" screen;
 @import "core/vars-theme-dark.css" screen;
-
-:not(.mac-os) ::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.1);
-}