🌓 Adds Dark Mode (#210)

* feat(dark mode): set up first set of colors

* feat(dark mode): define state colours

* 🧹

* feat(dark mode): variablify all teh wordz

* feat(dark mode): set colors on body

* feat(dark mode): replace hard coded color value

* feat(dark mode): 🌑

* feat(a11y): update link focus styles

- restores visible focus in windows high contrast mode
- increases visibility in boxes with bg colour

* feat(dark mode): enable postcss

* 💅

* feat(dark mode): add user control

* chore: use generic headline name

* feat(dark mode): hide switch until script loads

* feat(dark mode): increase link contrast

* add content warning to footer nav partial

* feat(dark mode): replace hard coded colour value in alertbox

* feat(dark mode): tone down text colour

* feat(dark mode): properly invert code elements

* 🧹 move box styles into own partial

* feat(dark mode): use darker colour as background for links

assets/css/base/_a.scss

@@ -1,18 +1,28 @@
 a {
-  color: $black;
+  color: var(--clr-foreground);
   font-family: $ext-sans;
-  margin: 1rem 0;
-  text-decoration-color: $dark-grey;
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  padding: 0.125rem 0.25rem;
+  text-decoration-color: var(--clr-border-main);
   text-decoration-line: underline;
   text-decoration-thickness: 0.1em;
 
   &:hover,
   &:focus {
-    text-decoration-color: $primary-color;
+    text-decoration-color: var(--clr-primary);
   }
+
   &:focus {
-    background-color: $lt-background-color;
-    color: $black;
-    outline: 0;
+    background-color: var(--clr-accent);
+    color: var(--clr-foreground);
+    // makes focus visible in windows high contrast mode, do not delete
+    outline: 2px solid transparent;
+
+    /* @media (prefers-color-scheme: dark) {
+      :root:not([data-user-theme='light']) & {
+        color: var(--clr-background);
+      }
+    } */
   }
 }