feat: custom selection style support (#119)

3 files changed, 39 insertions, 0 deletions

diff --git a/_config.yml b/_config.yml
index 742c7f2..39d98ea 100644
--- a/_config.yml
+++ b/_config.yml
@@ -124,6 +124,11 @@ yat:
 # Custom color as below:
 # brand_color: "#1a8e42"
 
+# You can custom selection style
+# selection:
+#   color: "#ff00ff"
+#   background_color: "yellow"
+
 # Night/Dark mode
 # Default mode is "auto", "auto" is for auto nightshift
 # (19:00 - 07:00), "manual" is for manual toggle, and
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index 997574d..cb83d82 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -291,3 +291,26 @@ table {
   overflow: hidden;
 }
 
+/**
+ * Text Selection
+ */
+::selection {
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
+::-moz-selection { /* Code for Firefox */
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
+::-ms-selection {
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
+::-o-selection {
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
+::-webkit-selection {
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 4b1b4ca..bc45b8a 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -41,4 +41,15 @@ $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" }};
 
+// Selection styles
+$selection-color: unquote("{{ site.selection.color }}");
+$selection-background-color: unquote("{{ site.selection.background_color }}");
+
+@if $selection-color == "" {
+  $selection-color: inherit;
+}
+@if $selection-background-color == "" {
+  $selection-background-color: rgba(invert($brand-color), 0.3);
+}
+
 @import "yat";