Add dark mode support

Heavily WIP still, but this begins the process of implementing dark mode for our docs and across the project itself.

- Color modes are toggled in the docs navbar with a custom toggler, which stores the select color mode in local storage.
- Color modes can also be set via data attribute thanks to `data-theme` (with light or dark options available currently).
- Docs are heavily WIP for demonstrating the dark mode.
- In order to best implement color modes, I've spiked out a number of new Sass and CSS variables (e.g., `--bs-secondary-bg` and `--bs-tertiary-bg`). In addition, I've added new global CSS variables like `--bs-border-color` and more. So, in addition to general color modes and theming support, we get greater real-time customization, too.

Todos and open questions:

- [ ] Do we refer to these as themes or color modes?
- [ ] Do we provide a color mode toggler JS plugin?
- [ ] Update all components to better utilize global CSS variables so they can be more easily themed (e.g., see `$dropdown-*` Sass variable changes in the diff).

site/assets/js/application.js

@@ -31,7 +31,7 @@
   }
 
   // Tooltip and popover demos
-  document.querySelectorAll('.tooltip-demo')
+  document.querySelectorAll('.tooltip-demo, .bd-navbar')
     .forEach(function (tooltip) {
       new bootstrap.Tooltip(tooltip, {
         selector: '[data-bs-toggle="tooltip"]'
@@ -132,6 +132,59 @@
     })
   }
 
+  // Toggle color modes
+
+  var currentTheme = localStorage.getItem('theme')
+  var currentThemeIcon = document.querySelector('#bd-theme > .bi use')
+
+  function checkMatchMedia() {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches && !currentTheme) {
+      document.documentElement.setAttribute('data-theme', 'dark')
+    } else {
+      document.documentElement.removeAttribute('data-theme')
+    }
+  }
+
+  document.querySelectorAll('.bd-theme-toggles .dropdown-item')
+    .forEach(function (toggle) {
+      toggle.addEventListener('click', function () {
+        var theme = this.getAttribute('data-theme-value')
+
+        document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
+        toggle.parentElement.setAttribute('class', 'current')
+
+        var svg = toggle.querySelector('.theme-icon use').getAttribute('href')
+        currentThemeIcon.setAttribute('href', svg)
+
+        console.log(theme)
+
+        // in OS darkmode, going from light to auto doesn't make it dark
+
+        if (theme === 'auto') {
+          document.documentElement.removeAttribute('data-theme')
+          localStorage.removeItem('theme')
+          checkMatchMedia()
+        } else {
+          document.documentElement.setAttribute('data-theme', theme)
+          localStorage.setItem('theme', theme)
+        }
+      })
+    })
+
+  if (currentTheme) {
+    var currentThemeButton = document.querySelector('.dropdown-item[data-theme-value="' + currentTheme + '"]')
+    document.documentElement.setAttribute('data-theme', currentTheme)
+    document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
+    currentThemeButton.parentElement.setAttribute('class', 'current')
+    var svg = currentThemeButton.querySelector('.theme-icon use').getAttribute('href')
+    currentThemeIcon.setAttribute('href', svg)
+  } else {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+      checkMatchMedia()
+    })
+    checkMatchMedia()
+  }
+
   // Insert copy to clipboard button before .highlight
   var btnTitle = 'Copy to clipboard'
   var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard"><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'