feat: custom click-to-top config support

3 files changed, 24 insertions, 2 deletions

diff --git a/_config.yml b/_config.yml
index 40d9762..742c7f2 100644
--- a/_config.yml
+++ b/_config.yml
@@ -195,6 +195,15 @@ yat:
 #    left: 100
 #    right: 100
 
+# Click to top settings
+# click_to_top:
+#   light:
+#     background_color: "white"
+#     color: "#454545"
+#   dark:
+#     background_color: "#34323d"
+#     color: "#bbb"
+
 # Disqus comments
 # disqus:
 #   shortname: "Your Disqus username"
diff --git a/_sass/misc/click-to-top.scss b/_sass/misc/click-to-top.scss
index 00f543c..84495aa 100644
--- a/_sass/misc/click-to-top.scss
+++ b/_sass/misc/click-to-top.scss
@@ -9,7 +9,6 @@
   border-radius: 32px;
   right: 60px;
   bottom: 48px;
-  background: white;
   cursor: pointer;
   opacity: 0;
   transform: translateY(10px);
@@ -39,8 +38,16 @@
   transform: translateY(0);
 }
 
+html[data-theme="light"] {
+  .click-to-top {
+    background-color: $click-to-top-light-background-color;
+    color: $click-to-top-light-color;
+  }
+}
+
 html[data-theme="dark"] {
   .click-to-top {
-    background: #34323D;
+    background-color: $click-to-top-dark-background-color;
+    color: $click-to-top-dark-color;
   }
 }
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 8b7bcb4..4b1b4ca 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -35,4 +35,10 @@ $brand-color: map-get($brand-colors, "orangered");
 
 $content-width: {{ site.content_width | default: '920px' }};
 
+// Click to top theme
+$click-to-top-light-background-color: {{ site.click_to_top.light.background_color | default: "white" }};
+$click-to-top-light-color: {{ site.click_to_top.light.color | default: "#454545" }};
+$click-to-top-dark-background-color: {{ site.click_to_top.dark.background_color | default: "#34323d" }};
+$click-to-top-dark-color: {{ site.click_to_top.dark.color | default: "#bbb" }};
+
 @import "yat";