Added inverted selection colors where necessary

2 files changed, 12 insertions, 0 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index f6929a2..2c0e9b5 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -77,6 +77,10 @@ $content--width:  44rem;
                 --bg:     rgba($gray7, .996),
                 --img-bg: rgba($gray7, .5),
                 --fg:     var(--colors--bg-hi),
+                --inverted: (
+                    --bg: rgba($gray0, .996),
+                    --fg: var(--colors--fg-lo),
+                )
             ),
 
             --link: (
@@ -140,6 +144,9 @@ $content--width:  44rem;
             --select: (
                 --bg:     rgba($gray7, .996),
                 --img-bg: rgba($gray7, .5),
+                --inverted: (
+                    --bg: rgba($gray0, .996),
+                ),
             ),
 
             --link: (
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 7596a50..96e1f04 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -52,6 +52,11 @@
             color:            prop(--colors --meta --fg);
             font-size:        iro-px-to-rem(14px);
 
+            &::selection {
+                background-color: prop(--colors --select --inverted --bg, $global: true);
+                color:            prop(--colors --select --inverted --fg, $global: true);
+            }
+
             + h1 {
                 margin-top: $line-height * .5rem;
             }