chore: customize text selection colors

3 files changed, 8 insertions, 0 deletions

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 0a28c84..ce629f7 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -149,6 +149,7 @@ $spacings: ();
 
 $color_black: hsl(207, 47%, 11%);
 $color_blue: hsl(206, 75%, 31%);
+$color_blue-o30: hsla(206, 75%, 31%, 0.3);
 $color_blue-bright: hsl(206, 77%, 36%);
 $color_blue-brighter: hsl(200, 75%, 45%);
 $color_blue-dark: hsl(206, 76%, 25%);
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index a62a0d9..8e3c2ab 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -49,6 +49,12 @@ summary {
   border: fun.convert-px(3) solid var(--color-bg-tertiary);
 }
 
+*::selection {
+  background: var(--color-primary-opacity);
+  color: var(--color-fg);
+  text-shadow: none;
+}
+
 body {
   display: flex;
   flex-flow: column nowrap;
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 6a04156..28c017c 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -9,6 +9,7 @@
   --color-fg-light: #{var.$color_grey-dark};
   --color-fg-inverted: #{var.$color_white};
   --color-primary: #{var.$color_blue};
+  --color-primary-opacity: #{var.$color_blue-o30};
   --color-primary-light: #{var.$color_blue-bright};
   --color-primary-lighter: #{var.$color_blue-brighter};
   --color-primary-dark: #{var.$color_blue-dark};