From db1e526a1df1521a23b30a65ad83bf9366ce0015 Mon Sep 17 00:00:00 2001
From: atsuyaw <watanabe@osakafu-u.net>
Date: Tue, 14 Nov 2023 18:51:03 +0900
Subject: [PATCH] perf: implement scrolbar theme

---
 v4/assets/sass/dark-theme.scss | 18 ++++++++++++++++++
 v4/assets/sass/theme.scss      | 17 +++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/v4/assets/sass/dark-theme.scss b/v4/assets/sass/dark-theme.scss
index 6071d6c87..a8c46bf7a 100644
--- 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
index 349783543..fcda6fa96 100644
--- 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';