Define colours based on theme rather than colour scheme

Additionally, uses the `light-dark` function to set colours based on
the active colour scheme instead of having to manually select it.

Author: arqunis

src/base.scss

@@ -12,19 +12,19 @@
 }
 
 :root[data-scheme="light"] {
-    --bg-colour: hsl(0, 0%, 100%);
-    --text-colour: hsl(0, 0%, 0%);
-
     color-scheme: light;
 }
 
 :root[data-scheme="dark"] {
-    --bg-colour: hsl(0, 0%, 10%);
-    --text-colour: hsl(0, 0%, 100%);
-
     color-scheme: dark;
 }
 
+:root,
+:root[data-theme="normal"] {
+    --bg-colour: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 10%));
+    --text-colour: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
+}
+
 :root {
     font-family: var(--font-family);
 

src/index/style.scss

@@ -1,12 +1,8 @@
 @use "../base/dimensions";
 
 :root,
-:root[data-scheme="light"] {
-    --border-colour: hsl(0, 0%, 0%);
-}
-
-:root[data-scheme="dark"] {
-    --border-colour: hsl(0, 0%, 100%);
+:root[data-theme="normal"] {
+    --border-colour: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
 }
 
 body {