diff options
| -rw-r--r-- | _config.yml | 5 | ||||
| -rw-r--r-- | _sass/yat/_base.scss | 23 | ||||
| -rw-r--r-- | assets/css/main.scss | 11 |
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"; |