🌓 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

11ty/_includes/components/base/site-footer.njk

@@ -0,0 +1,29 @@
+<footer class="site-footer">
+  <nav aria-label="Complimentary">
+    <ul class="navigation-list">
+      <li>
+        <a href="/documentation/">Documentation</a>
+      </li>
+      <li>
+        <a href="/content-warning-guidelines/">Content Warning Guidelines</a>
+      </li>
+      <li>
+        <a href="{{ metadata.feedPermalink | absoluteUrl(metadata.url) }}">RSS Feed</a>
+      </li>
+    </ul>
+  </nav>
+  <div role="group" class="js-theme-switch" aria-labelledby="clrmd-hl" hidden>
+    <h2 id="clrmd-hl" class="smcp-headline">Colour mode</h2>
+    {% for theme in site.themes %}
+      <div class="radio-wrapper">
+        <input
+          type="radio"
+          name="display-mode"
+          value="{{ theme.value }}"
+          id="display-mode-{{ theme.value }}"
+        >
+        <label for="display-mode-{{ theme.value }}">{{ theme.label }}</label>
+      </div>
+    {% endfor %}
+  </div>
+</footer>