summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--_config.yml5
-rw-r--r--_sass/yat/_base.scss23
-rw-r--r--assets/css/main.scss11
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";