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

@@ -131,4 +131,29 @@
       modalBodyInput.value = recipient
     })
   }
+
+  // Toggle color modes
+
+  var toggleSwitch = document.querySelector('.bd-theme-toggle input[type="checkbox"]')
+  var currentTheme = localStorage.getItem('theme')
+
+  if (currentTheme) {
+    document.documentElement.setAttribute('data-theme', currentTheme)
+
+    if (currentTheme === 'dark') {
+      toggleSwitch.checked = true
+    }
+  }
+
+  function switchTheme(e) {
+    if (e.target.checked) {
+      document.documentElement.setAttribute('data-theme', 'dark')
+      localStorage.setItem('theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light')
+      localStorage.setItem('theme', 'light')
+    }
+  }
+
+  toggleSwitch.addEventListener('change', switchTheme, false)
 })()

site/assets/scss/_ads.scss

@@ -14,10 +14,10 @@
   @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
-  background-color: $gray-100;
+  background-color: var(--bs-tertiary-bg);
 
   a {
-    color: $gray-800;
+    color: var(--bs-body-color);
     text-decoration: none;
   }
 
@@ -34,5 +34,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: $gray-700 !important;
+  color: var(--bs-body-color) !important;
 }

site/assets/scss/_buttons.scss

@@ -43,3 +43,7 @@
   --bs-btn-focus-border-color: var(--bd-violet);
   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }
+
+.btn-bd-lg {
+  padding: .8rem 2rem;
+}

site/assets/scss/_clipboard-js.scss

@@ -22,8 +22,8 @@
   display: block;
   padding: .5em;
   line-height: 1;
-  color: $gray-900;
-  background-color: $gray-100;
+  color: var(--bs-body-color);
+  background-color: var(--bs-tertiary-bg);
   border: 0;
   @include border-radius(.25rem);
 

site/assets/scss/_component-examples.scss

@@ -341,7 +341,7 @@
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-tertiary-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
@@ -364,7 +364,7 @@
 
   pre code {
     @include font-size(inherit);
-    color: $gray-900; // Effectively the base text color
+    color: var(--bs-body-color); // Effectively the base text color
     word-wrap: normal;
   }
 }

site/assets/scss/_content.scss

@@ -30,8 +30,10 @@
   }
 
   // Override Bootstrap defaults
-  > .table,
-  > .table-responsive .table {
+  > .table {
+    --bs-table-border-color: var(--bs-border-color);
+
+    max-width: 100%;
     margin-bottom: 1.5rem;
     @include font-size(.875rem);
 
@@ -78,6 +80,10 @@
 .table-options td:last-child,
 .table-utilities td:last-child {
   min-width: 280px;
+
+  .table-swatches {
+  td:first-child { width: 340px; }
+  td:nth-child(2) { width: 200px; }
 }
 
 .bd-title {
@@ -96,7 +102,8 @@
 .bi {
   width: 1em;
   height: 1em;
-  fill: currentcolor;
+  vertical-align: -.125em;
+  fill: currentColor;
 }
 
 .icon-link {
@@ -124,3 +131,28 @@
     border-left: $border-width solid $border-color;
   }
 }
+
+// scss-docs-start custom-color-mode
+[data-theme="blue"] {
+  --bs-body-color: var(--bs-white);
+  --bs-body-color-rgb: #{to-rgb($white)};
+  --bs-body-bg: var(--bs-blue);
+  --bs-body-bg-rgb: #{to-rgb($blue)};
+  --bs-tertiary-bg: #{$blue-600};
+
+  .dropdown-menu {
+    --bs-dropdown-link-active-bg: #{$blue-700};
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+    --bs-btn-border-color: #{rgba($white, .25)};
+    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+    --bs-btn-hover-border-color: #{rgba($white, .25)};
+    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+    --bs-btn-active-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+  }
+}
+// scss-docs-end custom-color-mode

site/assets/scss/_footer.scss

@@ -4,12 +4,12 @@
 
 .bd-footer {
   a {
-    color: $gray-700;
+    color: var(--bs-body-color);
     text-decoration: none;
 
     &:hover,
     &:focus {
-      color: $link-color;
+      color: var(--bs-primary);
       text-decoration: underline;
     }
   }

site/assets/scss/_masthead.scss

@@ -11,13 +11,12 @@
 
   h1 {
     @include font-size(4rem);
-    line-height: 1;
   }
 
   .lead {
     @include font-size(1rem);
     font-weight: 400;
-    color: $gray-700;
+    color: var(--bs-secondary-color);
   }
 
   .highlight {
@@ -33,8 +32,7 @@
   }
 
   #carbonads { // stylelint-disable-line selector-max-id
-    margin-right: auto;
-    margin-left: auto;
+    margin-inline: auto;
   }
 
   @include media-breakpoint-up(md) {
@@ -44,7 +42,7 @@
   }
 }
 
-.masthead-followup {
+.bd-masthead-followup {
   .lead {
     @include font-size(1rem);
   }

site/assets/scss/_navbar.scss

@@ -83,3 +83,37 @@
     background-size: .75rem .75rem;
   }
 }
+
+
+.bd-theme-toggle {
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+
+.bd-theme-toggle-checkbox {
+  position: absolute;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  white-space: nowrap;
+
+  ~ .bd-theme-toggle-light { display: none; }
+  ~ .bd-theme-toggle-dark { display: block; }
+
+  &:checked {
+    ~ .bd-theme-toggle-light { display: block; }
+    ~ .bd-theme-toggle-dark { display: none; }
+  }
+}
+
+.bd-theme-toggle-light {
+  color: var(--bs-warning);
+}
+
+.bd-theme-toggle-dark {
+  color: var(--bs-navbar-brand-color);
+}

site/assets/scss/_sidebar.scss

@@ -16,6 +16,8 @@
 .bd-links-nav {
   @include media-breakpoint-down(lg) {
     font-size: .875rem;
+    background-color: var(--bs-tertiary-bg);
+    border-bottom: 1px solid var(--bs-border-color);
   }
 
   @include media-breakpoint-between(xs, lg) {
@@ -35,16 +37,16 @@
 .bd-links-link {
   padding: .1875rem .5rem;
   margin-top: .125rem;
-  margin-left: 1rem;
-  color: rgba($black, .65);
+  margin-left: 1.125rem;
+  color: var(--bs-body-color);
   text-decoration: if($link-decoration == none, null, none);
 
   &:hover,
   &:focus,
   &.active {
-    color: rgba($black, .85);
+    color: var(--bs-heading-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: rgba(var(--bd-violet-rgb), .1);
+    background-color: var(--bd-sidebar-link-bg);
   }
 
   &.active {

site/assets/scss/_syntax.scss

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
   --base00: #fff;
   --base01: #f5f5f5;
   --base02: #c8c8fa;
@@ -17,6 +18,25 @@
   --base0F: #333;
 }
 
+[data-theme="dark"] {
+  --base00: #282c34;
+  --base01: #353b45;
+  --base02: #3e4451;
+  --base03: #545862;
+  --base04: #565c64;
+  --base05: #abb2bf;
+  --base06: #b6bdca;
+  --base07: #d19a66;
+  --base08: #e06c75;
+  --base09: #d19a66;
+  --base0A: #e5c07b;
+  --base0B: #98c379;
+  --base0C: #56b6c2;
+  --base0D: #61afef;
+  --base0E: #c678dd;
+  --base0F: #be5046;
+}
+
 .hl { background-color: var(--base02); }
 .c { color: var(--base03); }
 .err { color: var(--base08); }

site/assets/scss/_toc.scss

@@ -52,7 +52,7 @@
   }
 
   @include media-breakpoint-down(md) {
-    border: 1px solid $border-color;
+    border: 1px solid var(--bs-border-color);
     @include border-radius(.4rem);
 
     &:hover,

site/assets/scss/_variables.scss

@@ -19,4 +19,11 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-accent-rgb: #{to-rgb($bd-accent)};
   --bd-pink-rgb: #{to-rgb($pink-500)};
   --bd-teal-rgb: #{to-rgb($teal-500)};
+  --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bd-violet: #{mix($bd-violet, $black, 75%)};
+  }
 }