From f3d2a6fc15e2889c563459ef86137df275714d2c Mon Sep 17 00:00:00 2001
From: Jeffrey Tse <jeffreytse.mail@gmail.com>
Date: Tue, 8 Aug 2023 23:54:54 +0800
Subject: [PATCH] feat: custom selection style support (#119)

---
 _config.yml          |  5 +++++
 _sass/yat/_base.scss | 23 +++++++++++++++++++++++
 assets/css/main.scss | 11 +++++++++++
 3 files changed, 39 insertions(+)

diff --git a/_config.yml b/_config.yml
index 742c7f26a22..39d98ea6b7b 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 997574da582..cb83d82b81c 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 4b1b4cafbab..bc45b8a0173 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";