feat: new config param customizeScrollbar

6 files changed, 38 insertions, 20 deletions

diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss
index 1696e50..7ee78bd 100644
--- a/assets/scss/base/_base.scss
+++ b/assets/scss/base/_base.scss
@@ -95,23 +95,3 @@ a {
 ::selection {
     background-color: alpha(var(--color-primary), 0.3);
 }
-
-::-webkit-scrollbar {
-    width: 0.5rem;
-    height: 0.5rem;
-}
-::-webkit-scrollbar-track {
-    background-color: var(--color-bg);
-}
-::-webkit-scrollbar-thumb {
-    background-color: var(--color-contrast-low);
-    &:hover {
-        background-color: alpha(var(--color-primary), 0.5);
-    }
-    &:active {
-        background-color: alpha(var(--color-primary), 0.75);
-    }
-}
-::-webkit-scrollbar-corner {
-    background-color: var(--color-bg);
-}
diff --git a/assets/scss/base/_scrollbar.scss b/assets/scss/base/_scrollbar.scss
new file mode 100644
index 0000000..3852ce4
--- /dev/null
+++ b/assets/scss/base/_scrollbar.scss
@@ -0,0 +1,19 @@
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+::-webkit-scrollbar-track {
+  background-color: var(--color-bg);
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-contrast-low);
+  &:hover {
+      background-color: alpha(var(--color-primary), 0.5);
+  }
+  &:active {
+      background-color: alpha(var(--color-primary), 0.75);
+  }
+}
+::-webkit-scrollbar-corner {
+  background-color: var(--color-bg);
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index d6960b8..dd1f449 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -88,6 +88,10 @@ $baseRelURL: "{{ strings.TrimSuffix (.Site.BaseURL | relURL) "/" }}";
 
 @import "base/base";
 
+{{ if .Site.Params.customizeScrollbar }}
+    @import "base/scrollbar";
+{{ end }}
+
 
 // Typography
 
diff --git a/config-examples/en/config.toml b/config-examples/en/config.toml
index 0166b42..a5f783b 100644
--- a/config-examples/en/config.toml
+++ b/config-examples/en/config.toml
@@ -961,6 +961,11 @@ uglyURLs = false
 
 
     ######################################
+    # Scrollbar
+    customizeScrollbar = true
+
+
+    ######################################
     # Typography
 
     ######################################
diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
index b69d089..b4e8d1d 100644
--- a/config-examples/zh-cn/config.toml
+++ b/config-examples/zh-cn/config.toml
@@ -911,6 +911,11 @@ uglyURLs = false
 
 
     ######################################
+    # 滚动条
+    customizeScrollbar = true
+
+
+    ######################################
     # 字体排版
 
     ######################################
diff --git a/config-examples/zh-tw/config.toml b/config-examples/zh-tw/config.toml
index ee9cef5..677969e 100644
--- a/config-examples/zh-tw/config.toml
+++ b/config-examples/zh-tw/config.toml
@@ -911,6 +911,11 @@ uglyURLs = false
 
 
     ######################################
+    # 滾動條
+    customizeScrollbar = true
+
+
+    ######################################
     # 字型排版
 
     ######################################