perf: implement scrolbar theme

Lednerb · Nov 14, 2023 · db1e526 · db1e526
1 parent cfd0fe8
commit db1e526
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/v4/assets/sass/dark-theme.scss b/v4/assets/sass/dark-theme.scss
@@ -52,6 +52,24 @@ $footer-headline-color: {{ .Param "footerHeadlineColor" | default "darken(invert
   }
 }
 
+* {
+    ::-webkit-scrollbar {
+      width: 0.6em;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: $text-color;
+        border-radius: 0.6em;
+        border-right: 0.3em solid transparent;
+        border-left: 0.3em solid transparent;
+        // background-clip: padding-box;
+    }
+    ::-webkit-scrollbar-track {
+        background: $special-color;
+    }
+    scrollbar-color: $text-color $special-color;
+}
+
+
 // Dependencies
 @import '../../assets/sass/_vendor/normalize.scss';
 @import '../../assets/sass/_vendor/skeleton.scss';

diff --git a/v4/assets/sass/theme.scss b/v4/assets/sass/theme.scss
@@ -52,6 +52,23 @@ $footer-headline-color: {{ .Param "footerHeadlineColor" | default "#444" }};
   }
 }
 
+* {
+    ::-webkit-scrollbar {
+      width: 0.6em;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: $special-color;
+        border-radius: 0.6em;
+        border-right: 0.3em solid transparent;
+        border-left: 0.3em solid transparent;
+        // background-clip: padding-box;
+    }
+    ::-webkit-scrollbar-track {
+        background: darken($page-background-color,10);
+    }
+    scrollbar-color: $special-color darken($page-background-color,10);
+}
+
 // Dependencies
 @import '../../assets/sass/_vendor/normalize.scss';
 @import '../../assets/sass/_vendor/skeleton.scss';