Specifies text highlight color, and adds variable

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`

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);
 }

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;

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; }