dark mode with bootstrap complete components

Used https://github.com/vinorodrigues/bootstrap-dark-5/releases/tag/v1.0.0
2021-05-12 04:21:49 +05:30
parent bd43001eb4
commit bfaffd9ea8
88 changed files with 4117 additions and 454 deletions
--- a/scss/dark/bootstrap/_accordion.scss
+++ b/scss/dark/bootstrap/_accordion.scss
@@ -0,0 +1,51 @@
+// Base styles
+
+.accordion-button {
+  color: $accordion-button-color-alt;
+  background-color: $accordion-button-bg-alt;
+
+  &:not(.collapsed) {
+    color: $accordion-button-active-color-alt;
+    background-color: $accordion-button-active-bg-alt;
+    box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color-alt;
+
+    &::after {
+      background-image: escape-svg($accordion-button-active-icon-alt);
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    background-image: escape-svg($accordion-button-icon-alt);
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    border-color: $accordion-button-focus-border-color-alt;
+    box-shadow: $accordion-button-focus-box-shadow-alt;
+  }
+}
+
+.accordion-item {
+  background-color: $accordion-bg-alt;
+  border: $accordion-border-width solid $accordion-border-color-alt;
+}
+
+// Flush accordion items
+
+.accordion-flush {
+  .accordion-collapse {
+    border-width: 0;
+  }
+
+  .accordion-item {
+    border-right: 0;
+    border-left: 0;
+
+    &:first-child { border-top: 0; }
+    &:last-child { border-bottom: 0; }
+  }
+}
--- a/scss/dark/bootstrap/_alert.scss
+++ b/scss/dark/bootstrap/_alert.scss
@@ -0,0 +1,25 @@
+// Base styles
+
+// NOT NEEDED
+// .alert {
+//   border: $alert-border-width solid transparent;
+// }
+
+// Headings for larger alerts
+.alert-heading {
+  color: inherit;
+}
+
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $state, $value in $theme-colors-alt {
+  $alert-background-alt: shift-color($value, $alert-bg-scale-alt);
+  $alert-border-alt: shift-color($value, $alert-border-scale-alt);
+  $alert-color-alt: shift-color($value, $alert-color-scale-alt);
+  @if (contrast-ratio($alert-background-alt, $alert-color-alt) < $min-contrast-ratio-alt) {
+    $alert-color-alt: mix($value, color-contrast($alert-background-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($alert-color-scale-alt));
+  }
+  .alert-#{$state} {
+    @include alert-variant($alert-background-alt, $alert-border-alt, $alert-color-alt);
+  }
+}
--- a/scss/dark/bootstrap/_badge.scss
+++ b/scss/dark/bootstrap/_badge.scss
@@ -0,0 +1,7 @@
+// Base class
+
+.badge {
+  color: $badge-color-alt;
+  // THIS DOES NOTHING
+  // @include gradient-bg();
+}
--- a/scss/dark/bootstrap/_breadcrumb.scss
+++ b/scss/dark/bootstrap/_breadcrumb.scss
@@ -0,0 +1,20 @@
+.breadcrumb {
+  background-color: $breadcrumb-bg-alt;
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: $breadcrumb-item-padding-x;
+
+    &::before {
+      color: $breadcrumb-divider-color-alt;
+      // TODO: DO I NEED THIS?
+      // content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+    }
+  }
+
+  &.active {
+    color: $breadcrumb-active-color-alt;
+  }
+}
--- a/scss/dark/bootstrap/_button-group.scss
+++ b/scss/dark/bootstrap/_button-group.scss
@@ -0,0 +1,9 @@
+
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow-alt);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
--- a/scss/dark/bootstrap/_buttons.scss
+++ b/scss/dark/bootstrap/_buttons.scss
@@ -0,0 +1,65 @@
+// Base styles
+
+.btn {
+  color: $body-color-alt;
+  background-color: transparent;
+  border: $btn-border-width solid transparent;
+
+  &:hover {
+    color: $body-color-alt;
+  }
+
+  .btn-check:focus + &,
+  &:focus {
+    box-shadow: $btn-focus-box-shadow-alt;
+  }
+
+  .btn-check:checked + &,
+  .btn-check:active + &,
+  &:active,
+  &.active {
+    @include box-shadow($btn-active-box-shadow-alt);
+
+    &:focus {
+      @include box-shadow($btn-focus-box-shadow-alt, $btn-active-box-shadow-alt);
+    }
+  }
+
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    opacity: $btn-disabled-opacity-alt;
+    @include box-shadow(none);
+  }
+}
+
+
+// Alternate buttons
+
+@each $color, $value in $theme-colors-alt {
+  .btn-#{$color} {
+    @include button-variant-alt($value, $value);
+  }
+}
+
+@each $color, $value in $theme-colors-alt {
+  .btn-outline-#{$color} {
+    @include button-outline-variant-alt($value);
+  }
+}
+
+// Link buttons
+
+// Make a button look and behave like a link
+.btn-link {
+  color: $btn-link-color-alt;
+
+  &:hover {
+    color: $btn-link-hover-color-alt;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color-alt;
+  }
+}
--- a/scss/dark/bootstrap/_card.scss
+++ b/scss/dark/bootstrap/_card.scss
@@ -0,0 +1,35 @@
+// Base styles
+
+.card {
+  background-color: $card-bg-alt;
+  border: $card-border-width solid $card-border-color-alt;
+}
+
+.card-body {
+  color: $card-color-alt;
+}
+
+// Optional textual caps
+
+.card-header {
+  color: $card-cap-color-alt;
+  background-color: $card-cap-bg-alt;
+  border-bottom: $card-border-width solid $card-border-color-alt;
+}
+
+.card-footer {
+  color: $card-cap-color-alt;
+  background-color: $card-cap-bg-alt;
+  border-top: $card-border-width solid $card-border-color-alt;
+}
+
+// Header navs
+
+.card-header-tabs {
+  @if $nav-tabs-link-active-bg != $card-bg {
+    .nav-link.active {
+      background-color: $card-bg-alt;
+      border-bottom-color: $card-bg-alt;
+    }
+  }
+}
--- a/scss/dark/bootstrap/_carousel.scss
+++ b/scss/dark/bootstrap/_carousel.scss
@@ -0,0 +1,64 @@
+// Left/right controls for nav
+
+.carousel-control-prev,
+.carousel-control-next {
+  color: $carousel-control-color-alt;
+  opacity: $carousel-control-opacity-alt;
+
+  // Hover/focus state
+  &:hover,
+  &:focus {
+    color: $carousel-control-color-alt;
+    opacity: $carousel-control-hover-opacity-alt;
+  }
+}
+.carousel-control-prev {
+  background-image: if($enable-gradients, linear-gradient(90deg, rgba($white-alt, .25), rgba($white-alt, .001)), null);
+}
+.carousel-control-next {
+  background-image: if($enable-gradients, linear-gradient(270deg, rgba($white, .25), rgba($white, .001)), null);
+}
+
+// Icons for within
+.carousel-control-prev-icon {
+  background-image: escape-svg($carousel-control-prev-icon-bg-alt);
+}
+.carousel-control-next-icon {
+  background-image: escape-svg($carousel-control-next-icon-bg-alt);
+}
+
+// Optional indicator pips/controls
+
+.carousel-indicators {
+  [data-bs-target] {
+    background-color: $carousel-indicator-active-bg-alt;
+    opacity: $carousel-indicator-opacity-alt;
+  }
+
+  .active {
+    opacity: $carousel-indicator-active-opacity-alt;
+  }
+}
+
+// Optional captions
+
+.carousel-caption {
+  color: $carousel-caption-color-alt;
+}
+
+// Dark mode carousel
+
+.carousel-dark {
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    filter: $carousel-dark-control-icon-filter-alt;
+  }
+
+  .carousel-indicators [data-bs-target] {
+    background-color: $carousel-dark-indicator-active-bg-alt;
+  }
+
+  .carousel-caption {
+    color: $carousel-dark-caption-color-alt;
+  }
+}
--- a/scss/dark/bootstrap/_close.scss
+++ b/scss/dark/bootstrap/_close.scss
@@ -0,0 +1,26 @@
+
+.btn-close {
+  color: $btn-close-color-alt;
+  background: transparent escape-svg($btn-close-bg-alt) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  opacity: $btn-close-opacity-alt;
+
+  // Override <a>'s hover style
+  &:hover {
+    color: $btn-close-color-alt;
+    opacity: $btn-close-hover-opacity-alt;
+  }
+
+  &:focus {
+    box-shadow: $btn-close-focus-shadow-alt;
+    opacity: $btn-close-focus-opacity-alt;
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: $btn-close-disabled-opacity-alt;
+  }
+}
+
+.btn-close-white {
+  filter: $btn-close-white-filter-alt;
+}
--- a/scss/dark/bootstrap/_color-scheme.scss
+++ b/scss/dark/bootstrap/_color-scheme.scss
@@ -0,0 +1,3 @@
+:root {
+  @include color-scheme-property($default-color-scheme, true);
+}
--- a/scss/dark/bootstrap/_dark.scss
+++ b/scss/dark/bootstrap/_dark.scss
@@ -0,0 +1,7 @@
+
+// from Chris Coyier on Jul 26, 2016: https://css-tricks.com/overriding-the-default-text-selection-color-with-css/
+
+body::selection {
+  color: $selection-color-alt;
+  background: $selection-bg-alt;
+}
--- a/scss/dark/bootstrap/_dropdown.scss
+++ b/scss/dark/bootstrap/_dropdown.scss
@@ -0,0 +1,92 @@
+
+// The dropdown menu
+.dropdown-menu {
+  color: $dropdown-color-alt;
+  background-color: $dropdown-bg-alt;
+  border: $dropdown-border-width solid $dropdown-border-color-alt;
+  @include box-shadow($dropdown-box-shadow-alt);
+}
+
+// Dividers (basically an `<hr>`) within the dropdown
+.dropdown-divider {
+  border-top: 1px solid $dropdown-divider-bg-alt;
+}
+
+// Links, buttons, and more within the dropdown menu
+.dropdown-item {
+  color: $dropdown-link-color-alt;
+  background-color: transparent; // For `<button>`s
+  border: 0; // For `<button>`s
+
+
+  &:hover,
+  &:focus {
+    color: $dropdown-link-hover-color-alt;
+    @include gradient-bg($dropdown-link-hover-bg-alt);
+  }
+
+  &.active,
+  &:active {
+    color: $dropdown-link-active-color-alt;
+    @include gradient-bg($dropdown-link-active-bg-alt);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color-alt;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+  }
+}
+
+// Dropdown section headers
+.dropdown-header {
+  color: $dropdown-header-color-alt;
+}
+
+// Dropdown text
+.dropdown-item-text {
+  color: $dropdown-link-color-alt;
+}
+
+// Dark dropdowns
+.dropdown-menu-dark {
+  color: $dropdown-dark-color-alt;
+  background-color: $dropdown-dark-bg-alt;
+  border-color: $dropdown-dark-border-color-alt;
+  @include box-shadow($dropdown-dark-box-shadow-alt);
+
+  .dropdown-item {
+    color: $dropdown-dark-link-color-alt;
+
+    &:hover,
+    &:focus {
+      color: $dropdown-dark-link-hover-color-alt;
+      @include gradient-bg($dropdown-dark-link-hover-bg-alt);
+    }
+
+    &.active,
+    &:active {
+      color: $dropdown-dark-link-active-color-alt;
+      @include gradient-bg($dropdown-dark-link-active-bg-alt);
+    }
+
+    &.disabled,
+    &:disabled {
+      color: $dropdown-dark-link-disabled-color-alt;
+    }
+  }
+
+  .dropdown-divider {
+    border-color: $dropdown-dark-divider-bg-alt;
+  }
+
+  .dropdown-item-text {
+    color: $dropdown-dark-link-color-alt;
+  }
+
+  .dropdown-header {
+    color: $dropdown-dark-header-color-alt;
+  }
+}
--- a/scss/dark/bootstrap/_forms.scss
+++ b/scss/dark/bootstrap/_forms.scss
@@ -0,0 +1,9 @@
+@import "forms/labels";
+@import "forms/form-text";
+@import "forms/form-control";
+@import "forms/form-select";
+@import "forms/form-check";
+@import "forms/form-range";
+@import "forms/floating-labels";
+@import "forms/input-group";
+@import "forms/validation";
--- a/scss/dark/bootstrap/_helpers.scss
+++ b/scss/dark/bootstrap/_helpers.scss
@@ -0,0 +1,7 @@
+// @import "helpers/clearfix";  // no colors here
+@import "helpers/colored-links";
+// @import "helpers/ratio";  // no colors here
+// @import "helpers/position";  // no colors here
+// @import "helpers/visually-hidden";  // no colors here
+// @import "helpers/stretched-link";  // no colors here
+// @import "helpers/text-truncation";  // no colors here
--- a/scss/dark/bootstrap/_images.scss
+++ b/scss/dark/bootstrap/_images.scss
@@ -0,0 +1,14 @@
+// Image thumbnails
+.img-thumbnail {
+  background-color: $thumbnail-bg-alt;
+  border: $thumbnail-border-width solid $thumbnail-border-color-alt;
+  @include box-shadow($thumbnail-box-shadow-alt);
+}
+
+//
+// Figures
+//
+
+.figure-caption {
+  color: $figure-caption-color-alt;
+}
--- a/scss/dark/bootstrap/_list-group.scss
+++ b/scss/dark/bootstrap/_list-group.scss
@@ -0,0 +1,63 @@
+// Interactive list items
+
+.list-group-item-action {
+  color: $list-group-action-color-alt;
+
+  // Hover state
+  &:hover,
+  &:focus {
+    color: $list-group-action-hover-color-alt;
+    background-color: $list-group-hover-bg-alt;
+  }
+
+  &:active {
+    color: $list-group-action-active-color-alt;
+    background-color: $list-group-action-active-bg-alt;
+  }
+}
+
+// Individual list items
+
+.list-group-item {
+  color: $list-group-color-alt;
+  background-color: $list-group-bg-alt;
+  border: $list-group-border-width solid $list-group-border-color-alt;
+
+  &.disabled,
+  &:disabled {
+    color: $list-group-disabled-color-alt;
+    background-color: $list-group-disabled-bg-alt;
+  }
+
+  // Include both here for `<a>`s and `<button>`s
+  &.active {
+    color: $list-group-active-color-alt;
+    background-color: $list-group-active-bg-alt;
+    border-color: $list-group-active-border-color-alt;
+  }
+}
+
+// Flush list items
+
+.list-group-flush {
+
+  > .list-group-item {
+    border-width: 0 0 $list-group-border-width;  // needed for nightshade variants
+
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  }
+}
+
+// List group contextual variants
+
+@each $state, $value in $theme-colors-alt {
+  $list-group-background-alt: shift-color($value, $list-group-item-bg-scale-alt);
+  $list-group-color-alt: shift-color($value, $list-group-item-color-scale-alt);
+  @if (contrast-ratio($list-group-background-alt, $list-group-color-alt) < $min-contrast-ratio-alt) {
+    $list-group-color-alt: mix($value, color-contrast($list-group-background-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($list-group-item-color-scale-alt));
+  }
+
+  @include list-group-item-variant($state, $list-group-background-alt, $list-group-color-alt);
+}
--- a/scss/dark/bootstrap/_mixins.scss
+++ b/scss/dark/bootstrap/_mixins.scss
@@ -0,0 +1,4 @@
+@import "mixins/color-scheme";
+@import "mixins/buttons";
+@import "mixins/forms";
+@import "mixins/table-variants";
--- a/scss/dark/bootstrap/_modal.scss
+++ b/scss/dark/bootstrap/_modal.scss
@@ -0,0 +1,36 @@
+
+// Actual modal
+.modal-content {
+  color: $modal-content-color-alt;
+  background-color: $modal-content-bg-alt;
+  border: $modal-content-border-width solid $modal-content-border-color-alt;
+  @include box-shadow($modal-content-box-shadow-xs-alt);
+}
+
+// Modal background
+.modal-backdrop {
+  background-color: $modal-backdrop-bg-alt;
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: $modal-backdrop-opacity-alt; }
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  border-bottom: $modal-header-border-width solid $modal-header-border-color-alt;
+}
+
+// Footer (for actions)
+.modal-footer {
+  border-top: $modal-footer-border-width solid $modal-footer-border-color-alt;
+}
+
+// Scale up the modal
+@include media-breakpoint-up(sm) {
+  // Automatically set modal's width for larger viewports
+  .modal-content {
+    @include box-shadow($modal-content-box-shadow-sm-up-alt);
+  }
+}
--- a/scss/dark/bootstrap/_nav.scss
+++ b/scss/dark/bootstrap/_nav.scss
@@ -0,0 +1,64 @@
+// Base class
+
+.nav-link {
+  color: $nav-link-color-alt;
+
+  &:hover,
+  &:focus {
+    color: $nav-link-hover-color-alt;
+  }
+
+  // Disabled state lightens text
+  &.disabled {
+    color: $nav-link-disabled-color-alt;
+  }
+}
+
+//
+// Tabs
+//
+
+.nav-tabs {
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color-alt;
+
+  .nav-link {
+    // background: none;
+    border: $nav-tabs-border-width solid transparent;
+
+    &:hover,
+    &:focus {
+      border-color: $nav-tabs-link-hover-border-color-alt;
+    }
+
+    &.disabled {
+      color: $nav-link-disabled-color-alt;
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $nav-tabs-link-active-color-alt;
+    background-color: $nav-tabs-link-active-bg-alt;
+    border-color: $nav-tabs-link-active-border-color-alt;
+  }
+}
+
+
+//
+// Pills
+//
+
+.nav-pills {
+  // .nav-link {
+  //   background: none;
+  //   border: 0;
+  // }
+
+  .nav-link.active,
+  .show > .nav-link {
+    color: $nav-pills-link-active-color-alt;
+    @include gradient-bg($nav-pills-link-active-bg-alt);
+  }
+}
--- a/scss/dark/bootstrap/_navbar.scss
+++ b/scss/dark/bootstrap/_navbar.scss
@@ -0,0 +1,117 @@
+// Navbar
+
+// THIS DOES NOTHING
+// .navbar {
+//   @include gradient-bg();
+// }
+
+// Button for toggling the navbar when in its collapsed state
+.navbar-toggler {
+  background-color: transparent; // remove default button style
+  border: $border-width solid transparent; // remove default button style
+
+  // &:focus {
+  //   box-shadow: 0 0 0 $navbar-toggler-focus-width;
+  // }
+}
+
+// Navbar themes
+.navbar-light {
+  .navbar-brand {
+    color: $navbar-light-brand-color-alt;
+
+    &:hover,
+    &:focus {
+      color: $navbar-light-brand-hover-color-alt;
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-light-color-alt;
+
+      &:hover,
+      &:focus {
+        color: $navbar-light-hover-color-alt;
+      }
+
+      &.disabled {
+        color: $navbar-light-disabled-color-alt;
+      }
+    }
+
+    .show > .nav-link,
+    .nav-link.active {
+      color: $navbar-light-active-color-alt;
+    }
+  }
+
+  .navbar-toggler {
+    color: $navbar-light-color-alt;
+    border-color: $navbar-light-toggler-border-color-alt;
+  }
+
+  .navbar-toggler-icon {
+    background-image: escape-svg($navbar-light-toggler-icon-bg-alt);
+  }
+
+  .navbar-text {
+    color: $navbar-light-color-alt;
+
+    a,
+    a:hover,
+    a:focus  {
+      color: $navbar-light-active-color-alt;
+    }
+  }
+}
+
+// White links against a dark background
+.navbar-dark {
+  .navbar-brand {
+    color: $navbar-dark-brand-color-alt;
+
+    &:hover,
+    &:focus {
+      color: $navbar-dark-brand-hover-color-alt;
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-dark-color-alt;
+
+      &:hover,
+      &:focus {
+        color: $navbar-dark-hover-color-alt;
+      }
+
+      &.disabled {
+        color: $navbar-dark-disabled-color-alt;
+      }
+    }
+
+    .show > .nav-link,
+    .nav-link.active {
+      color: $navbar-dark-active-color-alt;
+    }
+  }
+
+  .navbar-toggler {
+    color: $navbar-dark-color-alt;
+    border-color: $navbar-dark-toggler-border-color-alt;
+  }
+
+  .navbar-toggler-icon {
+    background-image: escape-svg($navbar-dark-toggler-icon-bg-alt);
+  }
+
+  .navbar-text {
+    color: $navbar-dark-color-alt;
+    a,
+    a:hover,
+    a:focus {
+      color: $navbar-dark-active-color-alt;
+    }
+  }
+}
--- a/scss/dark/bootstrap/_offcanvas.scss
+++ b/scss/dark/bootstrap/_offcanvas.scss
@@ -0,0 +1,22 @@
+
+.offcanvas {
+  color: $offcanvas-color-alt;
+  background-color: $offcanvas-bg-color-alt;
+  @include box-shadow($offcanvas-box-shadow-alt);
+}
+
+.offcanvas-start {
+  border-right: $offcanvas-border-width solid $offcanvas-border-color-alt;
+}
+
+.offcanvas-end {
+  border-left: $offcanvas-border-width solid $offcanvas-border-color-alt;
+}
+
+.offcanvas-top {
+  border-bottom: $offcanvas-border-width solid $offcanvas-border-color-alt;
+}
+
+.offcanvas-bottom {
+  border-top: $offcanvas-border-width solid $offcanvas-border-color-alt;
+}
--- a/scss/dark/bootstrap/_pagination.scss
+++ b/scss/dark/bootstrap/_pagination.scss
@@ -0,0 +1,33 @@
+
+.page-link {
+  color: $pagination-color-alt;
+  background-color: $pagination-bg-alt;
+  border: $pagination-border-width solid $pagination-border-color-alt;
+
+  &:hover {
+    color: $pagination-hover-color-alt;
+    background-color: $pagination-hover-bg-alt;
+    border-color: $pagination-hover-border-color-alt;
+  }
+
+  &:focus {
+    color: $pagination-focus-color-alt;
+    background-color: $pagination-focus-bg-alt;
+    outline: $pagination-focus-outline-alt;
+    box-shadow: $pagination-focus-box-shadow-alt;
+  }
+}
+
+.page-item {
+  &.active .page-link {
+    color: $pagination-active-color-alt;
+    @include gradient-bg($pagination-active-bg-alt);
+    border-color: $pagination-active-border-color-alt;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color-alt;
+    background-color: $pagination-disabled-bg-alt;
+    border-color: $pagination-disabled-border-color-alt;
+  }
+}
--- a/scss/dark/bootstrap/_patch.scss
+++ b/scss/dark/bootstrap/_patch.scss
@@ -0,0 +1,50 @@
+//
+// Patch some items missing in BS5
+// @see: https://getbootstrap.com/docs/5.0/utilities/api/
+//
+
+// @import "functions";
+// @import "variables";
+// @import "utilities";
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+  $colors,
+  (
+    "black": $black
+  )
+);
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-merge(
+  $utilities,
+  (
+    "border-color": map-merge(
+      map-get($utilities, "border-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "border-color"), "values"),
+          ("black": $black),
+        ),
+      ),
+    ),
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          ("black": $black),
+        ),
+      ),
+    ),
+    "background-color": map-merge(
+      map-get($utilities, "background-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "background-color"), "values"),
+          ("black": $black),
+        ),
+      ),
+    ),
+  )
+);
--- a/scss/dark/bootstrap/_popover.scss
+++ b/scss/dark/bootstrap/_popover.scss
@@ -0,0 +1,82 @@
+.popover {
+  background-color: $popover-bg-alt;
+  border: $popover-border-width solid $popover-border-color-alt;
+  @include box-shadow($popover-box-shadow-alt);
+
+  .popover-arrow {
+    &::before,
+    &::after {
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-popover-top,
+.bs-popover-auto[data-popper-placement^="top"] {  // see note below
+  > .popover-arrow {
+    &::before {
+      border-top-color: $popover-arrow-outer-color-alt;
+    }
+
+    &::after {
+      border-top-color: $popover-arrow-color-alt;
+    }
+  }
+}
+
+.bs-popover-end,
+.bs-popover-auto[data-popper-placement^="right"] {  // see note below
+  > .popover-arrow {
+    &::before {
+      border-right-color: $popover-arrow-outer-color-alt;
+    }
+
+    &::after {
+      border-right-color: $popover-arrow-color-alt;
+    }
+  }
+}
+
+.bs-popover-bottom,
+.bs-popover-auto[data-popper-placement^="bottom"] {  // see note below
+  > .popover-arrow {
+    &::before {
+      border-bottom-color: $popover-arrow-outer-color-alt;
+    }
+
+    &::after {
+      border-bottom-color: $popover-arrow-color-alt;
+    }
+  }
+
+  .popover-header::before {
+    border-bottom: $popover-border-width solid $popover-header-bg-alt;
+  }
+}
+
+.bs-popover-start,
+.bs-popover-auto[data-popper-placement^="left"] { // see note below
+  > .popover-arrow {
+    &::before {
+      border-left-color: $popover-arrow-outer-color-alt;
+    }
+
+    &::after {
+      border-left-color: $popover-arrow-color-alt;
+    }
+  }
+}
+
+// ***NOTE***: Do not use @extend as that would extend the base class and the dark class
+
+// Offset the popover to account for the popover arrow
+.popover-header {
+  color: $popover-header-color-alt;
+  background-color: $popover-header-bg-alt;
+  border-bottom: $popover-border-width solid shade-color($popover-header-bg-alt, 10%);
+}
+
+.popover-body {
+  color: $popover-body-color-alt;
+}
--- a/scss/dark/bootstrap/_progress.scss
+++ b/scss/dark/bootstrap/_progress.scss
@@ -0,0 +1,15 @@
+
+.progress {
+  background-color: $progress-bg-alt;
+  @include box-shadow($progress-box-shadow-alt);
+}
+
+.progress-bar {
+  color: $progress-bar-color-alt;
+  background-color: $progress-bar-bg-alt;
+}
+
+.progress-bar-striped {
+  // THIS DOES NOTHING
+  // @include gradient-striped();
+}
--- a/scss/dark/bootstrap/_reboot.scss
+++ b/scss/dark/bootstrap/_reboot.scss
@@ -0,0 +1,91 @@
+// xxxstylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+
+// Reboot
+//
+// Normalization of HTML elements, manually forked from Normalize.css ... (see core `_reboot.scss` file)
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+// Body
+
+body {
+  color: $body-color-alt;
+  background-color: $body-bg-alt; // 2
+}
+
+
+// Content grouping
+
+hr {
+  color: $hr-color-alt; // 1
+  // background-color: currentColor;
+  opacity: $hr-opacity-alt;
+}
+
+
+// Typography
+
+%heading {
+  color: $headings-color-alt;
+}
+
+
+// Mark
+
+mark {
+  background-color: $mark-bg-alt;
+}
+
+
+// Links
+
+a {
+  color: $link-color-alt;
+
+  &:hover {
+    color: $link-hover-color-alt;
+  }
+}
+
+a:not([href]):not([class]) {
+  &,
+  &:hover {
+    color: inherit;
+  }
+}
+
+
+// Code
+
+pre {
+  color: $pre-color-alt;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    color: inherit;
+  }
+}
+
+code {
+  color: $code-color-alt;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
+}
+
+kbd {
+  color: $kbd-color-alt;
+  background-color: $kbd-bg-alt;
+}
+
+
+// Tables
+//
+// Prevent double borders
+
+caption {
+  color: $table-caption-color-alt;
+}
--- a/scss/dark/bootstrap/_root.scss
+++ b/scss/dark/bootstrap/_root.scss
@@ -0,0 +1,12 @@
+:root {
+  // Custom variable values only support SassScript inside `#{}`.
+  @each $color, $value in $colors-alt {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-alt {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  --#{$variable-prefix}gradient: #{$gradient-alt};
+}
--- a/scss/dark/bootstrap/_tables.scss
+++ b/scss/dark/bootstrap/_tables.scss
@@ -0,0 +1,65 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+  --#{$variable-prefix}table-bg: #{$table-bg-alt};
+  --#{$variable-prefix}table-striped-color: #{$table-striped-color-alt};
+  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg-alt};
+  --#{$variable-prefix}table-active-color: #{$table-active-color-alt};
+  --#{$variable-prefix}table-active-bg: #{$table-active-bg-alt};
+  --#{$variable-prefix}table-hover-color: #{$table-hover-color-alt};
+  --#{$variable-prefix}table-hover-bg: #{$table-hover-bg-alt};
+
+  color: $table-color-alt;
+  border-color: $table-border-color-alt;
+
+  // DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
+  // Target th & td
+  // xstylelint-disable-next-line selector-max-universal
+  // > :not(caption) > * > * {
+  //   background-color: var(--#{$variable-prefix}table-bg);
+  //   box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
+  // }
+
+  // Highlight border color between thead, tbody and tfoot.
+  // > :not(:last-child) > :last-child > * {
+  //   border-bottom-color: $table-group-separator-color-alt;
+  // }
+}
+
+
+// Zebra-striping
+
+// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
+// .table-striped {
+//   > tbody > tr:nth-of-type(#{$table-striped-order}) {
+//     --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+//     color: var(--#{$variable-prefix}table-striped-color);
+//   }
+// }
+
+// Active table
+
+// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
+// .table-active {
+//   --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
+//   color: var(--#{$variable-prefix}table-active-color);
+// }
+
+// Hover effect
+
+// DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
+// .table-hover {
+//   > tbody > tr:hover {
+//     --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
+//     color: var(--#{$variable-prefix}table-hover-color);
+//   }
+// }
+
+
+// Table variants
+
+@each $color, $value in $table-variants-alt {
+  @include table-variant-alt($color, $value);
+}
--- a/scss/dark/bootstrap/_toasts.scss
+++ b/scss/dark/bootstrap/_toasts.scss
@@ -0,0 +1,17 @@
+.toast {
+  color: $toast-color-alt;
+  background-color: $toast-background-color-alt;
+  border: $toast-border-width solid $toast-border-color-alt;
+  box-shadow: $toast-box-shadow-alt;
+
+  // DO I NEED THIS?
+  // &:not(.showing):not(.show) {
+  //   opacity: 0;
+  // }
+}
+
+.toast-header {
+  color: $toast-header-color-alt;
+  background-color: $toast-header-background-color-alt;
+  border-bottom: $toast-border-width solid $toast-header-border-color-alt;
+}
--- a/scss/dark/bootstrap/_tooltip.scss
+++ b/scss/dark/bootstrap/_tooltip.scss
@@ -0,0 +1,50 @@
+// Base class
+.tooltip {
+  opacity: 0;
+
+  &.show { opacity: $tooltip-opacity-alt; }
+}
+
+.bs-tooltip-top,
+.bs-tooltip-auto[data-popper-placement^="top"] {
+  .tooltip-arrow {
+    &::before {
+      border-top-color: $tooltip-arrow-color-alt;
+    }
+  }
+}
+
+.bs-tooltip-end,
+.bs-tooltip-auto[data-popper-placement^="right"] {
+  .tooltip-arrow {
+    &::before {
+      border-right-color: $tooltip-arrow-color-alt;
+    }
+  }
+}
+
+.bs-tooltip-bottom,
+.bs-tooltip-auto[data-popper-placement^="bottom"] {
+  .tooltip-arrow {
+    &::before {
+      border-bottom-color: $tooltip-arrow-color-alt;
+    }
+  }
+}
+
+.bs-tooltip-start,
+.bs-tooltip-auto[data-popper-placement^="left"] {
+  .tooltip-arrow {
+    &::before {
+      border-left-color: $tooltip-arrow-color-alt;
+    }
+  }
+}
+
+// ***NOTE***: Do not use @extend as that would extend the base class and the dark class
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  color: $tooltip-color-alt;
+  background-color: $tooltip-bg-alt;
+}
--- a/scss/dark/bootstrap/_type.scss
+++ b/scss/dark/bootstrap/_type.scss
@@ -0,0 +1,7 @@
+//
+// Misc
+//
+
+.blockquote-footer {
+  color: $blockquote-footer-color-alt;
+}
--- a/scss/dark/bootstrap/_utilities.scss
+++ b/scss/dark/bootstrap/_utilities.scss
@@ -0,0 +1,95 @@
+// Utilities
+
+$utilities-alt: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities-alt: map-merge(
+  (
+    "shadow": (
+      property: box-shadow,
+      class: shadow,
+      values: (
+        null: $box-shadow-alt,
+        sm: $box-shadow-sm-alt,
+        lg: $box-shadow-lg-alt,
+      )
+    ),
+    "border": (
+      property: border,
+      values: (
+        null: $border-width solid $border-color-alt,
+      )
+    ),
+    "border-top": (
+      property: border-top,
+      values: (
+        null: $border-width solid $border-color-alt,
+      )
+    ),
+    "border-end": (
+      property: border-right,
+      class: border-end,
+      values: (
+        null: $border-width solid $border-color-alt,
+      )
+    ),
+    "border-bottom": (
+      property: border-bottom,
+      values: (
+        null: $border-width solid $border-color-alt,
+      )
+    ),
+    "border-start": (
+      property: border-left,
+      class: border-start,
+      values: (
+        null: $border-width solid $border-color-alt,
+      )
+    ),
+    "border-color": (
+      property: border-color,
+      class: border,
+      values: map-merge(
+        $theme-colors-alt,
+        (
+          "white": $white-alt,
+          "black": $black-alt
+        )
+      )
+    ),
+    // Text
+    // DONT NEED TO DARK, CSS VARS TAKES CARE OF THIS.
+    // "gradient": (
+    //   property: background-image,
+    //   class: bg,
+    //   values: (gradient: var(--#{$variable-prefix}gradient))
+    // )
+    "color": (
+      property: color,
+      class: text,
+      values: map-merge(
+        $theme-colors-alt,
+        (
+          "body": $body-color-alt,
+          "muted": $text-muted-alt,
+          "white": $white-alt,
+          "black": $black-alt,
+          "white-50": rgba($white-alt, .5),
+          "black-50": rgba($black-alt, .5)
+        )
+      )
+    ),
+    "background-color": (
+      property: background-color,
+      class: bg,
+      values: map-merge(
+        $theme-colors-alt,
+        (
+          "body": $body-bg-alt,
+          "white": $white-alt,
+          "black": $black-alt
+        )
+      )
+    )
+  ),
+  $utilities-alt
+);
--- a/scss/dark/bootstrap/_variables-map-alt-to-core.scss
+++ b/scss/dark/bootstrap/_variables-map-alt-to-core.scss
@@ -0,0 +1,409 @@
+// ===========================================================================
+// |||   This file is auto generated.  Do not Edit.                        |||
+// |||   Remember to run `npm run map-dark-vars` to re-map SCSS variables. |||
+// ===========================================================================
+
+// !! Don't remove the next 2 lines
+// stylelint-disable
+// fusv-disable
+
+// --- Color system ---
+$white:                                       $white-alt;
+$gray-100:                                    $gray-100-alt;
+$gray-200:                                    $gray-200-alt;
+$gray-300:                                    $gray-300-alt;
+$gray-400:                                    $gray-400-alt;
+$gray-500:                                    $gray-500-alt;
+$gray-600:                                    $gray-600-alt;
+$gray-700:                                    $gray-700-alt;
+$gray-800:                                    $gray-800-alt;
+$gray-900:                                    $gray-900-alt;
+$black:                                       $black-alt;
+$grays:                                       $grays-alt;
+$blue:                                        $blue-alt;
+$indigo:                                      $indigo-alt;
+$purple:                                      $purple-alt;
+$pink:                                        $pink-alt;
+$red:                                         $red-alt;
+$orange:                                      $orange-alt;
+$yellow:                                      $yellow-alt;
+$green:                                       $green-alt;
+$teal:                                        $teal-alt;
+$cyan:                                        $cyan-alt;
+$colors:                                      $colors-alt;
+$primary:                                     $primary-alt;
+$secondary:                                   $secondary-alt;
+$success:                                     $success-alt;
+$info:                                        $info-alt;
+$warning:                                     $warning-alt;
+$danger:                                      $danger-alt;
+$light:                                       $light-alt;
+$dark:                                        $dark-alt;
+$theme-colors:                                $theme-colors-alt;
+$min-contrast-ratio:                          $min-contrast-ratio-alt;
+$color-contrast-dark:                         $color-contrast-dark-alt;
+$color-contrast-light:                        $color-contrast-light-alt;
+
+// --- Gradient ---
+$gradient:                                    $gradient-alt;
+
+// --- Body ---
+$body-bg:                                     $body-bg-alt;
+$body-color:                                  $body-color-alt;
+
+// --- Links ---
+$link-color:                                  $link-color-alt;
+$link-shade-percentage:                       $link-shade-percentage-alt;
+$link-hover-color:                            $link-hover-color-alt;
+
+// --- Components ---
+$border-color:                                $border-color-alt;
+$box-shadow:                                  $box-shadow-alt;
+$box-shadow-sm:                               $box-shadow-sm-alt;
+$box-shadow-lg:                               $box-shadow-lg-alt;
+$box-shadow-inset:                            $box-shadow-inset-alt;
+$component-active-color:                      $component-active-color-alt;
+$component-active-bg:                         $component-active-bg-alt;
+
+// --- Typography ---
+$headings-color:                              $headings-color-alt;
+$text-muted:                                  $text-muted-alt;
+$blockquote-footer-color:                     $blockquote-footer-color-alt;
+$hr-color:                                    $hr-color-alt;
+$hr-opacity:                                  $hr-opacity-alt;
+$mark-bg:                                     $mark-bg-alt;
+
+// --- Tables ---
+$table-color:                                 $table-color-alt;
+$table-bg:                                    $table-bg-alt;
+$table-striped-color:                         $table-striped-color-alt;
+$table-striped-bg-factor:                     $table-striped-bg-factor-alt;
+$table-striped-bg:                            $table-striped-bg-alt;
+$table-active-color:                          $table-active-color-alt;
+$table-active-bg-factor:                      $table-active-bg-factor-alt;
+$table-active-bg:                             $table-active-bg-alt;
+$table-hover-color:                           $table-hover-color-alt;
+$table-hover-bg-factor:                       $table-hover-bg-factor-alt;
+$table-hover-bg:                              $table-hover-bg-alt;
+$table-border-factor:                         $table-border-factor-alt;
+$table-border-color:                          $table-border-color-alt;
+$table-group-separator-color:                 $table-group-separator-color-alt;
+$table-caption-color:                         $table-caption-color-alt;
+$table-bg-scale:                              $table-bg-scale-alt;
+$table-variants:                              $table-variants-alt;
+
+// --- Buttons + Forms ---
+$input-btn-focus-color-opacity:               $input-btn-focus-color-opacity-alt;
+$input-btn-focus-color:                       $input-btn-focus-color-alt;
+$input-btn-focus-blur:                        $input-btn-focus-blur-alt;
+$input-btn-focus-box-shadow:                  $input-btn-focus-box-shadow-alt;
+
+// --- Buttons ---
+$btn-box-shadow:                              $btn-box-shadow-alt;
+$btn-focus-box-shadow:                        $btn-focus-box-shadow-alt;
+$btn-disabled-opacity:                        $btn-disabled-opacity-alt;
+$btn-active-box-shadow:                       $btn-active-box-shadow-alt;
+$btn-link-color:                              $btn-link-color-alt;
+$btn-link-hover-color:                        $btn-link-hover-color-alt;
+$btn-link-disabled-color:                     $btn-link-disabled-color-alt;
+$btn-hover-bg-shade-amount:                   $btn-hover-bg-shade-amount-alt;
+$btn-hover-bg-tint-amount:                    $btn-hover-bg-tint-amount-alt;
+$btn-hover-border-shade-amount:               $btn-hover-border-shade-amount-alt;
+$btn-hover-border-tint-amount:                $btn-hover-border-tint-amount-alt;
+$btn-active-bg-shade-amount:                  $btn-active-bg-shade-amount-alt;
+$btn-active-bg-tint-amount:                   $btn-active-bg-tint-amount-alt;
+$btn-active-border-shade-amount:              $btn-active-border-shade-amount-alt;
+$btn-active-border-tint-amount:               $btn-active-border-tint-amount-alt;
+
+// --- Forms ---
+$form-text-color:                             $form-text-color-alt;
+$form-label-color:                            $form-label-color-alt;
+$input-bg:                                    $input-bg-alt;
+$input-disabled-bg:                           $input-disabled-bg-alt;
+$input-disabled-border-color:                 $input-disabled-border-color-alt;
+$input-color:                                 $input-color-alt;
+$input-border-color:                          $input-border-color-alt;
+$input-box-shadow:                            $input-box-shadow-alt;
+$input-focus-bg:                              $input-focus-bg-alt;
+$input-focus-border-color:                    $input-focus-border-color-alt;
+$input-focus-color:                           $input-focus-color-alt;
+$input-focus-box-shadow:                      $input-focus-box-shadow-alt;
+$input-placeholder-color:                     $input-placeholder-color-alt;
+$input-plaintext-color:                       $input-plaintext-color-alt;
+$form-check-label-color:                      $form-check-label-color-alt;
+$form-check-input-active-filter:              $form-check-input-active-filter-alt;
+$form-check-input-bg:                         $form-check-input-bg-alt;
+$form-check-input-border:                     $form-check-input-border-alt;
+$form-check-input-focus-border:               $form-check-input-focus-border-alt;
+$form-check-input-focus-box-shadow:           $form-check-input-focus-box-shadow-alt;
+$form-check-input-checked-color:              $form-check-input-checked-color-alt;
+$form-check-input-checked-bg-color:           $form-check-input-checked-bg-color-alt;
+$form-check-input-checked-border-color:       $form-check-input-checked-border-color-alt;
+$form-check-input-checked-bg-image:           $form-check-input-checked-bg-image-alt;
+$form-check-radio-checked-bg-image:           $form-check-radio-checked-bg-image-alt;
+$form-check-input-indeterminate-color:        $form-check-input-indeterminate-color-alt;
+$form-check-input-indeterminate-bg-color:     $form-check-input-indeterminate-bg-color-alt;
+$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-border-color-alt;
+$form-check-input-indeterminate-bg-image:     $form-check-input-indeterminate-bg-image-alt;
+$form-check-input-disabled-opacity:           $form-check-input-disabled-opacity-alt;
+$form-check-label-disabled-opacity:           $form-check-label-disabled-opacity-alt;
+$form-check-btn-check-disabled-opacity:       $form-check-btn-check-disabled-opacity-alt;
+$form-switch-color:                           $form-switch-color-alt;
+$form-switch-bg-image:                        $form-switch-bg-image-alt;
+$form-switch-focus-color:                     $form-switch-focus-color-alt;
+$form-switch-focus-bg-image:                  $form-switch-focus-bg-image-alt;
+$form-switch-checked-color:                   $form-switch-checked-color-alt;
+$form-switch-checked-bg-image:                $form-switch-checked-bg-image-alt;
+$input-group-addon-color:                     $input-group-addon-color-alt;
+$input-group-addon-bg:                        $input-group-addon-bg-alt;
+$input-group-addon-border-color:              $input-group-addon-border-color-alt;
+$form-select-color:                           $form-select-color-alt;
+$form-select-disabled-color:                  $form-select-disabled-color-alt;
+$form-select-bg:                              $form-select-bg-alt;
+$form-select-disabled-bg:                     $form-select-disabled-bg-alt;
+$form-select-disabled-border-color:           $form-select-disabled-border-color-alt;
+$form-select-indicator-color:                 $form-select-indicator-color-alt;
+$form-select-indicator:                       $form-select-indicator-alt;
+$form-select-border-color:                    $form-select-border-color-alt;
+$form-select-box-shadow:                      $form-select-box-shadow-alt;
+$form-select-focus-border-color:              $form-select-focus-border-color-alt;
+$form-select-focus-box-shadow:                $form-select-focus-box-shadow-alt;
+$form-range-track-bg:                         $form-range-track-bg-alt;
+$form-range-track-box-shadow:                 $form-range-track-box-shadow-alt;
+$form-range-thumb-bg:                         $form-range-thumb-bg-alt;
+$form-range-thumb-border:                     $form-range-thumb-border-alt;
+$form-range-thumb-box-shadow:                 $form-range-thumb-box-shadow-alt;
+$form-range-thumb-focus-box-shadow:           $form-range-thumb-focus-box-shadow-alt;
+$form-range-thumb-active-bg:                  $form-range-thumb-active-bg-alt;
+$form-range-thumb-disabled-bg:                $form-range-thumb-disabled-bg-alt;
+$form-file-button-color:                      $form-file-button-color-alt;
+$form-file-button-bg:                         $form-file-button-bg-alt;
+$form-file-button-hover-bg:                   $form-file-button-hover-bg-alt;
+$form-floating-label-opacity:                 $form-floating-label-opacity-alt;
+
+// --- Form validation ---
+$form-feedback-valid-color:                   $form-feedback-valid-color-alt;
+$form-feedback-invalid-color:                 $form-feedback-invalid-color-alt;
+$form-feedback-icon-valid-color:              $form-feedback-icon-valid-color-alt;
+$form-feedback-icon-valid:                    $form-feedback-icon-valid-alt;
+$form-feedback-icon-invalid-color:            $form-feedback-icon-invalid-color-alt;
+$form-feedback-icon-invalid:                  $form-feedback-icon-invalid-alt;
+$form-validation-states:                      $form-validation-states-alt;
+
+// --- Navs ---
+$nav-link-color:                              $nav-link-color-alt;
+$nav-link-hover-color:                        $nav-link-hover-color-alt;
+$nav-link-disabled-color:                     $nav-link-disabled-color-alt;
+$nav-tabs-border-color:                       $nav-tabs-border-color-alt;
+$nav-tabs-link-hover-border-color:            $nav-tabs-link-hover-border-color-alt;
+$nav-tabs-link-active-color:                  $nav-tabs-link-active-color-alt;
+$nav-tabs-link-active-bg:                     $nav-tabs-link-active-bg-alt;
+$nav-tabs-link-active-border-color:           $nav-tabs-link-active-border-color-alt;
+$nav-pills-link-active-color:                 $nav-pills-link-active-color-alt;
+$nav-pills-link-active-bg:                    $nav-pills-link-active-bg-alt;
+
+// --- Navbar ---
+$navbar-dark-color:                           $navbar-dark-color-alt;
+$navbar-dark-hover-color:                     $navbar-dark-hover-color-alt;
+$navbar-dark-active-color:                    $navbar-dark-active-color-alt;
+$navbar-dark-disabled-color:                  $navbar-dark-disabled-color-alt;
+$navbar-dark-toggler-icon-bg:                 $navbar-dark-toggler-icon-bg-alt;
+$navbar-dark-toggler-border-color:            $navbar-dark-toggler-border-color-alt;
+$navbar-light-color:                          $navbar-light-color-alt;
+$navbar-light-hover-color:                    $navbar-light-hover-color-alt;
+$navbar-light-active-color:                   $navbar-light-active-color-alt;
+$navbar-light-disabled-color:                 $navbar-light-disabled-color-alt;
+$navbar-light-toggler-icon-bg:                $navbar-light-toggler-icon-bg-alt;
+$navbar-light-toggler-border-color:           $navbar-light-toggler-border-color-alt;
+$navbar-light-brand-color:                    $navbar-light-brand-color-alt;
+$navbar-light-brand-hover-color:              $navbar-light-brand-hover-color-alt;
+$navbar-dark-brand-color:                     $navbar-dark-brand-color-alt;
+$navbar-dark-brand-hover-color:               $navbar-dark-brand-hover-color-alt;
+
+// --- Dropdowns ---
+$dropdown-color:                              $dropdown-color-alt;
+$dropdown-bg:                                 $dropdown-bg-alt;
+$dropdown-border-color:                       $dropdown-border-color-alt;
+$dropdown-divider-bg:                         $dropdown-divider-bg-alt;
+$dropdown-box-shadow:                         $dropdown-box-shadow-alt;
+$dropdown-link-color:                         $dropdown-link-color-alt;
+$dropdown-link-hover-color:                   $dropdown-link-hover-color-alt;
+$dropdown-link-hover-bg:                      $dropdown-link-hover-bg-alt;
+$dropdown-link-active-color:                  $dropdown-link-active-color-alt;
+$dropdown-link-active-bg:                     $dropdown-link-active-bg-alt;
+$dropdown-link-disabled-color:                $dropdown-link-disabled-color-alt;
+$dropdown-header-color:                       $dropdown-header-color-alt;
+$dropdown-dark-color:                         $dropdown-dark-color-alt;
+$dropdown-dark-bg:                            $dropdown-dark-bg-alt;
+$dropdown-dark-border-color:                  $dropdown-dark-border-color-alt;
+$dropdown-dark-divider-bg:                    $dropdown-dark-divider-bg-alt;
+$dropdown-dark-box-shadow:                    $dropdown-dark-box-shadow-alt;
+$dropdown-dark-link-color:                    $dropdown-dark-link-color-alt;
+$dropdown-dark-link-hover-color:              $dropdown-dark-link-hover-color-alt;
+$dropdown-dark-link-hover-bg:                 $dropdown-dark-link-hover-bg-alt;
+$dropdown-dark-link-active-color:             $dropdown-dark-link-active-color-alt;
+$dropdown-dark-link-active-bg:                $dropdown-dark-link-active-bg-alt;
+$dropdown-dark-link-disabled-color:           $dropdown-dark-link-disabled-color-alt;
+$dropdown-dark-header-color:                  $dropdown-dark-header-color-alt;
+
+// --- Pagination ---
+$pagination-color:                            $pagination-color-alt;
+$pagination-bg:                               $pagination-bg-alt;
+$pagination-border-color:                     $pagination-border-color-alt;
+$pagination-focus-color:                      $pagination-focus-color-alt;
+$pagination-focus-bg:                         $pagination-focus-bg-alt;
+$pagination-focus-box-shadow:                 $pagination-focus-box-shadow-alt;
+$pagination-focus-outline:                    $pagination-focus-outline-alt;
+$pagination-hover-color:                      $pagination-hover-color-alt;
+$pagination-hover-bg:                         $pagination-hover-bg-alt;
+$pagination-hover-border-color:               $pagination-hover-border-color-alt;
+$pagination-active-color:                     $pagination-active-color-alt;
+$pagination-active-bg:                        $pagination-active-bg-alt;
+$pagination-active-border-color:              $pagination-active-border-color-alt;
+$pagination-disabled-color:                   $pagination-disabled-color-alt;
+$pagination-disabled-bg:                      $pagination-disabled-bg-alt;
+$pagination-disabled-border-color:            $pagination-disabled-border-color-alt;
+
+// --- Cards ---
+$card-border-color:                           $card-border-color-alt;
+$card-cap-bg:                                 $card-cap-bg-alt;
+$card-cap-color:                              $card-cap-color-alt;
+$card-color:                                  $card-color-alt;
+$card-bg:                                     $card-bg-alt;
+
+// --- Accordion ---
+$accordion-color:                             $accordion-color-alt;
+$accordion-bg:                                $accordion-bg-alt;
+$accordion-border-color:                      $accordion-border-color-alt;
+$accordion-button-color:                      $accordion-button-color-alt;
+$accordion-button-bg:                         $accordion-button-bg-alt;
+$accordion-button-active-bg:                  $accordion-button-active-bg-alt;
+$accordion-button-active-color:               $accordion-button-active-color-alt;
+$accordion-button-focus-border-color:         $accordion-button-focus-border-color-alt;
+$accordion-button-focus-box-shadow:           $accordion-button-focus-box-shadow-alt;
+$accordion-icon-color:                        $accordion-icon-color-alt;
+$accordion-icon-active-color:                 $accordion-icon-active-color-alt;
+$accordion-button-icon:                       $accordion-button-icon-alt;
+$accordion-button-active-icon:                $accordion-button-active-icon-alt;
+
+// --- Tooltips ---
+$tooltip-color:                               $tooltip-color-alt;
+$tooltip-bg:                                  $tooltip-bg-alt;
+$tooltip-opacity:                             $tooltip-opacity-alt;
+$tooltip-arrow-color:                         $tooltip-arrow-color-alt;
+$form-feedback-tooltip-opacity:               $form-feedback-tooltip-opacity-alt;
+
+// --- Popovers ---
+$popover-bg:                                  $popover-bg-alt;
+$popover-border-color:                        $popover-border-color-alt;
+$popover-box-shadow:                          $popover-box-shadow-alt;
+$popover-header-bg:                           $popover-header-bg-alt;
+$popover-header-color:                        $popover-header-color-alt;
+$popover-body-color:                          $popover-body-color-alt;
+$popover-arrow-color:                         $popover-arrow-color-alt;
+$popover-arrow-outer-color:                   $popover-arrow-outer-color-alt;
+
+// --- Toasts ---
+$toast-color:                                 $toast-color-alt;
+$toast-background-color:                      $toast-background-color-alt;
+$toast-border-color:                          $toast-border-color-alt;
+$toast-box-shadow:                            $toast-box-shadow-alt;
+$toast-header-color:                          $toast-header-color-alt;
+$toast-header-background-color:               $toast-header-background-color-alt;
+$toast-header-border-color:                   $toast-header-border-color-alt;
+
+// --- Badges ---
+$badge-color:                                 $badge-color-alt;
+
+// --- Modals ---
+$modal-content-color:                         $modal-content-color-alt;
+$modal-content-bg:                            $modal-content-bg-alt;
+$modal-content-border-color:                  $modal-content-border-color-alt;
+$modal-content-box-shadow-xs:                 $modal-content-box-shadow-xs-alt;
+$modal-content-box-shadow-sm-up:              $modal-content-box-shadow-sm-up-alt;
+$modal-backdrop-bg:                           $modal-backdrop-bg-alt;
+$modal-backdrop-opacity:                      $modal-backdrop-opacity-alt;
+$modal-header-border-color:                   $modal-header-border-color-alt;
+$modal-footer-border-color:                   $modal-footer-border-color-alt;
+
+// --- Alerts ---
+$alert-bg-scale:                              $alert-bg-scale-alt;
+$alert-border-scale:                          $alert-border-scale-alt;
+$alert-color-scale:                           $alert-color-scale-alt;
+
+// --- Progress bars ---
+$progress-bg:                                 $progress-bg-alt;
+$progress-box-shadow:                         $progress-box-shadow-alt;
+$progress-bar-color:                          $progress-bar-color-alt;
+$progress-bar-bg:                             $progress-bar-bg-alt;
+
+// --- List group ---
+$list-group-color:                            $list-group-color-alt;
+$list-group-bg:                               $list-group-bg-alt;
+$list-group-border-color:                     $list-group-border-color-alt;
+$list-group-item-bg-scale:                    $list-group-item-bg-scale-alt;
+$list-group-item-color-scale:                 $list-group-item-color-scale-alt;
+$list-group-hover-bg:                         $list-group-hover-bg-alt;
+$list-group-active-color:                     $list-group-active-color-alt;
+$list-group-active-bg:                        $list-group-active-bg-alt;
+$list-group-active-border-color:              $list-group-active-border-color-alt;
+$list-group-disabled-color:                   $list-group-disabled-color-alt;
+$list-group-disabled-bg:                      $list-group-disabled-bg-alt;
+$list-group-action-color:                     $list-group-action-color-alt;
+$list-group-action-hover-color:               $list-group-action-hover-color-alt;
+$list-group-action-active-color:              $list-group-action-active-color-alt;
+$list-group-action-active-bg:                 $list-group-action-active-bg-alt;
+
+// --- Image thumbnails ---
+$thumbnail-bg:                                $thumbnail-bg-alt;
+$thumbnail-border-color:                      $thumbnail-border-color-alt;
+$thumbnail-box-shadow:                        $thumbnail-box-shadow-alt;
+
+// --- Figures ---
+$figure-caption-color:                        $figure-caption-color-alt;
+
+// --- Breadcrumbs ---
+$breadcrumb-bg:                               $breadcrumb-bg-alt;
+$breadcrumb-divider-color:                    $breadcrumb-divider-color-alt;
+$breadcrumb-active-color:                     $breadcrumb-active-color-alt;
+
+// --- Carousel ---
+$carousel-control-color:                      $carousel-control-color-alt;
+$carousel-control-opacity:                    $carousel-control-opacity-alt;
+$carousel-control-hover-opacity:              $carousel-control-hover-opacity-alt;
+$carousel-indicator-opacity:                  $carousel-indicator-opacity-alt;
+$carousel-indicator-active-bg:                $carousel-indicator-active-bg-alt;
+$carousel-indicator-active-opacity:           $carousel-indicator-active-opacity-alt;
+$carousel-caption-color:                      $carousel-caption-color-alt;
+$carousel-control-prev-icon-bg:               $carousel-control-prev-icon-bg-alt;
+$carousel-control-next-icon-bg:               $carousel-control-next-icon-bg-alt;
+$carousel-dark-indicator-active-bg:           $carousel-dark-indicator-active-bg-alt;
+$carousel-dark-caption-color:                 $carousel-dark-caption-color-alt;
+$carousel-dark-control-icon-filter:           $carousel-dark-control-icon-filter-alt;
+
+// --- Close ---
+$btn-close-color:                             $btn-close-color-alt;
+$btn-close-bg:                                $btn-close-bg-alt;
+$btn-close-focus-shadow:                      $btn-close-focus-shadow-alt;
+$btn-close-opacity:                           $btn-close-opacity-alt;
+$btn-close-hover-opacity:                     $btn-close-hover-opacity-alt;
+$btn-close-focus-opacity:                     $btn-close-focus-opacity-alt;
+$btn-close-disabled-opacity:                  $btn-close-disabled-opacity-alt;
+$btn-close-white-filter:                      $btn-close-white-filter-alt;
+
+// --- Offcanvas ---
+$offcanvas-border-color:                      $offcanvas-border-color-alt;
+$offcanvas-bg-color:                          $offcanvas-bg-color-alt;
+$offcanvas-color:                             $offcanvas-color-alt;
+$offcanvas-box-shadow:                        $offcanvas-box-shadow-alt;
+
+// --- Code ---
+$code-color:                                  $code-color-alt;
+$kbd-color:                                   $kbd-color-alt;
+$kbd-bg:                                      $kbd-bg-alt;
+$pre-color:                                   $pre-color-alt;
+
+// !! Don't remove the next 2 lines
+// fusv-enable
+// stylelint-enable
+// Generated: Wed Apr 21 2021 14:50:18 GMT+1000 (Australian Eastern Standard Time)
--- a/scss/dark/bootstrap/_variables-map-core-to-temp.scss
+++ b/scss/dark/bootstrap/_variables-map-core-to-temp.scss
@@ -0,0 +1,409 @@
+// ===========================================================================
+// |||   This file is auto generated.  Do not Edit.                        |||
+// |||   Remember to run `npm run map-dark-vars` to re-map SCSS variables. |||
+// ===========================================================================
+
+// !! Don't remove the next 2 lines
+// stylelint-disable
+// fusv-disable
+
+// --- Color system ---
+$white-temp-dnu:                                       $white;
+$gray-100-temp-dnu:                                    $gray-100;
+$gray-200-temp-dnu:                                    $gray-200;
+$gray-300-temp-dnu:                                    $gray-300;
+$gray-400-temp-dnu:                                    $gray-400;
+$gray-500-temp-dnu:                                    $gray-500;
+$gray-600-temp-dnu:                                    $gray-600;
+$gray-700-temp-dnu:                                    $gray-700;
+$gray-800-temp-dnu:                                    $gray-800;
+$gray-900-temp-dnu:                                    $gray-900;
+$black-temp-dnu:                                       $black;
+$grays-temp-dnu:                                       $grays;
+$blue-temp-dnu:                                        $blue;
+$indigo-temp-dnu:                                      $indigo;
+$purple-temp-dnu:                                      $purple;
+$pink-temp-dnu:                                        $pink;
+$red-temp-dnu:                                         $red;
+$orange-temp-dnu:                                      $orange;
+$yellow-temp-dnu:                                      $yellow;
+$green-temp-dnu:                                       $green;
+$teal-temp-dnu:                                        $teal;
+$cyan-temp-dnu:                                        $cyan;
+$colors-temp-dnu:                                      $colors;
+$primary-temp-dnu:                                     $primary;
+$secondary-temp-dnu:                                   $secondary;
+$success-temp-dnu:                                     $success;
+$info-temp-dnu:                                        $info;
+$warning-temp-dnu:                                     $warning;
+$danger-temp-dnu:                                      $danger;
+$light-temp-dnu:                                       $light;
+$dark-temp-dnu:                                        $dark;
+$theme-colors-temp-dnu:                                $theme-colors;
+$min-contrast-ratio-temp-dnu:                          $min-contrast-ratio;
+$color-contrast-dark-temp-dnu:                         $color-contrast-dark;
+$color-contrast-light-temp-dnu:                        $color-contrast-light;
+
+// --- Gradient ---
+$gradient-temp-dnu:                                    $gradient;
+
+// --- Body ---
+$body-bg-temp-dnu:                                     $body-bg;
+$body-color-temp-dnu:                                  $body-color;
+
+// --- Links ---
+$link-color-temp-dnu:                                  $link-color;
+$link-shade-percentage-temp-dnu:                       $link-shade-percentage;
+$link-hover-color-temp-dnu:                            $link-hover-color;
+
+// --- Components ---
+$border-color-temp-dnu:                                $border-color;
+$box-shadow-temp-dnu:                                  $box-shadow;
+$box-shadow-sm-temp-dnu:                               $box-shadow-sm;
+$box-shadow-lg-temp-dnu:                               $box-shadow-lg;
+$box-shadow-inset-temp-dnu:                            $box-shadow-inset;
+$component-active-color-temp-dnu:                      $component-active-color;
+$component-active-bg-temp-dnu:                         $component-active-bg;
+
+// --- Typography ---
+$headings-color-temp-dnu:                              $headings-color;
+$text-muted-temp-dnu:                                  $text-muted;
+$blockquote-footer-color-temp-dnu:                     $blockquote-footer-color;
+$hr-color-temp-dnu:                                    $hr-color;
+$hr-opacity-temp-dnu:                                  $hr-opacity;
+$mark-bg-temp-dnu:                                     $mark-bg;
+
+// --- Tables ---
+$table-color-temp-dnu:                                 $table-color;
+$table-bg-temp-dnu:                                    $table-bg;
+$table-striped-color-temp-dnu:                         $table-striped-color;
+$table-striped-bg-factor-temp-dnu:                     $table-striped-bg-factor;
+$table-striped-bg-temp-dnu:                            $table-striped-bg;
+$table-active-color-temp-dnu:                          $table-active-color;
+$table-active-bg-factor-temp-dnu:                      $table-active-bg-factor;
+$table-active-bg-temp-dnu:                             $table-active-bg;
+$table-hover-color-temp-dnu:                           $table-hover-color;
+$table-hover-bg-factor-temp-dnu:                       $table-hover-bg-factor;
+$table-hover-bg-temp-dnu:                              $table-hover-bg;
+$table-border-factor-temp-dnu:                         $table-border-factor;
+$table-border-color-temp-dnu:                          $table-border-color;
+$table-group-separator-color-temp-dnu:                 $table-group-separator-color;
+$table-caption-color-temp-dnu:                         $table-caption-color;
+$table-bg-scale-temp-dnu:                              $table-bg-scale;
+$table-variants-temp-dnu:                              $table-variants;
+
+// --- Buttons + Forms ---
+$input-btn-focus-color-opacity-temp-dnu:               $input-btn-focus-color-opacity;
+$input-btn-focus-color-temp-dnu:                       $input-btn-focus-color;
+$input-btn-focus-blur-temp-dnu:                        $input-btn-focus-blur;
+$input-btn-focus-box-shadow-temp-dnu:                  $input-btn-focus-box-shadow;
+
+// --- Buttons ---
+$btn-box-shadow-temp-dnu:                              $btn-box-shadow;
+$btn-focus-box-shadow-temp-dnu:                        $btn-focus-box-shadow;
+$btn-disabled-opacity-temp-dnu:                        $btn-disabled-opacity;
+$btn-active-box-shadow-temp-dnu:                       $btn-active-box-shadow;
+$btn-link-color-temp-dnu:                              $btn-link-color;
+$btn-link-hover-color-temp-dnu:                        $btn-link-hover-color;
+$btn-link-disabled-color-temp-dnu:                     $btn-link-disabled-color;
+$btn-hover-bg-shade-amount-temp-dnu:                   $btn-hover-bg-shade-amount;
+$btn-hover-bg-tint-amount-temp-dnu:                    $btn-hover-bg-tint-amount;
+$btn-hover-border-shade-amount-temp-dnu:               $btn-hover-border-shade-amount;
+$btn-hover-border-tint-amount-temp-dnu:                $btn-hover-border-tint-amount;
+$btn-active-bg-shade-amount-temp-dnu:                  $btn-active-bg-shade-amount;
+$btn-active-bg-tint-amount-temp-dnu:                   $btn-active-bg-tint-amount;
+$btn-active-border-shade-amount-temp-dnu:              $btn-active-border-shade-amount;
+$btn-active-border-tint-amount-temp-dnu:               $btn-active-border-tint-amount;
+
+// --- Forms ---
+$form-text-color-temp-dnu:                             $form-text-color;
+$form-label-color-temp-dnu:                            $form-label-color;
+$input-bg-temp-dnu:                                    $input-bg;
+$input-disabled-bg-temp-dnu:                           $input-disabled-bg;
+$input-disabled-border-color-temp-dnu:                 $input-disabled-border-color;
+$input-color-temp-dnu:                                 $input-color;
+$input-border-color-temp-dnu:                          $input-border-color;
+$input-box-shadow-temp-dnu:                            $input-box-shadow;
+$input-focus-bg-temp-dnu:                              $input-focus-bg;
+$input-focus-border-color-temp-dnu:                    $input-focus-border-color;
+$input-focus-color-temp-dnu:                           $input-focus-color;
+$input-focus-box-shadow-temp-dnu:                      $input-focus-box-shadow;
+$input-placeholder-color-temp-dnu:                     $input-placeholder-color;
+$input-plaintext-color-temp-dnu:                       $input-plaintext-color;
+$form-check-label-color-temp-dnu:                      $form-check-label-color;
+$form-check-input-active-filter-temp-dnu:              $form-check-input-active-filter;
+$form-check-input-bg-temp-dnu:                         $form-check-input-bg;
+$form-check-input-border-temp-dnu:                     $form-check-input-border;
+$form-check-input-focus-border-temp-dnu:               $form-check-input-focus-border;
+$form-check-input-focus-box-shadow-temp-dnu:           $form-check-input-focus-box-shadow;
+$form-check-input-checked-color-temp-dnu:              $form-check-input-checked-color;
+$form-check-input-checked-bg-color-temp-dnu:           $form-check-input-checked-bg-color;
+$form-check-input-checked-border-color-temp-dnu:       $form-check-input-checked-border-color;
+$form-check-input-checked-bg-image-temp-dnu:           $form-check-input-checked-bg-image;
+$form-check-radio-checked-bg-image-temp-dnu:           $form-check-radio-checked-bg-image;
+$form-check-input-indeterminate-color-temp-dnu:        $form-check-input-indeterminate-color;
+$form-check-input-indeterminate-bg-color-temp-dnu:     $form-check-input-indeterminate-bg-color;
+$form-check-input-indeterminate-border-color-temp-dnu: $form-check-input-indeterminate-border-color;
+$form-check-input-indeterminate-bg-image-temp-dnu:     $form-check-input-indeterminate-bg-image;
+$form-check-input-disabled-opacity-temp-dnu:           $form-check-input-disabled-opacity;
+$form-check-label-disabled-opacity-temp-dnu:           $form-check-label-disabled-opacity;
+$form-check-btn-check-disabled-opacity-temp-dnu:       $form-check-btn-check-disabled-opacity;
+$form-switch-color-temp-dnu:                           $form-switch-color;
+$form-switch-bg-image-temp-dnu:                        $form-switch-bg-image;
+$form-switch-focus-color-temp-dnu:                     $form-switch-focus-color;
+$form-switch-focus-bg-image-temp-dnu:                  $form-switch-focus-bg-image;
+$form-switch-checked-color-temp-dnu:                   $form-switch-checked-color;
+$form-switch-checked-bg-image-temp-dnu:                $form-switch-checked-bg-image;
+$input-group-addon-color-temp-dnu:                     $input-group-addon-color;
+$input-group-addon-bg-temp-dnu:                        $input-group-addon-bg;
+$input-group-addon-border-color-temp-dnu:              $input-group-addon-border-color;
+$form-select-color-temp-dnu:                           $form-select-color;
+$form-select-disabled-color-temp-dnu:                  $form-select-disabled-color;
+$form-select-bg-temp-dnu:                              $form-select-bg;
+$form-select-disabled-bg-temp-dnu:                     $form-select-disabled-bg;
+$form-select-disabled-border-color-temp-dnu:           $form-select-disabled-border-color;
+$form-select-indicator-color-temp-dnu:                 $form-select-indicator-color;
+$form-select-indicator-temp-dnu:                       $form-select-indicator;
+$form-select-border-color-temp-dnu:                    $form-select-border-color;
+$form-select-box-shadow-temp-dnu:                      $form-select-box-shadow;
+$form-select-focus-border-color-temp-dnu:              $form-select-focus-border-color;
+$form-select-focus-box-shadow-temp-dnu:                $form-select-focus-box-shadow;
+$form-range-track-bg-temp-dnu:                         $form-range-track-bg;
+$form-range-track-box-shadow-temp-dnu:                 $form-range-track-box-shadow;
+$form-range-thumb-bg-temp-dnu:                         $form-range-thumb-bg;
+$form-range-thumb-border-temp-dnu:                     $form-range-thumb-border;
+$form-range-thumb-box-shadow-temp-dnu:                 $form-range-thumb-box-shadow;
+$form-range-thumb-focus-box-shadow-temp-dnu:           $form-range-thumb-focus-box-shadow;
+$form-range-thumb-active-bg-temp-dnu:                  $form-range-thumb-active-bg;
+$form-range-thumb-disabled-bg-temp-dnu:                $form-range-thumb-disabled-bg;
+$form-file-button-color-temp-dnu:                      $form-file-button-color;
+$form-file-button-bg-temp-dnu:                         $form-file-button-bg;
+$form-file-button-hover-bg-temp-dnu:                   $form-file-button-hover-bg;
+$form-floating-label-opacity-temp-dnu:                 $form-floating-label-opacity;
+
+// --- Form validation ---
+$form-feedback-valid-color-temp-dnu:                   $form-feedback-valid-color;
+$form-feedback-invalid-color-temp-dnu:                 $form-feedback-invalid-color;
+$form-feedback-icon-valid-color-temp-dnu:              $form-feedback-icon-valid-color;
+$form-feedback-icon-valid-temp-dnu:                    $form-feedback-icon-valid;
+$form-feedback-icon-invalid-color-temp-dnu:            $form-feedback-icon-invalid-color;
+$form-feedback-icon-invalid-temp-dnu:                  $form-feedback-icon-invalid;
+$form-validation-states-temp-dnu:                      $form-validation-states;
+
+// --- Navs ---
+$nav-link-color-temp-dnu:                              $nav-link-color;
+$nav-link-hover-color-temp-dnu:                        $nav-link-hover-color;
+$nav-link-disabled-color-temp-dnu:                     $nav-link-disabled-color;
+$nav-tabs-border-color-temp-dnu:                       $nav-tabs-border-color;
+$nav-tabs-link-hover-border-color-temp-dnu:            $nav-tabs-link-hover-border-color;
+$nav-tabs-link-active-color-temp-dnu:                  $nav-tabs-link-active-color;
+$nav-tabs-link-active-bg-temp-dnu:                     $nav-tabs-link-active-bg;
+$nav-tabs-link-active-border-color-temp-dnu:           $nav-tabs-link-active-border-color;
+$nav-pills-link-active-color-temp-dnu:                 $nav-pills-link-active-color;
+$nav-pills-link-active-bg-temp-dnu:                    $nav-pills-link-active-bg;
+
+// --- Navbar ---
+$navbar-dark-color-temp-dnu:                           $navbar-dark-color;
+$navbar-dark-hover-color-temp-dnu:                     $navbar-dark-hover-color;
+$navbar-dark-active-color-temp-dnu:                    $navbar-dark-active-color;
+$navbar-dark-disabled-color-temp-dnu:                  $navbar-dark-disabled-color;
+$navbar-dark-toggler-icon-bg-temp-dnu:                 $navbar-dark-toggler-icon-bg;
+$navbar-dark-toggler-border-color-temp-dnu:            $navbar-dark-toggler-border-color;
+$navbar-light-color-temp-dnu:                          $navbar-light-color;
+$navbar-light-hover-color-temp-dnu:                    $navbar-light-hover-color;
+$navbar-light-active-color-temp-dnu:                   $navbar-light-active-color;
+$navbar-light-disabled-color-temp-dnu:                 $navbar-light-disabled-color;
+$navbar-light-toggler-icon-bg-temp-dnu:                $navbar-light-toggler-icon-bg;
+$navbar-light-toggler-border-color-temp-dnu:           $navbar-light-toggler-border-color;
+$navbar-light-brand-color-temp-dnu:                    $navbar-light-brand-color;
+$navbar-light-brand-hover-color-temp-dnu:              $navbar-light-brand-hover-color;
+$navbar-dark-brand-color-temp-dnu:                     $navbar-dark-brand-color;
+$navbar-dark-brand-hover-color-temp-dnu:               $navbar-dark-brand-hover-color;
+
+// --- Dropdowns ---
+$dropdown-color-temp-dnu:                              $dropdown-color;
+$dropdown-bg-temp-dnu:                                 $dropdown-bg;
+$dropdown-border-color-temp-dnu:                       $dropdown-border-color;
+$dropdown-divider-bg-temp-dnu:                         $dropdown-divider-bg;
+$dropdown-box-shadow-temp-dnu:                         $dropdown-box-shadow;
+$dropdown-link-color-temp-dnu:                         $dropdown-link-color;
+$dropdown-link-hover-color-temp-dnu:                   $dropdown-link-hover-color;
+$dropdown-link-hover-bg-temp-dnu:                      $dropdown-link-hover-bg;
+$dropdown-link-active-color-temp-dnu:                  $dropdown-link-active-color;
+$dropdown-link-active-bg-temp-dnu:                     $dropdown-link-active-bg;
+$dropdown-link-disabled-color-temp-dnu:                $dropdown-link-disabled-color;
+$dropdown-header-color-temp-dnu:                       $dropdown-header-color;
+$dropdown-dark-color-temp-dnu:                         $dropdown-dark-color;
+$dropdown-dark-bg-temp-dnu:                            $dropdown-dark-bg;
+$dropdown-dark-border-color-temp-dnu:                  $dropdown-dark-border-color;
+$dropdown-dark-divider-bg-temp-dnu:                    $dropdown-dark-divider-bg;
+$dropdown-dark-box-shadow-temp-dnu:                    $dropdown-dark-box-shadow;
+$dropdown-dark-link-color-temp-dnu:                    $dropdown-dark-link-color;
+$dropdown-dark-link-hover-color-temp-dnu:              $dropdown-dark-link-hover-color;
+$dropdown-dark-link-hover-bg-temp-dnu:                 $dropdown-dark-link-hover-bg;
+$dropdown-dark-link-active-color-temp-dnu:             $dropdown-dark-link-active-color;
+$dropdown-dark-link-active-bg-temp-dnu:                $dropdown-dark-link-active-bg;
+$dropdown-dark-link-disabled-color-temp-dnu:           $dropdown-dark-link-disabled-color;
+$dropdown-dark-header-color-temp-dnu:                  $dropdown-dark-header-color;
+
+// --- Pagination ---
+$pagination-color-temp-dnu:                            $pagination-color;
+$pagination-bg-temp-dnu:                               $pagination-bg;
+$pagination-border-color-temp-dnu:                     $pagination-border-color;
+$pagination-focus-color-temp-dnu:                      $pagination-focus-color;
+$pagination-focus-bg-temp-dnu:                         $pagination-focus-bg;
+$pagination-focus-box-shadow-temp-dnu:                 $pagination-focus-box-shadow;
+$pagination-focus-outline-temp-dnu:                    $pagination-focus-outline;
+$pagination-hover-color-temp-dnu:                      $pagination-hover-color;
+$pagination-hover-bg-temp-dnu:                         $pagination-hover-bg;
+$pagination-hover-border-color-temp-dnu:               $pagination-hover-border-color;
+$pagination-active-color-temp-dnu:                     $pagination-active-color;
+$pagination-active-bg-temp-dnu:                        $pagination-active-bg;
+$pagination-active-border-color-temp-dnu:              $pagination-active-border-color;
+$pagination-disabled-color-temp-dnu:                   $pagination-disabled-color;
+$pagination-disabled-bg-temp-dnu:                      $pagination-disabled-bg;
+$pagination-disabled-border-color-temp-dnu:            $pagination-disabled-border-color;
+
+// --- Cards ---
+$card-border-color-temp-dnu:                           $card-border-color;
+$card-cap-bg-temp-dnu:                                 $card-cap-bg;
+$card-cap-color-temp-dnu:                              $card-cap-color;
+$card-color-temp-dnu:                                  $card-color;
+$card-bg-temp-dnu:                                     $card-bg;
+
+// --- Accordion ---
+$accordion-color-temp-dnu:                             $accordion-color;
+$accordion-bg-temp-dnu:                                $accordion-bg;
+$accordion-border-color-temp-dnu:                      $accordion-border-color;
+$accordion-button-color-temp-dnu:                      $accordion-button-color;
+$accordion-button-bg-temp-dnu:                         $accordion-button-bg;
+$accordion-button-active-bg-temp-dnu:                  $accordion-button-active-bg;
+$accordion-button-active-color-temp-dnu:               $accordion-button-active-color;
+$accordion-button-focus-border-color-temp-dnu:         $accordion-button-focus-border-color;
+$accordion-button-focus-box-shadow-temp-dnu:           $accordion-button-focus-box-shadow;
+$accordion-icon-color-temp-dnu:                        $accordion-icon-color;
+$accordion-icon-active-color-temp-dnu:                 $accordion-icon-active-color;
+$accordion-button-icon-temp-dnu:                       $accordion-button-icon;
+$accordion-button-active-icon-temp-dnu:                $accordion-button-active-icon;
+
+// --- Tooltips ---
+$tooltip-color-temp-dnu:                               $tooltip-color;
+$tooltip-bg-temp-dnu:                                  $tooltip-bg;
+$tooltip-opacity-temp-dnu:                             $tooltip-opacity;
+$tooltip-arrow-color-temp-dnu:                         $tooltip-arrow-color;
+$form-feedback-tooltip-opacity-temp-dnu:               $form-feedback-tooltip-opacity;
+
+// --- Popovers ---
+$popover-bg-temp-dnu:                                  $popover-bg;
+$popover-border-color-temp-dnu:                        $popover-border-color;
+$popover-box-shadow-temp-dnu:                          $popover-box-shadow;
+$popover-header-bg-temp-dnu:                           $popover-header-bg;
+$popover-header-color-temp-dnu:                        $popover-header-color;
+$popover-body-color-temp-dnu:                          $popover-body-color;
+$popover-arrow-color-temp-dnu:                         $popover-arrow-color;
+$popover-arrow-outer-color-temp-dnu:                   $popover-arrow-outer-color;
+
+// --- Toasts ---
+$toast-color-temp-dnu:                                 $toast-color;
+$toast-background-color-temp-dnu:                      $toast-background-color;
+$toast-border-color-temp-dnu:                          $toast-border-color;
+$toast-box-shadow-temp-dnu:                            $toast-box-shadow;
+$toast-header-color-temp-dnu:                          $toast-header-color;
+$toast-header-background-color-temp-dnu:               $toast-header-background-color;
+$toast-header-border-color-temp-dnu:                   $toast-header-border-color;
+
+// --- Badges ---
+$badge-color-temp-dnu:                                 $badge-color;
+
+// --- Modals ---
+$modal-content-color-temp-dnu:                         $modal-content-color;
+$modal-content-bg-temp-dnu:                            $modal-content-bg;
+$modal-content-border-color-temp-dnu:                  $modal-content-border-color;
+$modal-content-box-shadow-xs-temp-dnu:                 $modal-content-box-shadow-xs;
+$modal-content-box-shadow-sm-up-temp-dnu:              $modal-content-box-shadow-sm-up;
+$modal-backdrop-bg-temp-dnu:                           $modal-backdrop-bg;
+$modal-backdrop-opacity-temp-dnu:                      $modal-backdrop-opacity;
+$modal-header-border-color-temp-dnu:                   $modal-header-border-color;
+$modal-footer-border-color-temp-dnu:                   $modal-footer-border-color;
+
+// --- Alerts ---
+$alert-bg-scale-temp-dnu:                              $alert-bg-scale;
+$alert-border-scale-temp-dnu:                          $alert-border-scale;
+$alert-color-scale-temp-dnu:                           $alert-color-scale;
+
+// --- Progress bars ---
+$progress-bg-temp-dnu:                                 $progress-bg;
+$progress-box-shadow-temp-dnu:                         $progress-box-shadow;
+$progress-bar-color-temp-dnu:                          $progress-bar-color;
+$progress-bar-bg-temp-dnu:                             $progress-bar-bg;
+
+// --- List group ---
+$list-group-color-temp-dnu:                            $list-group-color;
+$list-group-bg-temp-dnu:                               $list-group-bg;
+$list-group-border-color-temp-dnu:                     $list-group-border-color;
+$list-group-item-bg-scale-temp-dnu:                    $list-group-item-bg-scale;
+$list-group-item-color-scale-temp-dnu:                 $list-group-item-color-scale;
+$list-group-hover-bg-temp-dnu:                         $list-group-hover-bg;
+$list-group-active-color-temp-dnu:                     $list-group-active-color;
+$list-group-active-bg-temp-dnu:                        $list-group-active-bg;
+$list-group-active-border-color-temp-dnu:              $list-group-active-border-color;
+$list-group-disabled-color-temp-dnu:                   $list-group-disabled-color;
+$list-group-disabled-bg-temp-dnu:                      $list-group-disabled-bg;
+$list-group-action-color-temp-dnu:                     $list-group-action-color;
+$list-group-action-hover-color-temp-dnu:               $list-group-action-hover-color;
+$list-group-action-active-color-temp-dnu:              $list-group-action-active-color;
+$list-group-action-active-bg-temp-dnu:                 $list-group-action-active-bg;
+
+// --- Image thumbnails ---
+$thumbnail-bg-temp-dnu:                                $thumbnail-bg;
+$thumbnail-border-color-temp-dnu:                      $thumbnail-border-color;
+$thumbnail-box-shadow-temp-dnu:                        $thumbnail-box-shadow;
+
+// --- Figures ---
+$figure-caption-color-temp-dnu:                        $figure-caption-color;
+
+// --- Breadcrumbs ---
+$breadcrumb-bg-temp-dnu:                               $breadcrumb-bg;
+$breadcrumb-divider-color-temp-dnu:                    $breadcrumb-divider-color;
+$breadcrumb-active-color-temp-dnu:                     $breadcrumb-active-color;
+
+// --- Carousel ---
+$carousel-control-color-temp-dnu:                      $carousel-control-color;
+$carousel-control-opacity-temp-dnu:                    $carousel-control-opacity;
+$carousel-control-hover-opacity-temp-dnu:              $carousel-control-hover-opacity;
+$carousel-indicator-opacity-temp-dnu:                  $carousel-indicator-opacity;
+$carousel-indicator-active-bg-temp-dnu:                $carousel-indicator-active-bg;
+$carousel-indicator-active-opacity-temp-dnu:           $carousel-indicator-active-opacity;
+$carousel-caption-color-temp-dnu:                      $carousel-caption-color;
+$carousel-control-prev-icon-bg-temp-dnu:               $carousel-control-prev-icon-bg;
+$carousel-control-next-icon-bg-temp-dnu:               $carousel-control-next-icon-bg;
+$carousel-dark-indicator-active-bg-temp-dnu:           $carousel-dark-indicator-active-bg;
+$carousel-dark-caption-color-temp-dnu:                 $carousel-dark-caption-color;
+$carousel-dark-control-icon-filter-temp-dnu:           $carousel-dark-control-icon-filter;
+
+// --- Close ---
+$btn-close-color-temp-dnu:                             $btn-close-color;
+$btn-close-bg-temp-dnu:                                $btn-close-bg;
+$btn-close-focus-shadow-temp-dnu:                      $btn-close-focus-shadow;
+$btn-close-opacity-temp-dnu:                           $btn-close-opacity;
+$btn-close-hover-opacity-temp-dnu:                     $btn-close-hover-opacity;
+$btn-close-focus-opacity-temp-dnu:                     $btn-close-focus-opacity;
+$btn-close-disabled-opacity-temp-dnu:                  $btn-close-disabled-opacity;
+$btn-close-white-filter-temp-dnu:                      $btn-close-white-filter;
+
+// --- Offcanvas ---
+$offcanvas-border-color-temp-dnu:                      $offcanvas-border-color;
+$offcanvas-bg-color-temp-dnu:                          $offcanvas-bg-color;
+$offcanvas-color-temp-dnu:                             $offcanvas-color;
+$offcanvas-box-shadow-temp-dnu:                        $offcanvas-box-shadow;
+
+// --- Code ---
+$code-color-temp-dnu:                                  $code-color;
+$kbd-color-temp-dnu:                                   $kbd-color;
+$kbd-bg-temp-dnu:                                      $kbd-bg;
+$pre-color-temp-dnu:                                   $pre-color;
+
+// !! Don't remove the next 2 lines
+// fusv-enable
+// stylelint-enable
+// Generated: Wed Apr 21 2021 14:50:18 GMT+1000 (Australian Eastern Standard Time)
--- a/scss/dark/bootstrap/_variables-map-temp-to-alt.scss
+++ b/scss/dark/bootstrap/_variables-map-temp-to-alt.scss
@@ -0,0 +1,409 @@
+// ===========================================================================
+// |||   This file is auto generated.  Do not Edit.                        |||
+// |||   Remember to run `npm run map-dark-vars` to re-map SCSS variables. |||
+// ===========================================================================
+
+// !! Don't remove the next 2 lines
+// stylelint-disable
+// fusv-disable
+
+// --- Color system ---
+$white-alt:                                       $white-temp-dnu;
+$gray-100-alt:                                    $gray-100-temp-dnu;
+$gray-200-alt:                                    $gray-200-temp-dnu;
+$gray-300-alt:                                    $gray-300-temp-dnu;
+$gray-400-alt:                                    $gray-400-temp-dnu;
+$gray-500-alt:                                    $gray-500-temp-dnu;
+$gray-600-alt:                                    $gray-600-temp-dnu;
+$gray-700-alt:                                    $gray-700-temp-dnu;
+$gray-800-alt:                                    $gray-800-temp-dnu;
+$gray-900-alt:                                    $gray-900-temp-dnu;
+$black-alt:                                       $black-temp-dnu;
+$grays-alt:                                       $grays-temp-dnu;
+$blue-alt:                                        $blue-temp-dnu;
+$indigo-alt:                                      $indigo-temp-dnu;
+$purple-alt:                                      $purple-temp-dnu;
+$pink-alt:                                        $pink-temp-dnu;
+$red-alt:                                         $red-temp-dnu;
+$orange-alt:                                      $orange-temp-dnu;
+$yellow-alt:                                      $yellow-temp-dnu;
+$green-alt:                                       $green-temp-dnu;
+$teal-alt:                                        $teal-temp-dnu;
+$cyan-alt:                                        $cyan-temp-dnu;
+$colors-alt:                                      $colors-temp-dnu;
+$primary-alt:                                     $primary-temp-dnu;
+$secondary-alt:                                   $secondary-temp-dnu;
+$success-alt:                                     $success-temp-dnu;
+$info-alt:                                        $info-temp-dnu;
+$warning-alt:                                     $warning-temp-dnu;
+$danger-alt:                                      $danger-temp-dnu;
+$light-alt:                                       $light-temp-dnu;
+$dark-alt:                                        $dark-temp-dnu;
+$theme-colors-alt:                                $theme-colors-temp-dnu;
+$min-contrast-ratio-alt:                          $min-contrast-ratio-temp-dnu;
+$color-contrast-dark-alt:                         $color-contrast-dark-temp-dnu;
+$color-contrast-light-alt:                        $color-contrast-light-temp-dnu;
+
+// --- Gradient ---
+$gradient-alt:                                    $gradient-temp-dnu;
+
+// --- Body ---
+$body-bg-alt:                                     $body-bg-temp-dnu;
+$body-color-alt:                                  $body-color-temp-dnu;
+
+// --- Links ---
+$link-color-alt:                                  $link-color-temp-dnu;
+$link-shade-percentage-alt:                       $link-shade-percentage-temp-dnu;
+$link-hover-color-alt:                            $link-hover-color-temp-dnu;
+
+// --- Components ---
+$border-color-alt:                                $border-color-temp-dnu;
+$box-shadow-alt:                                  $box-shadow-temp-dnu;
+$box-shadow-sm-alt:                               $box-shadow-sm-temp-dnu;
+$box-shadow-lg-alt:                               $box-shadow-lg-temp-dnu;
+$box-shadow-inset-alt:                            $box-shadow-inset-temp-dnu;
+$component-active-color-alt:                      $component-active-color-temp-dnu;
+$component-active-bg-alt:                         $component-active-bg-temp-dnu;
+
+// --- Typography ---
+$headings-color-alt:                              $headings-color-temp-dnu;
+$text-muted-alt:                                  $text-muted-temp-dnu;
+$blockquote-footer-color-alt:                     $blockquote-footer-color-temp-dnu;
+$hr-color-alt:                                    $hr-color-temp-dnu;
+$hr-opacity-alt:                                  $hr-opacity-temp-dnu;
+$mark-bg-alt:                                     $mark-bg-temp-dnu;
+
+// --- Tables ---
+$table-color-alt:                                 $table-color-temp-dnu;
+$table-bg-alt:                                    $table-bg-temp-dnu;
+$table-striped-color-alt:                         $table-striped-color-temp-dnu;
+$table-striped-bg-factor-alt:                     $table-striped-bg-factor-temp-dnu;
+$table-striped-bg-alt:                            $table-striped-bg-temp-dnu;
+$table-active-color-alt:                          $table-active-color-temp-dnu;
+$table-active-bg-factor-alt:                      $table-active-bg-factor-temp-dnu;
+$table-active-bg-alt:                             $table-active-bg-temp-dnu;
+$table-hover-color-alt:                           $table-hover-color-temp-dnu;
+$table-hover-bg-factor-alt:                       $table-hover-bg-factor-temp-dnu;
+$table-hover-bg-alt:                              $table-hover-bg-temp-dnu;
+$table-border-factor-alt:                         $table-border-factor-temp-dnu;
+$table-border-color-alt:                          $table-border-color-temp-dnu;
+$table-group-separator-color-alt:                 $table-group-separator-color-temp-dnu;
+$table-caption-color-alt:                         $table-caption-color-temp-dnu;
+$table-bg-scale-alt:                              $table-bg-scale-temp-dnu;
+$table-variants-alt:                              $table-variants-temp-dnu;
+
+// --- Buttons + Forms ---
+$input-btn-focus-color-opacity-alt:               $input-btn-focus-color-opacity-temp-dnu;
+$input-btn-focus-color-alt:                       $input-btn-focus-color-temp-dnu;
+$input-btn-focus-blur-alt:                        $input-btn-focus-blur-temp-dnu;
+$input-btn-focus-box-shadow-alt:                  $input-btn-focus-box-shadow-temp-dnu;
+
+// --- Buttons ---
+$btn-box-shadow-alt:                              $btn-box-shadow-temp-dnu;
+$btn-focus-box-shadow-alt:                        $btn-focus-box-shadow-temp-dnu;
+$btn-disabled-opacity-alt:                        $btn-disabled-opacity-temp-dnu;
+$btn-active-box-shadow-alt:                       $btn-active-box-shadow-temp-dnu;
+$btn-link-color-alt:                              $btn-link-color-temp-dnu;
+$btn-link-hover-color-alt:                        $btn-link-hover-color-temp-dnu;
+$btn-link-disabled-color-alt:                     $btn-link-disabled-color-temp-dnu;
+$btn-hover-bg-shade-amount-alt:                   $btn-hover-bg-shade-amount-temp-dnu;
+$btn-hover-bg-tint-amount-alt:                    $btn-hover-bg-tint-amount-temp-dnu;
+$btn-hover-border-shade-amount-alt:               $btn-hover-border-shade-amount-temp-dnu;
+$btn-hover-border-tint-amount-alt:                $btn-hover-border-tint-amount-temp-dnu;
+$btn-active-bg-shade-amount-alt:                  $btn-active-bg-shade-amount-temp-dnu;
+$btn-active-bg-tint-amount-alt:                   $btn-active-bg-tint-amount-temp-dnu;
+$btn-active-border-shade-amount-alt:              $btn-active-border-shade-amount-temp-dnu;
+$btn-active-border-tint-amount-alt:               $btn-active-border-tint-amount-temp-dnu;
+
+// --- Forms ---
+$form-text-color-alt:                             $form-text-color-temp-dnu;
+$form-label-color-alt:                            $form-label-color-temp-dnu;
+$input-bg-alt:                                    $input-bg-temp-dnu;
+$input-disabled-bg-alt:                           $input-disabled-bg-temp-dnu;
+$input-disabled-border-color-alt:                 $input-disabled-border-color-temp-dnu;
+$input-color-alt:                                 $input-color-temp-dnu;
+$input-border-color-alt:                          $input-border-color-temp-dnu;
+$input-box-shadow-alt:                            $input-box-shadow-temp-dnu;
+$input-focus-bg-alt:                              $input-focus-bg-temp-dnu;
+$input-focus-border-color-alt:                    $input-focus-border-color-temp-dnu;
+$input-focus-color-alt:                           $input-focus-color-temp-dnu;
+$input-focus-box-shadow-alt:                      $input-focus-box-shadow-temp-dnu;
+$input-placeholder-color-alt:                     $input-placeholder-color-temp-dnu;
+$input-plaintext-color-alt:                       $input-plaintext-color-temp-dnu;
+$form-check-label-color-alt:                      $form-check-label-color-temp-dnu;
+$form-check-input-active-filter-alt:              $form-check-input-active-filter-temp-dnu;
+$form-check-input-bg-alt:                         $form-check-input-bg-temp-dnu;
+$form-check-input-border-alt:                     $form-check-input-border-temp-dnu;
+$form-check-input-focus-border-alt:               $form-check-input-focus-border-temp-dnu;
+$form-check-input-focus-box-shadow-alt:           $form-check-input-focus-box-shadow-temp-dnu;
+$form-check-input-checked-color-alt:              $form-check-input-checked-color-temp-dnu;
+$form-check-input-checked-bg-color-alt:           $form-check-input-checked-bg-color-temp-dnu;
+$form-check-input-checked-border-color-alt:       $form-check-input-checked-border-color-temp-dnu;
+$form-check-input-checked-bg-image-alt:           $form-check-input-checked-bg-image-temp-dnu;
+$form-check-radio-checked-bg-image-alt:           $form-check-radio-checked-bg-image-temp-dnu;
+$form-check-input-indeterminate-color-alt:        $form-check-input-indeterminate-color-temp-dnu;
+$form-check-input-indeterminate-bg-color-alt:     $form-check-input-indeterminate-bg-color-temp-dnu;
+$form-check-input-indeterminate-border-color-alt: $form-check-input-indeterminate-border-color-temp-dnu;
+$form-check-input-indeterminate-bg-image-alt:     $form-check-input-indeterminate-bg-image-temp-dnu;
+$form-check-input-disabled-opacity-alt:           $form-check-input-disabled-opacity-temp-dnu;
+$form-check-label-disabled-opacity-alt:           $form-check-label-disabled-opacity-temp-dnu;
+$form-check-btn-check-disabled-opacity-alt:       $form-check-btn-check-disabled-opacity-temp-dnu;
+$form-switch-color-alt:                           $form-switch-color-temp-dnu;
+$form-switch-bg-image-alt:                        $form-switch-bg-image-temp-dnu;
+$form-switch-focus-color-alt:                     $form-switch-focus-color-temp-dnu;
+$form-switch-focus-bg-image-alt:                  $form-switch-focus-bg-image-temp-dnu;
+$form-switch-checked-color-alt:                   $form-switch-checked-color-temp-dnu;
+$form-switch-checked-bg-image-alt:                $form-switch-checked-bg-image-temp-dnu;
+$input-group-addon-color-alt:                     $input-group-addon-color-temp-dnu;
+$input-group-addon-bg-alt:                        $input-group-addon-bg-temp-dnu;
+$input-group-addon-border-color-alt:              $input-group-addon-border-color-temp-dnu;
+$form-select-color-alt:                           $form-select-color-temp-dnu;
+$form-select-disabled-color-alt:                  $form-select-disabled-color-temp-dnu;
+$form-select-bg-alt:                              $form-select-bg-temp-dnu;
+$form-select-disabled-bg-alt:                     $form-select-disabled-bg-temp-dnu;
+$form-select-disabled-border-color-alt:           $form-select-disabled-border-color-temp-dnu;
+$form-select-indicator-color-alt:                 $form-select-indicator-color-temp-dnu;
+$form-select-indicator-alt:                       $form-select-indicator-temp-dnu;
+$form-select-border-color-alt:                    $form-select-border-color-temp-dnu;
+$form-select-box-shadow-alt:                      $form-select-box-shadow-temp-dnu;
+$form-select-focus-border-color-alt:              $form-select-focus-border-color-temp-dnu;
+$form-select-focus-box-shadow-alt:                $form-select-focus-box-shadow-temp-dnu;
+$form-range-track-bg-alt:                         $form-range-track-bg-temp-dnu;
+$form-range-track-box-shadow-alt:                 $form-range-track-box-shadow-temp-dnu;
+$form-range-thumb-bg-alt:                         $form-range-thumb-bg-temp-dnu;
+$form-range-thumb-border-alt:                     $form-range-thumb-border-temp-dnu;
+$form-range-thumb-box-shadow-alt:                 $form-range-thumb-box-shadow-temp-dnu;
+$form-range-thumb-focus-box-shadow-alt:           $form-range-thumb-focus-box-shadow-temp-dnu;
+$form-range-thumb-active-bg-alt:                  $form-range-thumb-active-bg-temp-dnu;
+$form-range-thumb-disabled-bg-alt:                $form-range-thumb-disabled-bg-temp-dnu;
+$form-file-button-color-alt:                      $form-file-button-color-temp-dnu;
+$form-file-button-bg-alt:                         $form-file-button-bg-temp-dnu;
+$form-file-button-hover-bg-alt:                   $form-file-button-hover-bg-temp-dnu;
+$form-floating-label-opacity-alt:                 $form-floating-label-opacity-temp-dnu;
+
+// --- Form validation ---
+$form-feedback-valid-color-alt:                   $form-feedback-valid-color-temp-dnu;
+$form-feedback-invalid-color-alt:                 $form-feedback-invalid-color-temp-dnu;
+$form-feedback-icon-valid-color-alt:              $form-feedback-icon-valid-color-temp-dnu;
+$form-feedback-icon-valid-alt:                    $form-feedback-icon-valid-temp-dnu;
+$form-feedback-icon-invalid-color-alt:            $form-feedback-icon-invalid-color-temp-dnu;
+$form-feedback-icon-invalid-alt:                  $form-feedback-icon-invalid-temp-dnu;
+$form-validation-states-alt:                      $form-validation-states-temp-dnu;
+
+// --- Navs ---
+$nav-link-color-alt:                              $nav-link-color-temp-dnu;
+$nav-link-hover-color-alt:                        $nav-link-hover-color-temp-dnu;
+$nav-link-disabled-color-alt:                     $nav-link-disabled-color-temp-dnu;
+$nav-tabs-border-color-alt:                       $nav-tabs-border-color-temp-dnu;
+$nav-tabs-link-hover-border-color-alt:            $nav-tabs-link-hover-border-color-temp-dnu;
+$nav-tabs-link-active-color-alt:                  $nav-tabs-link-active-color-temp-dnu;
+$nav-tabs-link-active-bg-alt:                     $nav-tabs-link-active-bg-temp-dnu;
+$nav-tabs-link-active-border-color-alt:           $nav-tabs-link-active-border-color-temp-dnu;
+$nav-pills-link-active-color-alt:                 $nav-pills-link-active-color-temp-dnu;
+$nav-pills-link-active-bg-alt:                    $nav-pills-link-active-bg-temp-dnu;
+
+// --- Navbar ---
+$navbar-dark-color-alt:                           $navbar-dark-color-temp-dnu;
+$navbar-dark-hover-color-alt:                     $navbar-dark-hover-color-temp-dnu;
+$navbar-dark-active-color-alt:                    $navbar-dark-active-color-temp-dnu;
+$navbar-dark-disabled-color-alt:                  $navbar-dark-disabled-color-temp-dnu;
+$navbar-dark-toggler-icon-bg-alt:                 $navbar-dark-toggler-icon-bg-temp-dnu;
+$navbar-dark-toggler-border-color-alt:            $navbar-dark-toggler-border-color-temp-dnu;
+$navbar-light-color-alt:                          $navbar-light-color-temp-dnu;
+$navbar-light-hover-color-alt:                    $navbar-light-hover-color-temp-dnu;
+$navbar-light-active-color-alt:                   $navbar-light-active-color-temp-dnu;
+$navbar-light-disabled-color-alt:                 $navbar-light-disabled-color-temp-dnu;
+$navbar-light-toggler-icon-bg-alt:                $navbar-light-toggler-icon-bg-temp-dnu;
+$navbar-light-toggler-border-color-alt:           $navbar-light-toggler-border-color-temp-dnu;
+$navbar-light-brand-color-alt:                    $navbar-light-brand-color-temp-dnu;
+$navbar-light-brand-hover-color-alt:              $navbar-light-brand-hover-color-temp-dnu;
+$navbar-dark-brand-color-alt:                     $navbar-dark-brand-color-temp-dnu;
+$navbar-dark-brand-hover-color-alt:               $navbar-dark-brand-hover-color-temp-dnu;
+
+// --- Dropdowns ---
+$dropdown-color-alt:                              $dropdown-color-temp-dnu;
+$dropdown-bg-alt:                                 $dropdown-bg-temp-dnu;
+$dropdown-border-color-alt:                       $dropdown-border-color-temp-dnu;
+$dropdown-divider-bg-alt:                         $dropdown-divider-bg-temp-dnu;
+$dropdown-box-shadow-alt:                         $dropdown-box-shadow-temp-dnu;
+$dropdown-link-color-alt:                         $dropdown-link-color-temp-dnu;
+$dropdown-link-hover-color-alt:                   $dropdown-link-hover-color-temp-dnu;
+$dropdown-link-hover-bg-alt:                      $dropdown-link-hover-bg-temp-dnu;
+$dropdown-link-active-color-alt:                  $dropdown-link-active-color-temp-dnu;
+$dropdown-link-active-bg-alt:                     $dropdown-link-active-bg-temp-dnu;
+$dropdown-link-disabled-color-alt:                $dropdown-link-disabled-color-temp-dnu;
+$dropdown-header-color-alt:                       $dropdown-header-color-temp-dnu;
+$dropdown-dark-color-alt:                         $dropdown-dark-color-temp-dnu;
+$dropdown-dark-bg-alt:                            $dropdown-dark-bg-temp-dnu;
+$dropdown-dark-border-color-alt:                  $dropdown-dark-border-color-temp-dnu;
+$dropdown-dark-divider-bg-alt:                    $dropdown-dark-divider-bg-temp-dnu;
+$dropdown-dark-box-shadow-alt:                    $dropdown-dark-box-shadow-temp-dnu;
+$dropdown-dark-link-color-alt:                    $dropdown-dark-link-color-temp-dnu;
+$dropdown-dark-link-hover-color-alt:              $dropdown-dark-link-hover-color-temp-dnu;
+$dropdown-dark-link-hover-bg-alt:                 $dropdown-dark-link-hover-bg-temp-dnu;
+$dropdown-dark-link-active-color-alt:             $dropdown-dark-link-active-color-temp-dnu;
+$dropdown-dark-link-active-bg-alt:                $dropdown-dark-link-active-bg-temp-dnu;
+$dropdown-dark-link-disabled-color-alt:           $dropdown-dark-link-disabled-color-temp-dnu;
+$dropdown-dark-header-color-alt:                  $dropdown-dark-header-color-temp-dnu;
+
+// --- Pagination ---
+$pagination-color-alt:                            $pagination-color-temp-dnu;
+$pagination-bg-alt:                               $pagination-bg-temp-dnu;
+$pagination-border-color-alt:                     $pagination-border-color-temp-dnu;
+$pagination-focus-color-alt:                      $pagination-focus-color-temp-dnu;
+$pagination-focus-bg-alt:                         $pagination-focus-bg-temp-dnu;
+$pagination-focus-box-shadow-alt:                 $pagination-focus-box-shadow-temp-dnu;
+$pagination-focus-outline-alt:                    $pagination-focus-outline-temp-dnu;
+$pagination-hover-color-alt:                      $pagination-hover-color-temp-dnu;
+$pagination-hover-bg-alt:                         $pagination-hover-bg-temp-dnu;
+$pagination-hover-border-color-alt:               $pagination-hover-border-color-temp-dnu;
+$pagination-active-color-alt:                     $pagination-active-color-temp-dnu;
+$pagination-active-bg-alt:                        $pagination-active-bg-temp-dnu;
+$pagination-active-border-color-alt:              $pagination-active-border-color-temp-dnu;
+$pagination-disabled-color-alt:                   $pagination-disabled-color-temp-dnu;
+$pagination-disabled-bg-alt:                      $pagination-disabled-bg-temp-dnu;
+$pagination-disabled-border-color-alt:            $pagination-disabled-border-color-temp-dnu;
+
+// --- Cards ---
+$card-border-color-alt:                           $card-border-color-temp-dnu;
+$card-cap-bg-alt:                                 $card-cap-bg-temp-dnu;
+$card-cap-color-alt:                              $card-cap-color-temp-dnu;
+$card-color-alt:                                  $card-color-temp-dnu;
+$card-bg-alt:                                     $card-bg-temp-dnu;
+
+// --- Accordion ---
+$accordion-color-alt:                             $accordion-color-temp-dnu;
+$accordion-bg-alt:                                $accordion-bg-temp-dnu;
+$accordion-border-color-alt:                      $accordion-border-color-temp-dnu;
+$accordion-button-color-alt:                      $accordion-button-color-temp-dnu;
+$accordion-button-bg-alt:                         $accordion-button-bg-temp-dnu;
+$accordion-button-active-bg-alt:                  $accordion-button-active-bg-temp-dnu;
+$accordion-button-active-color-alt:               $accordion-button-active-color-temp-dnu;
+$accordion-button-focus-border-color-alt:         $accordion-button-focus-border-color-temp-dnu;
+$accordion-button-focus-box-shadow-alt:           $accordion-button-focus-box-shadow-temp-dnu;
+$accordion-icon-color-alt:                        $accordion-icon-color-temp-dnu;
+$accordion-icon-active-color-alt:                 $accordion-icon-active-color-temp-dnu;
+$accordion-button-icon-alt:                       $accordion-button-icon-temp-dnu;
+$accordion-button-active-icon-alt:                $accordion-button-active-icon-temp-dnu;
+
+// --- Tooltips ---
+$tooltip-color-alt:                               $tooltip-color-temp-dnu;
+$tooltip-bg-alt:                                  $tooltip-bg-temp-dnu;
+$tooltip-opacity-alt:                             $tooltip-opacity-temp-dnu;
+$tooltip-arrow-color-alt:                         $tooltip-arrow-color-temp-dnu;
+$form-feedback-tooltip-opacity-alt:               $form-feedback-tooltip-opacity-temp-dnu;
+
+// --- Popovers ---
+$popover-bg-alt:                                  $popover-bg-temp-dnu;
+$popover-border-color-alt:                        $popover-border-color-temp-dnu;
+$popover-box-shadow-alt:                          $popover-box-shadow-temp-dnu;
+$popover-header-bg-alt:                           $popover-header-bg-temp-dnu;
+$popover-header-color-alt:                        $popover-header-color-temp-dnu;
+$popover-body-color-alt:                          $popover-body-color-temp-dnu;
+$popover-arrow-color-alt:                         $popover-arrow-color-temp-dnu;
+$popover-arrow-outer-color-alt:                   $popover-arrow-outer-color-temp-dnu;
+
+// --- Toasts ---
+$toast-color-alt:                                 $toast-color-temp-dnu;
+$toast-background-color-alt:                      $toast-background-color-temp-dnu;
+$toast-border-color-alt:                          $toast-border-color-temp-dnu;
+$toast-box-shadow-alt:                            $toast-box-shadow-temp-dnu;
+$toast-header-color-alt:                          $toast-header-color-temp-dnu;
+$toast-header-background-color-alt:               $toast-header-background-color-temp-dnu;
+$toast-header-border-color-alt:                   $toast-header-border-color-temp-dnu;
+
+// --- Badges ---
+$badge-color-alt:                                 $badge-color-temp-dnu;
+
+// --- Modals ---
+$modal-content-color-alt:                         $modal-content-color-temp-dnu;
+$modal-content-bg-alt:                            $modal-content-bg-temp-dnu;
+$modal-content-border-color-alt:                  $modal-content-border-color-temp-dnu;
+$modal-content-box-shadow-xs-alt:                 $modal-content-box-shadow-xs-temp-dnu;
+$modal-content-box-shadow-sm-up-alt:              $modal-content-box-shadow-sm-up-temp-dnu;
+$modal-backdrop-bg-alt:                           $modal-backdrop-bg-temp-dnu;
+$modal-backdrop-opacity-alt:                      $modal-backdrop-opacity-temp-dnu;
+$modal-header-border-color-alt:                   $modal-header-border-color-temp-dnu;
+$modal-footer-border-color-alt:                   $modal-footer-border-color-temp-dnu;
+
+// --- Alerts ---
+$alert-bg-scale-alt:                              $alert-bg-scale-temp-dnu;
+$alert-border-scale-alt:                          $alert-border-scale-temp-dnu;
+$alert-color-scale-alt:                           $alert-color-scale-temp-dnu;
+
+// --- Progress bars ---
+$progress-bg-alt:                                 $progress-bg-temp-dnu;
+$progress-box-shadow-alt:                         $progress-box-shadow-temp-dnu;
+$progress-bar-color-alt:                          $progress-bar-color-temp-dnu;
+$progress-bar-bg-alt:                             $progress-bar-bg-temp-dnu;
+
+// --- List group ---
+$list-group-color-alt:                            $list-group-color-temp-dnu;
+$list-group-bg-alt:                               $list-group-bg-temp-dnu;
+$list-group-border-color-alt:                     $list-group-border-color-temp-dnu;
+$list-group-item-bg-scale-alt:                    $list-group-item-bg-scale-temp-dnu;
+$list-group-item-color-scale-alt:                 $list-group-item-color-scale-temp-dnu;
+$list-group-hover-bg-alt:                         $list-group-hover-bg-temp-dnu;
+$list-group-active-color-alt:                     $list-group-active-color-temp-dnu;
+$list-group-active-bg-alt:                        $list-group-active-bg-temp-dnu;
+$list-group-active-border-color-alt:              $list-group-active-border-color-temp-dnu;
+$list-group-disabled-color-alt:                   $list-group-disabled-color-temp-dnu;
+$list-group-disabled-bg-alt:                      $list-group-disabled-bg-temp-dnu;
+$list-group-action-color-alt:                     $list-group-action-color-temp-dnu;
+$list-group-action-hover-color-alt:               $list-group-action-hover-color-temp-dnu;
+$list-group-action-active-color-alt:              $list-group-action-active-color-temp-dnu;
+$list-group-action-active-bg-alt:                 $list-group-action-active-bg-temp-dnu;
+
+// --- Image thumbnails ---
+$thumbnail-bg-alt:                                $thumbnail-bg-temp-dnu;
+$thumbnail-border-color-alt:                      $thumbnail-border-color-temp-dnu;
+$thumbnail-box-shadow-alt:                        $thumbnail-box-shadow-temp-dnu;
+
+// --- Figures ---
+$figure-caption-color-alt:                        $figure-caption-color-temp-dnu;
+
+// --- Breadcrumbs ---
+$breadcrumb-bg-alt:                               $breadcrumb-bg-temp-dnu;
+$breadcrumb-divider-color-alt:                    $breadcrumb-divider-color-temp-dnu;
+$breadcrumb-active-color-alt:                     $breadcrumb-active-color-temp-dnu;
+
+// --- Carousel ---
+$carousel-control-color-alt:                      $carousel-control-color-temp-dnu;
+$carousel-control-opacity-alt:                    $carousel-control-opacity-temp-dnu;
+$carousel-control-hover-opacity-alt:              $carousel-control-hover-opacity-temp-dnu;
+$carousel-indicator-opacity-alt:                  $carousel-indicator-opacity-temp-dnu;
+$carousel-indicator-active-bg-alt:                $carousel-indicator-active-bg-temp-dnu;
+$carousel-indicator-active-opacity-alt:           $carousel-indicator-active-opacity-temp-dnu;
+$carousel-caption-color-alt:                      $carousel-caption-color-temp-dnu;
+$carousel-control-prev-icon-bg-alt:               $carousel-control-prev-icon-bg-temp-dnu;
+$carousel-control-next-icon-bg-alt:               $carousel-control-next-icon-bg-temp-dnu;
+$carousel-dark-indicator-active-bg-alt:           $carousel-dark-indicator-active-bg-temp-dnu;
+$carousel-dark-caption-color-alt:                 $carousel-dark-caption-color-temp-dnu;
+$carousel-dark-control-icon-filter-alt:           $carousel-dark-control-icon-filter-temp-dnu;
+
+// --- Close ---
+$btn-close-color-alt:                             $btn-close-color-temp-dnu;
+$btn-close-bg-alt:                                $btn-close-bg-temp-dnu;
+$btn-close-focus-shadow-alt:                      $btn-close-focus-shadow-temp-dnu;
+$btn-close-opacity-alt:                           $btn-close-opacity-temp-dnu;
+$btn-close-hover-opacity-alt:                     $btn-close-hover-opacity-temp-dnu;
+$btn-close-focus-opacity-alt:                     $btn-close-focus-opacity-temp-dnu;
+$btn-close-disabled-opacity-alt:                  $btn-close-disabled-opacity-temp-dnu;
+$btn-close-white-filter-alt:                      $btn-close-white-filter-temp-dnu;
+
+// --- Offcanvas ---
+$offcanvas-border-color-alt:                      $offcanvas-border-color-temp-dnu;
+$offcanvas-bg-color-alt:                          $offcanvas-bg-color-temp-dnu;
+$offcanvas-color-alt:                             $offcanvas-color-temp-dnu;
+$offcanvas-box-shadow-alt:                        $offcanvas-box-shadow-temp-dnu;
+
+// --- Code ---
+$code-color-alt:                                  $code-color-temp-dnu;
+$kbd-color-alt:                                   $kbd-color-temp-dnu;
+$kbd-bg-alt:                                      $kbd-bg-temp-dnu;
+$pre-color-alt:                                   $pre-color-temp-dnu;
+
+// !! Don't remove the next 2 lines
+// fusv-enable
+// stylelint-enable
+// Generated: Wed Apr 21 2021 14:50:18 GMT+1000 (Australian Eastern Standard Time)
--- a/scss/dark/bootstrap/forms/_floating-labels.scss
+++ b/scss/dark/bootstrap/forms/_floating-labels.scss
@@ -0,0 +1,26 @@
+.form-floating {
+
+  // > label {
+  //   border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+  // }
+
+  > .form-control {
+    // &::placeholder {
+    //   color: transparent;
+    // }
+  }
+
+  > .form-control:focus,
+  > .form-control:not(:placeholder-shown),
+  > .form-select {
+    ~ label {
+      opacity: $form-floating-label-opacity-alt;
+    }
+  }
+  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+  > .form-control:-webkit-autofill {
+    ~ label {
+      opacity: $form-floating-label-opacity-alt;
+    }
+  }
+}
--- a/scss/dark/bootstrap/forms/_form-check.scss
+++ b/scss/dark/bootstrap/forms/_form-check.scss
@@ -0,0 +1,93 @@
+// Check/radio
+
+.form-check-input {
+  background-color: $form-check-input-bg-alt;
+  border: $form-check-input-border-alt;
+
+  &:active {
+    filter: $form-check-input-active-filter-alt;
+  }
+
+  &:focus {
+    border-color: $form-check-input-focus-border-alt;
+    box-shadow: $form-check-input-focus-box-shadow-alt;
+  }
+
+  &:checked {
+    background-color: $form-check-input-checked-bg-color-alt;
+    border-color: $form-check-input-checked-border-color-alt;
+
+    &[type="checkbox"] {
+      @if $enable-gradients {
+        background-image: escape-svg($form-check-input-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($form-check-input-checked-bg-image-alt);
+      }
+    }
+
+    &[type="radio"] {
+      @if $enable-gradients {
+        background-image: escape-svg($form-check-radio-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($form-check-radio-checked-bg-image-alt);
+      }
+    }
+  }
+
+  &[type="checkbox"]:indeterminate {
+    background-color: $form-check-input-indeterminate-bg-color-alt;
+    border-color: $form-check-input-indeterminate-border-color-alt;
+
+    @if $enable-gradients {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image-alt), var(--#{$variable-prefix}gradient);
+    } @else {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image-alt);
+    }
+  }
+
+  &:disabled {
+    opacity: $form-check-input-disabled-opacity-alt;
+  }
+
+  // Use disabled attribute in addition of :disabled pseudo-class
+  &[disabled],
+  &:disabled {
+    ~ .form-check-label {
+      opacity: $form-check-label-disabled-opacity-alt;
+    }
+  }
+}
+
+.form-check-label {
+  color: $form-check-label-color-alt;
+}
+
+// Switch
+
+.form-switch {
+
+  .form-check-input {
+    background-image: escape-svg($form-switch-bg-image-alt);
+
+    &:focus {
+      background-image: escape-svg($form-switch-focus-bg-image-alt);
+    }
+
+    &:checked {
+      @if $enable-gradients {
+        background-image: escape-svg($form-switch-checked-bg-image-alt), var(--#{$variable-prefix}gradient);
+      } @else {
+        background-image: escape-svg($form-switch-checked-bg-image-alt);
+      }
+    }
+  }
+}
+
+.btn-check {
+  &[disabled],
+  &:disabled {
+    + .btn {
+      opacity: $form-check-btn-check-disabled-opacity-alt;
+    }
+  }
+}
--- a/scss/dark/bootstrap/forms/_form-control.scss
+++ b/scss/dark/bootstrap/forms/_form-control.scss
@@ -0,0 +1,64 @@
+//
+// General form controls (plus a few specific high-level interventions)
+//
+
+.form-control {
+  color: $input-color-alt;
+  background-color: $input-bg-alt;
+  border: $input-border-width solid $input-border-color-alt;
+
+  @include box-shadow($input-box-shadow-alt);
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  &:focus {
+    color: $input-focus-color-alt;
+    background-color: $input-focus-bg-alt;
+    border-color: $input-focus-border-color-alt;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow-alt, $input-focus-box-shadow-alt);
+    } @else {
+      box-shadow: $input-focus-box-shadow-alt;
+    }
+  }
+
+  // Placeholder
+  &::placeholder {
+    color: $input-placeholder-color-alt;
+  }
+
+  // Disabled and read-only inputs
+  &:disabled,
+  &:read-only {
+    background-color: $input-disabled-bg-alt;
+    border-color: $input-disabled-border-color-alt;
+  }
+
+  // File input buttons theming
+  &::file-selector-button {
+    color: $form-file-button-color-alt;
+    @include gradient-bg($form-file-button-bg-alt);
+    border-color: inherit;
+  }
+
+  &:hover:not(:disabled):not(:read-only)::file-selector-button {
+    background-color: $form-file-button-hover-bg-alt;
+  }
+
+  &::-webkit-file-upload-button {
+    color: $form-file-button-color-alt;
+    @include gradient-bg($form-file-button-bg-alt);
+    border-color: inherit;
+  }
+
+  &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
+    background-color: $form-file-button-hover-bg-alt;
+  }
+}
+
+// Readonly controls as plain text
+
+.form-control-plaintext {
+  color: $input-plaintext-color-alt;
+  background-color: transparent;
+  border: solid transparent;
+}
--- a/scss/dark/bootstrap/forms/_form-range.scss
+++ b/scss/dark/bootstrap/forms/_form-range.scss
@@ -0,0 +1,56 @@
+// Range
+
+.form-range {
+  // background-color: transparent;
+
+  &:focus {
+    &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
+    &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
+  }
+
+  &::-webkit-slider-thumb {
+    @include gradient-bg($form-range-thumb-bg-alt);
+    border: $form-range-thumb-border-alt;
+    @include box-shadow($form-range-thumb-box-shadow-alt);
+
+    &:active {
+      @include gradient-bg($form-range-thumb-active-bg-alt);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    // color: transparent; // Why?
+    background-color: $form-range-track-bg-alt;
+    // border-color: transparent;
+    @include box-shadow($form-range-track-box-shadow-alt);
+  }
+
+  &::-moz-range-thumb {
+    @include gradient-bg($form-range-thumb-bg-alt);
+    border: $form-range-thumb-border-alt;
+    @include box-shadow($form-range-thumb-box-shadow-alt);
+
+    &:active {
+      @include gradient-bg($form-range-thumb-active-bg-alt);
+    }
+  }
+
+  &::-moz-range-track {
+    // color: transparent;
+    background-color: $form-range-track-bg-alt;
+    // border-color: transparent; // Firefox specific?
+    @include box-shadow($form-range-track-box-shadow-alt);
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    &::-webkit-slider-thumb {
+      background-color: $form-range-thumb-disabled-bg-alt;
+    }
+
+    &::-moz-range-thumb {
+      background-color: $form-range-thumb-disabled-bg-alt;
+    }
+  }
+}
--- a/scss/dark/bootstrap/forms/_form-select.scss
+++ b/scss/dark/bootstrap/forms/_form-select.scss
@@ -0,0 +1,35 @@
+// Select
+
+.form-select {
+  color: $form-select-color-alt;
+  background-color: $form-select-bg-alt;
+  background-image: escape-svg($form-select-indicator-alt);
+  border: $form-select-border-width solid $form-select-border-color-alt;
+  @include box-shadow($form-select-box-shadow-alt);
+
+  &:focus {
+    border-color: $form-select-focus-border-color-alt;
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow-alt, $form-select-focus-box-shadow-alt);
+    } @else {
+      box-shadow: $form-select-focus-box-shadow-alt;
+    }
+  }
+
+  &[multiple],
+  &[size]:not([size="1"]) {
+    background-image: none;
+  }
+
+  &:disabled {
+    color: $form-select-disabled-color-alt;
+    background-color: $form-select-disabled-bg-alt;
+    border-color: $form-select-disabled-border-color-alt;
+  }
+
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $form-select-color-alt;
+  }
+}
--- a/scss/dark/bootstrap/forms/_form-text.scss
+++ b/scss/dark/bootstrap/forms/_form-text.scss
@@ -0,0 +1,5 @@
+// Form text
+
+.form-text {
+  color: $form-text-color-alt;
+}
--- a/scss/dark/bootstrap/forms/_input-group.scss
+++ b/scss/dark/bootstrap/forms/_input-group.scss
@@ -0,0 +1,16 @@
+// Textual addons
+
+.input-group-text {
+  color: $input-group-addon-color-alt;
+  background-color: $input-group-addon-bg-alt;
+  border: $input-border-width solid $input-group-addon-border-color-alt;
+}
+
+// Rounded corners
+
+.input-group {
+  $validation-messages: "";
+  @each $state in map-keys($form-validation-states-alt) {
+    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+  }
+}  // WHAT DOES THIS DO???
--- a/scss/dark/bootstrap/forms/_labels.scss
+++ b/scss/dark/bootstrap/forms/_labels.scss
@@ -0,0 +1,9 @@
+// Labels
+
+.form-label {
+  color: $form-label-color-alt;
+}
+
+.col-form-label {
+  color: $form-label-color-alt;
+}
--- a/scss/dark/bootstrap/forms/_validation.scss
+++ b/scss/dark/bootstrap/forms/_validation.scss
@@ -0,0 +1,5 @@
+// Form validation
+
+@each $state, $data in $form-validation-states-alt {
+  @include form-validation-state-alt($state, $data...);
+}
--- a/scss/dark/bootstrap/helpers/_colored-links.scss
+++ b/scss/dark/bootstrap/helpers/_colored-links.scss
@@ -0,0 +1,12 @@
+@each $color, $value in $theme-colors-alt {
+  .link-#{$color} {
+    color: $value;
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        color: if(color-contrast($value, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt) == $color-contrast-light-alt, shade-color($value, $link-shade-percentage-alt), tint-color($value, $link-shade-percentage-alt));
+      }
+    }
+  }
+}
--- a/scss/dark/bootstrap/mixins/_buttons.scss
+++ b/scss/dark/bootstrap/mixins/_buttons.scss
@@ -0,0 +1,119 @@
+// Button variants
+
+@mixin button-variant-alt(
+  $background,
+  $border,
+  $color: color-contrast($background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
+  $hover-background: if($color == $color-contrast-light-alt, shade-color($background, $btn-hover-bg-shade-amount-alt), tint-color($background, $btn-hover-bg-tint-amount-alt)),
+  $hover-border: if($color == $color-contrast-light-alt, shade-color($border, $btn-hover-border-shade-amount-alt), tint-color($border, $btn-hover-border-tint-amount-alt)),
+  $hover-color: color-contrast($hover-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
+  $active-background: if($color == $color-contrast-light-alt, shade-color($background, $btn-active-bg-shade-amount-alt), tint-color($background, $btn-active-bg-tint-amount-alt)),
+  $active-border: if($color == $color-contrast-light-alt, shade-color($border, $btn-active-border-shade-amount-alt), tint-color($border, $btn-active-border-tint-amount-alt)),
+  $active-color: color-contrast($active-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
+  $btn-box-shadow: $btn-box-shadow-alt
+) {
+  color: $color;
+  @include gradient-bg($background);
+  border-color: $border;
+  @include box-shadow($btn-box-shadow);
+
+  &:hover {
+    color: $hover-color;
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
+  }
+
+  .btn-check:focus + &,
+  &:focus {
+    color: $hover-color;
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
+    @if $enable-shadows {
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+    }
+  }
+
+  .btn-check:checked + &,
+  .btn-check:active + &,
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    color: $active-color;
+    background-color: $active-background;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: $active-border;
+
+    &:focus {
+      @if $enable-shadows {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+      }
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $disabled-color;
+    background-color: $disabled-background;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: $disabled-border;
+  }
+}
+
+@mixin button-outline-variant-alt(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background),
+  $btn-active-box-shadow: $btn-active-box-shadow-alt
+) {
+  color: $color;
+  border-color: $color;
+
+  &:hover {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  .btn-check:focus + &,
+  &:focus {
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+  }
+
+  .btn-check:checked + &,
+  .btn-check:active + &,
+  &:active,
+  &.active,
+  &.dropdown-toggle.show {
+    color: $active-color;
+    background-color: $active-background;
+    border-color: $active-border;
+
+    &:focus {
+      @if $enable-shadows {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+      }
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $color;
+    background-color: transparent;
+  }
+}
--- a/scss/dark/bootstrap/mixins/_color-scheme.scss
+++ b/scss/dark/bootstrap/mixins/_color-scheme.scss
@@ -0,0 +1,45 @@
+// scss-docs-start mixin-color-scheme
+@mixin color-scheme-alt($scheme: light) {
+  @if $scheme == dark {
+    @media (prefers-color-scheme: dark) {
+      @content;
+    }
+  } @else if $scheme == light {
+    @media (prefers-color-scheme: light) {
+      @content;
+    }
+  } @else {
+    // assume what gets passed here is not light or dark, thus is a CSS element,
+    // e.g. "html.dark", or "[data-theme-dark]"
+    #{$scheme} {
+      @content;
+    }
+  }
+}
+// scss-docs-end mixin-color-scheme
+
+@mixin color-scheme-property($scheme: light, $dual: false) {
+  @if $dual {
+    @if $scheme == dark {
+      color-scheme: dark light;
+    } @else if $scheme == light {
+      color-scheme: light dark;
+    }  // else ignore
+  } @else {
+    @if $scheme == dark {
+      color-scheme: dark;
+    } @else if $scheme == light {
+      color-scheme: light;
+    }  // else ignore
+  }
+}
+
+@function alternative-color-scheme($scheme: light) {
+  @if $scheme == dark {
+    @return light;
+  } @else if $scheme == light {
+    @return dark;
+  } @else {
+    @return $scheme;
+  }
+}
--- a/scss/dark/bootstrap/mixins/_forms.scss
+++ b/scss/dark/bootstrap/mixins/_forms.scss
@@ -0,0 +1,74 @@
+
+@mixin form-validation-state-alt(
+  $state,
+  $color,
+  $icon,
+  $tooltip-color: color-contrast($color, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt),
+  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity-alt),
+  $focus-box-shadow: 0 0 $input-btn-focus-blur-alt $input-focus-width rgba($color, $input-btn-focus-color-opacity-alt)
+) {
+  .#{$state}-feedback {
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    color: $tooltip-color;
+    background-color: $tooltip-bg-color;
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        background-image: escape-svg($icon);
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: $focus-box-shadow;
+      }
+    }
+  }
+
+  .form-select {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        &:not([multiple]):not([size]),
+        &:not([multiple])[size="1"] {
+          background-image: escape-svg($form-select-indicator-alt), escape-svg($icon);
+        }
+
+        &[multiple],
+        &[size]:not([size="1"]) {
+          background-image: escape-svg($icon);
+        }
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: $focus-box-shadow;
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      &:checked {
+        background-color: $color;
+      }
+
+      &:focus {
+        box-shadow: $focus-box-shadow;
+      }
+
+      ~ .form-check-label {
+        color: $color;
+      }
+    }
+  }
+}
--- a/scss/dark/bootstrap/mixins/_table-variants.scss
+++ b/scss/dark/bootstrap/mixins/_table-variants.scss
@@ -0,0 +1,19 @@
+@mixin table-variant-alt($state, $background) {
+  .table-#{$state} {
+    $color: color-contrast(opaque($body-bg-alt, $background));
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor-alt));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor-alt));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor-alt));
+
+    --#{$variable-prefix}table-bg: #{$background};
+    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
+    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$variable-prefix}table-active-bg: #{$active-bg};
+    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
+    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+    color: $color;
+    border-color: mix($color, $background, percentage($table-border-factor-alt));
+  }
+}
--- a/scss/dark/bootstrap/utilities/_api-all.scss
+++ b/scss/dark/bootstrap/utilities/_api-all.scss
@@ -0,0 +1,7 @@
+@use "sass:map";
+
+@each $color-scheme in $color-schemes {
+  @include color-scheme-alt($color-scheme) {
+    @include generate-utility(map-get($utilities, "display"), "-#{$color-scheme}");
+  }
+}
--- a/scss/dark/bootstrap/utilities/_api.scss
+++ b/scss/dark/bootstrap/utilities/_api.scss
@@ -0,0 +1,17 @@
+// Loop over each breakpoint
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+  // Generate media query if needed
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    // Loop over each utility property
+    @each $key, $utility in $utilities-alt {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Only proceed if responsive media queries are enabled or if it's the base media query
+      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+        @include generate-utility($utility, $infix);
+      }
+    }
+  }
+}