🌓 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/_custom-properties.scss

@@ -1,4 +1,67 @@
+// create variables for all colours
+@mixin raw-color-names {
+  @each $name, $value in $colors {
+    --clr-#{$name}: #{$value};
+  }
+}
+
+// map the raw colours to abstract names in standard color mode
+// we map the colour values here to prepare for dark mode
+// with these mapping we express the _design intention_ rather than the colour value
+@mixin color-scheme-light {
+  --clr-primary: var(--clr-red);
+  --clr-secondary: var(--clr-green);
+  --clr-foreground: var(--clr-black);
+  --clr-foreground-transparent: var(--clr-black-transparent);
+  --clr-background: white;
+  --clr-accent: var(--clr-pink);
+  --clr-border-main: var(--clr-dark-grey);
+
+  --clr-positive: var(--clr-green);
+  --clr-positive-text: var(--clr-dark-green);
+  --clr-positive-background: var(--clr-pale-green);
+
+  --clr-warning: var(--clr-yellow);
+  --clr-warning-background: var(--clr-pale-yellow);
+  --clr-warning-text: var(--clr-dark-yellow);
+
+  --clr-avoid: var(--clr-red);
+  --clr-avoid-background: var(--clr-pink);
+  --clr-avoid-text: var(--clr-dark-red);
+}
+
+// update colors which need to change in dark mode
+@mixin color-scheme-dark {
+  --clr-foreground: var(--clr-light-grey);
+  --clr-foreground-transparent: var(--clr-white-transparent);
+  --clr-background: var(--clr-black);
+  --clr-accent: var(--clr-berry);
+
+  --clr-positive-text: var(--clr-pale-green);
+  --clr-positive-background: var(--clr-dark-green);
+
+  --clr-warning-background: var(--clr-dark-yellow);
+  --clr-warning-text: var(--clr-pale-yellow);
+
+  --clr-avoid-background: var(--clr-dark-red);
+  --clr-avoid-text: var(--clr-pink);
+}
+
 :root {
+  @include raw-color-names();
+
+  @include color-scheme-light();
+
   --auto-grid-min-size: 17rem;
   --l-gap: 1rem;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-user-theme='light']) {
+    @include color-scheme-dark();
+  }
+}
+
+:root[data-user-theme='dark'] {
+  @include color-scheme-dark();
+}