feat: custom selection style support (#119)

jeffreytse · Aug 8, 2023 · f3d2a6f · f3d2a6f
1 parent 1ce9fbe
commit f3d2a6f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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";