From 9af4af75ec0fb190e3538b15dd8406f2099ebb6d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 15 Jun 2021 13:08:46 +0100
Subject: [PATCH] Specifies text highlight color, and adds variable

---
 docs/theming.md               |  2 ++
 src/styles/color-palette.scss |  6 +++++-
 src/styles/global-styles.scss |  1 +
 src/styles/style-helpers.scss | 13 +++++++++++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/theming.md b/docs/theming.md
index aebce0c2..02ea6a86 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -108,6 +108,8 @@ You can target specific elements on the UI with these variables. All are optiona
 - `--config-settings-background` - The text color for text within the settings container. Defaults to `--background-darker`
 - `--scroll-bar-color` - Color of the scroll bar thumb. Defaults to `--primary`
 - `--scroll-bar-background` Color of the scroll bar blank space. Defaults to `--background-darker`
+- `--highlight-background` Fill color for text highlighting. Defaults to `--primary`
+- `--highlight-color` Text color for selected/ highlighted text. Defaults to `--background`
 - `--toast-background` - Background color for the toast info popup. Defaults to `--primary`
 - `--toast-color` - Text, icon and border color in the toast info popup. Defaults to `--background`
 - `--welcome-popup-background` - Background for the info pop-up shown on first load. Defaults to `--background-darker`
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 04b32864..3dee2b69 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -77,10 +77,14 @@
   --toast-color: var(--background);
   --scroll-bar-color: var(--primary);
   --scroll-bar-background: var(--background-darker);
+  --highlight-color: var(--background);
+  --highlight-background: var(--primary);
   --loading-screen-color: var(--primary);
   --loading-screen-background: var(--background);
   --login-form-color: var(--primary);
   --login-form-background: var(--background);
   --login-form-background-secondary: var(--background-darker);
-
+  --about-page-color: var(--white);
+  --about-page-background: #0b1021;
+  --about-page-accent: var(--primary);
 }
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index d82ee309..2a83e105 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -7,6 +7,7 @@ html {
   transition: all 1s;
   margin-top: -3px;
   @extend .scroll-bar;
+  @extend .highlight;
   box-sizing: border-box;
   input[type=button], button, a {
     cursor: pointer;
diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss
index 491c7c09..2aafd339 100644
--- a/src/styles/style-helpers.scss
+++ b/src/styles/style-helpers.scss
@@ -15,6 +15,19 @@
   }
 }
 
+/* Custom highlight color */
+.highlight {
+    ::selection {
+        background-color: var(--highlight-background);
+        color: var(--highlight-color);
+    }
+    ::-moz-selection, ::-o-selection, ::-ms-selection, ::-webkit-selection {
+        background-color: var(--highlight-background);
+        color: var(--highlight-color);
+  }
+}
+
+
 /* Single-style helpers */
 .bold { font-weight: bold; }
 .light { font-weight: lighter; }