Custom the scrollbar on Webkit browsers

the default scrollbar on Windows looks like shit
Panhx0601 · Sep 14, 2021 · c0753c9 · c0753c9
1 parent 13da116
commit c0753c9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -53,6 +53,26 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
+/* --- Scrollbar --- */
+
+$scrollbar-size: 7px;
+
+::-webkit-scrollbar {
+  width: $scrollbar-size;
+  height: $scrollbar-size;
+}
+
+::-webkit-scrollbar-track {
+  @at-root body#{&} {
+    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-bg);
+  border-radius: calc(#{$scrollbar-size} / 2);
+}
+
 /* --- Typography --- */
 
 h1 {

diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
@@ -12,6 +12,8 @@
   --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
   --footer-bg-color: var(--main-wrapper-bg);
+  --scrollbar-track-bg: rgba(0,0,0,0.3);
+  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
   /* common color */
   --text-color: rgb(175, 176, 177);

diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
@@ -24,6 +24,8 @@
   --btn-box-shadow: #eaeaea;
   --checkbox-color: #c5c5c5;
   --checkbox-checked-color: #07a8f7;
+  --scrollbar-track-bg: rgba(0,0,0,0.3);
+  --scrollbar-thumb-bg: rgba(0,0,0,0.3);
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);