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).

scss/_root.scss

@@ -1,6 +1,7 @@
 // stylelint-disable custom-property-empty-line-before
 
-:root {
+:root,
+[data-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -37,6 +38,7 @@
   --#{$prefix}gradient: #{$gradient};
 
   // Root and body
+
   // scss-docs-start root-body-variables
   @if $font-size-root != null {
     --#{$prefix}root-font-size: #{$font-size-root};
@@ -46,10 +48,24 @@
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
   --#{$prefix}body-color: #{$body-color};
+  // --#{$variable-prefix}body-accent-color: #{$body-accent-color};
+
+  // todo: replace body-accent-color with secondary-color
+  --#{$variable-prefix}secondary-color: #{$body-secondary-color};
+  --#{$variable-prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$variable-prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$variable-prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$variable-prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$variable-prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$variable-prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$variable-prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+
   @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
-  --#{$prefix}body-bg: #{$body-bg};
+  --#{$variable-prefix}body-bg: #{$body-bg};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
   // scss-docs-end root-body-variables
 
   // scss-docs-start root-border-var
@@ -73,4 +89,50 @@
   --#{$prefix}code-color: #{$code-color};
 
   --#{$prefix}highlight-bg: #{$mark-bg};
+
+  --#{$variable-prefix}heading-color: #{$headings-color};
+  --#{$variable-prefix}link-color: #{$link-color};
+  --#{$variable-prefix}link-hover-color: #{$link-hover-color};
+
+  // TODO: move to form components? or make global?
+  --#{$variable-prefix}form-control-bg: var(--#{$variable-prefix}body-bg);
+  --#{$variable-prefix}form-control-disabled-bg: var(--#{$variable-prefix}secondary-bg);
+}
+
+[data-theme="dark"] {
+  --#{$variable-prefix}primary: #{$blue-300};
+  --#{$variable-prefix}success: #{$green-300};
+  --#{$variable-prefix}danger: #{$red-300};
+  --#{$variable-prefix}warning: #{$yellow-300};
+  --#{$variable-prefix}info: #{$cyan-300};
+
+  --#{$variable-prefix}primary-rgb: #{to-rgb($blue-300)};
+  --#{$variable-prefix}success-rgb: #{to-rgb($green-300)};
+  --#{$variable-prefix}danger-rgb: #{to-rgb($red-300)};
+  --#{$variable-prefix}warning-rgb: #{to-rgb($yellow-300)};
+  --#{$variable-prefix}info-rgb: #{to-rgb($cyan-300)};
+
+  --#{$variable-prefix}body-color: #{$body-color-dark};
+  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+  --#{$variable-prefix}body-bg: #{$body-bg-dark};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+  --#{$variable-prefix}secondary-color: #{$body-secondary-color-dark};
+  // --#{$variable-prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+  --#{$variable-prefix}secondary-bg: #{$body-secondary-bg-dark};
+  --#{$variable-prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+  --#{$variable-prefix}tertiary-color: #{$body-tertiary-color-dark};
+  // --#{$variable-prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+  --#{$variable-prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+  --#{$variable-prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+  --#{$variable-prefix}heading-color: #{$headings-color-dark};
+
+  --#{$variable-prefix}link-color: #{$link-color-dark};
+  --#{$variable-prefix}link-hover-color: #{$link-hover-color-dark};
+
+  --#{$variable-prefix}code-color: #{$code-color-dark};
+
+  --#{$variable-prefix}border-color: #{$border-color-dark};
 }