🌓 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/assets/js/theme-switcher.js

@@ -0,0 +1,63 @@
+function initThemeSwitch() {
+  let $switchContainer = document.querySelector('.js-theme-switch');
+
+  if (!$switchContainer) return;
+
+  $switchContainer.hidden = false;
+
+  let userOverwrite = ['light', 'dark'];
+
+  let $buttons = $switchContainer.querySelectorAll('[type="radio"]');
+
+  /**
+   * @type String
+   */
+  let userThemeSetting = localStorage.getItem('sdUserTheme');
+
+  function setInitialState() {
+    if (userThemeSetting) {
+      document.documentElement.setAttribute(
+        'data-user-theme',
+        userThemeSetting
+      );
+      $switchContainer.querySelector(
+        `[value="${userThemeSetting}"]`
+      ).checked = true;
+    } else {
+      $switchContainer.querySelector('[value="system"]').checked = true;
+    }
+  }
+
+  function setUserPreference(value) {
+    localStorage.setItem('sdUserTheme', value);
+    document.documentElement.setAttribute('data-user-theme', value);
+  }
+
+  function unsetUserPreference() {
+    localStorage.removeItem('sdUserTheme');
+    document.documentElement.removeAttribute('data-user-theme');
+  }
+
+  Array.from($buttons).forEach(function($button) {
+    $button.addEventListener('change', function() {
+      // only run the switch functionality for the currently active radio button
+      if (!$button.checked) return;
+
+      if (userOverwrite.includes($button.value)) {
+        setUserPreference($button.value);
+      } else {
+        unsetUserPreference();
+      }
+    });
+  });
+
+  setInitialState();
+}
+
+if (document.readyState === 'complete') {
+  initThemeSwitch();
+} else {
+  window.addEventListener('load', function() {
+    initThemeSwitch();
+  });
+}