dark mode with bootstrap complete components

Used https://github.com/vinorodrigues/bootstrap-dark-5/releases/tag/v1.0.0

build/.eslintrc.json

@@ -6,7 +6,7 @@
   "parserOptions": {
     "sourceType": "script"
   },
-  "extends": "../../.eslintrc.json",
+  "extends": "../.eslintrc.json",
   "rules": {
     "no-console": "off",
     "strict": "error",

package.json

@@ -7,19 +7,22 @@
   "main": "dist/js/adminlte.min.js",
   "scripts": {
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css-all": "npm-run-all --parallel css css-splits",
+    "css-all": "npm-run-all css css-splits",
     "css-splits": "npm-run-all css-compile-splits css-prefix-splits css-rtl-splits css-minify-splits",
     "css": "npm-run-all css-compile css-prefix css-minify",
     "css-compile-bash": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css",
     "css-compile": "npm run css-compile-bash -- scss/adminlte.scss:dist/css/adminlte.css",
-    "css-compile-splits": "npm run css-compile-bash -- scss/parts/:dist/css/alt/",
+    "css-compile-splits": "npm-run-all --parallel css-compile-dark-splits",
+    "css-compile-dark-splits": "npm run css-compile-bash -- scss/dark/:dist/css/dark/",
     "css-prefix-bash": "postcss --config build/postcss.config.js --replace",
-    "css-prefix": "npm run css-prefix-bash -- \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/alt/*.css\"",
-    "css-prefix-splits": "npm run css-prefix-bash -- \"dist/css/alt/*.css\" \"!dist/css/alt/*.min.css\" \"!dist/css/alt/*.rtl.css\"",
-    "css-rtl-splits": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --replace \"dist/css/alt/*.rtl.css\" \"!dist/css/alt/*.min.css\"",
+    "css-prefix": "npm run css-prefix-bash -- \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/dark/*.css\" \"!dist/css/rtl/*.css\"",
+    "css-prefix-splits": "npm run css-prefix-bash -- \"dist/css/**/*.css\" \"!dist/css/rtl/*.css\" \"!dist/css/**/*.min.css\"",
+    "css-rtl-splits": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"dist/css/rtl\" --ext \".rtl.css\" \"dist/css/*.css\" \"dist/css/**/*.css\" \"!dist/css/**/*.rtl.css\" \"!dist/css/*.min.css\" \"!dist/css/**/*.min.css\"",
     "css-minify-bash": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output ",
     "css-minify": "npm run css-minify-bash -- dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"",
-    "css-minify-splits": "npm run css-minify-bash -- dist/css/alt/ --batch --batch-suffix \".min\" \"dist/css/alt/*.css\" \"!dist/css/alt/*.min.css\"",
+    "css-minify-splits": "npm-run-all --parallel css-minify-split:dark css-minify-split:rtl",
+    "css-minify-split:dark": "npm run css-minify-bash -- dist/css/dark/ --batch --batch-suffix \".min\" \"dist/css/dark/*.css\" \"!dist/css/dark/*.min.css\"",
+    "css-minify-split:rtl": "npm run css-minify-bash -- dist/css/rtl/ --batch --batch-suffix \".min\" \"dist/css/rtl/*.css\" \"!dist/css/rtl/*.min.css\"",
     "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
     "dev": "npm-run-all --parallel watch sync",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",

scss/_bootstrap-dark.scss

@@ -0,0 +1,44 @@
+/*
+ * ---------- Dark Mode ------------------------------------------------------
+ */
+
+// Layout & components
+@import "dark/bootstrap/root";
+@import "dark/bootstrap/reboot";
+@import "dark/bootstrap/type";
+@import "dark/bootstrap/images";
+// no colors in containers
+// no colors in grid
+@import "dark/bootstrap/tables";
+@import "dark/bootstrap/forms";
+@import "dark/bootstrap/buttons";
+// no colors in transitions
+@import "dark/bootstrap/dropdown";
+@import "dark/bootstrap/button-group";
+@import "dark/bootstrap/nav";
+@import "dark/bootstrap/navbar";
+@import "dark/bootstrap/card";
+@import "dark/bootstrap/accordion";
+@import "dark/bootstrap/breadcrumb";
+@import "dark/bootstrap/pagination";
+@import "dark/bootstrap/badge";
+@import "dark/bootstrap/alert";
+@import "dark/bootstrap/progress";
+@import "dark/bootstrap/list-group";
+@import "dark/bootstrap/close";
+@import "dark/bootstrap/toasts";
+@import "dark/bootstrap/modal";
+@import "dark/bootstrap/tooltip";
+@import "dark/bootstrap/popover";
+@import "dark/bootstrap/carousel";
+// no colors in spinners
+@import "dark/bootstrap/offcanvas";
+
+// Helpers
+@import "dark/bootstrap/helpers";
+
+// Utilities
+@import "dark/bootstrap/utilities/api";
+
+// Unique to dark-mode
+@import "dark/bootstrap/dark";

scss/_bootstrap-variables-alt.scss

@@ -1,87 +0,0 @@
-//
-// Color system (PCS - prefers-color-scheme)
-//
-
-$white-alt:    $white !default;
-$gray-100-alt: $gray-100 !default;
-$gray-200-alt: $gray-200 !default;
-$gray-300-alt: $gray-300 !default;
-$gray-400-alt: $gray-400 !default;
-$gray-500-alt: $gray-500 !default;
-$gray-600-alt: $gray-600 !default;
-$gray-700-alt: $gray-700 !default;
-$gray-800-alt: $gray-800 !default;
-$gray-900-alt: $gray-900 !default;
-$black-alt:    $black !default;
-
-// stylelint-disable
-$grays-alt: () !default;
-$grays-alt: map-merge((
-  "100": $gray-100-alt,
-  "200": $gray-200-alt,
-  "300": $gray-300-alt,
-  "400": $gray-400-alt,
-  "500": $gray-500-alt,
-  "600": $gray-600-alt,
-  "700": $gray-700-alt,
-  "800": $gray-800-alt,
-  "900": $gray-900-alt
-), $grays-alt);
-// stylelint-enable
-
-$blue-alt:    #0d6efd !default;
-$indigo-alt:  #6610f2 !default;
-$purple-alt:  #6f42c1 !default;
-$pink-alt:    #d63384 !default;
-$red-alt:     #dc3545 !default;
-$orange-alt:  #fd7e14 !default;
-$yellow-alt:  #ffc107 !default;
-$green-alt:   #198754 !default;
-$teal-alt:    #20c997 !default;
-$cyan-alt:    #0dcaf0 !default;
-
-// stylelint-disable
-$colors-alt: () !default;
-$colors-alt: map-merge((
-  "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,
-  "white":      $white-alt,
-  "gray":       $gray-600-alt,
-  "gray-dark":  $gray-800-alt
-), $colors-alt);
-// stylelint-enable
-
-// Color scheme
-
-$primary-alt:       $blue-alt !default;
-$secondary-alt:     $gray-600-alt !default;
-$success-alt:       $green-alt !default;
-$info-alt:          $cyan-alt !default;
-$warning-alt:       $yellow-alt !default;
-$danger-alt:        $red-alt !default;
-$light-alt:         $gray-100-alt !default;
-$dark-alt:          $gray-800-alt !default;
-
-// stylelint-disable
-$theme-colors-alt: () !default;
-$theme-colors-alt: map-merge((
-  "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-alt);
-// stylelint-enable
-
-//

scss/_bootstrap-variables.scss

@@ -1,136 +0,0 @@
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-//
-// Color system
-//
-
-$white:    #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black:    #000 !default;
-
-// stylelint-disable
-$grays: () !default;
-$grays: map-merge((
-  "100": $gray-100,
-  "200": $gray-200,
-  "300": $gray-300,
-  "400": $gray-400,
-  "500": $gray-500,
-  "600": $gray-600,
-  "700": $gray-700,
-  "800": $gray-800,
-  "900": $gray-900
-), $grays);
-// stylelint-enable
-
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-
-// stylelint-disable
-$colors: () !default;
-$colors: map-merge((
-  "blue":       $blue,
-  "indigo":     $indigo,
-  "purple":     $purple,
-  "pink":       $pink,
-  "red":        $red,
-  "orange":     $orange,
-  "yellow":     $yellow,
-  "green":      $green,
-  "teal":       $teal,
-  "cyan":       $cyan,
-  "white":      $white,
-  "gray":       $gray-600,
-  "gray-dark":  $gray-800
-), $colors);
-// stylelint-enable
-
-// Color scheme
-
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-800 !default;
-
-// stylelint-disable
-$theme-colors: () !default;
-$theme-colors: map-merge((
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark
-), $theme-colors);
-// stylelint-enable
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-$enable-caret:                true !default;
-$enable-rounded:              true !default;
-$enable-shadows:              true !default;
-$enable-gradients:            false !default;
-$enable-transitions:          true !default;
-$enable-reduced-motion:       true !default;
-$enable-smooth-scroll:        true !default;
-$enable-grid-classes:         true !default;
-$enable-button-pointers:      true !default;
-$enable-rfs:                  true !default;
-$enable-validation-icons:     true !default;
-$enable-negative-margins:     false !default;
-$enable-deprecation-messages: true !default;
-$enable-important-utilities:  true !default;
-
-// Prefix for :root CSS variables
-
-$variable-prefix:             bs- !default;
-
-// Body
-//
-// Settings for the `<body>` element.
-
-$body-bg:                     $white !default;
-$body-color:                  $gray-900 !default;
-$body-text-align:             null !default;
-
-// Links
-//
-// Style anchor elements.
-
-$link-color:                              $primary !default;
-$link-decoration:                         none !default;
-$link-shade-percentage:                   20% !default;
-$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
-$link-hover-decoration:                   null !default;
-
-$stretched-link-pseudo-element:           after !default;
-$stretched-link-z-index:                  1 !default;
-
-//

scss/_utilities.scss

@@ -18,5 +18,3 @@ $utilities: (
     )
   )
 );
-
-//

scss/_custom-variables.scss

@@ -0,0 +1,124 @@
+// Variables for AdminLTE
+
+// LAYOUT
+// --------------------------------------------------------
+
+$font-size-root:              1rem !default;
+
+// TRANSITIONS SETTINGS
+// --------------------------------------------------------
+
+// Transition global options
+$transition-speed:            .3s !default;
+$transition-fn:               ease-in-out !default;
+
+// Sidebar
+// --------------------------------------------------------
+$sidebar-width:               250px !default;
+$sidebar-padding-x:           .5rem !default;
+$sidebar-padding-y:           .5rem !default;
+$sidebar-custom-height:       4rem !default;
+$sidebar-custom-height-lg:    6rem !default;
+$sidebar-custom-height-xl:    8rem !default;
+$sidebar-custom-padding-x:    .85rem !default;
+$sidebar-custom-padding-y:    .5rem !default;
+$sidebar-transition:          min-width $transition-speed $transition-fn,
+  max-width $transition-speed $transition-fn,
+  margin-top $transition-speed $transition-fn,
+  margin-left $transition-speed $transition-fn,
+  margin-right $transition-speed $transition-fn,
+  transform $transition-speed $transition-fn;
+
+// SIDEBAR SKINS
+// --------------------------------------------------------
+
+// Dark sidebar
+$sidebar-dark-bg:                     $dark !default;
+$sidebar-dark-hover-bg:             rgba(255, 255, 255, .1) !default;
+$sidebar-dark-color:                #c2c7d0 !default;
+$sidebar-dark-hover-color:            $white !default;
+$sidebar-dark-active-color:           $white !default;
+$sidebar-dark-submenu-bg:             transparent !default;
+$sidebar-dark-submenu-color:        #c2c7d0 !default;
+$sidebar-dark-submenu-hover-color:    $white !default;
+$sidebar-dark-submenu-hover-bg:       $sidebar-dark-hover-bg !default;
+$sidebar-dark-submenu-active-color:   $sidebar-dark-bg !default;
+$sidebar-dark-submenu-active-bg:    rgba(255, 255, 255, .9) !default;
+
+// Light sidebar
+$sidebar-light-bg:                     $white !default;
+$sidebar-light-hover-bg:               rgba($black, .1) !default;
+$sidebar-light-color:                  $gray-800 !default;
+$sidebar-light-hover-color:            $gray-900 !default;
+$sidebar-light-active-color:           $black !default;
+$sidebar-light-submenu-bg:             transparent !default;
+$sidebar-light-submenu-color:        #777 !default;
+$sidebar-light-submenu-hover-color:    $black !default;
+$sidebar-light-submenu-hover-bg:       $sidebar-light-hover-bg !default;
+$sidebar-light-submenu-active-color:   $sidebar-light-hover-color !default;
+$sidebar-light-submenu-active-bg:      $sidebar-light-submenu-hover-bg !default;
+
+// SIDEBAR MINI
+// --------------------------------------------------------
+$sidebar-mini-width:          ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
+$sidebar-nav-icon-width:      $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
+$sidebar-user-image-width:    $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
+
+// SIDEBAR HORIZONTAL
+// --------------------------------------------------------
+$sidebar-horizontal-width:    100%;
+$sidebar-horizontal-height:   80px !default;
+
+// CONTROL SIDEBAR
+// --------------------------------------------------------
+$control-sidebar-width:       $sidebar-width !default;
+
+// MAIN HEADER
+// --------------------------------------------------------
+$main-header-bottom-border-width:  $border-width !default;
+$main-header-bottom-border-color:  $gray-300 !default;
+$main-header-bottom-border:        $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
+$main-header-link-padding-y:       $navbar-padding-y !default;
+$main-header-height-inner:         ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
+$main-header-height:               add($main-header-height-inner, $main-header-bottom-border-width) !default;
+$nav-link-sm-padding-y:            .35rem !default;
+$nav-link-sm-height:               ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
+$main-header-height-sm-inner:      ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
+$main-header-height-sm:            add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
+
+// MAIN FOOTER
+// --------------------------------------------------------
+$main-footer-padding:           1rem !default;
+$main-footer-padding-sm:        $main-footer-padding * .812 !default;
+$main-footer-border-top-width:  1px !default;
+$main-footer-border-top-color:  $gray-300 !default;
+$main-footer-border-top:        $main-footer-border-top-width solid $main-footer-border-top-color !default;
+$main-footer-height-inner:      (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
+$main-footer-height:            add($main-footer-height-inner, $main-footer-border-top-width) !default;
+$main-footer-height-sm-inner:   (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
+$main-footer-height-sm:         add($main-footer-height-sm-inner, $main-footer-border-top-width) !default;
+$main-footer-bg:                $white !default;
+$main-footer-color:             tint-color($gray-700, 25%) !default;
+
+// BRAND LINK
+// --------------------------------------------------------
+$brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y;
+$brand-link-border-buttom:    1px;
+
+// Z-INDEX
+// --------------------------------------------------------
+$zindex-main-header:          $zindex-fixed + 4 !default;
+$zindex-sidebar:              $zindex-fixed + 8 !default;
+$zindex-main-footer:          $zindex-fixed + 2 !default;
+$zindex-sidebar-horizontal:   $zindex-main-header - 2 !default;
+$zindex-control-sidebar:      $zindex-fixed + 1 !default;
+$zindex-toasts:               $zindex-sidebar + 2 !default;
+$zindex-content-wrapper:      $zindex-sidebar - 2 !default;
+$zindex-preloader:            $zindex-toasts + 2 !default;
+
+// Body background (Affects main content background only)
+$main-bg:                   #f4f6f9 !default;
+$main-color:                  $black !default;
+
+// Dark mode
+$enable-dark-mode:            false !default;

scss/_layout-dark.scss

@@ -0,0 +1,3 @@
+@import "dark/layout/main-header";
+@import "dark/layout/content-wrapper";
+@import "dark/layout/main-footer";

scss/_layout.scss

@@ -9,5 +9,3 @@
 @import "layout/content-wrapper";
 @import "layout/main-footer";
 @import "layout/layout-fixed";
-
-//

scss/_mixins.scss

@@ -3,9 +3,6 @@
 //
 
 @import "mixins/animations";
-@import "mixins/dark-mode";
 @import "mixins/scrollbar";
 @import "mixins/sidebar-theme";
 @import "mixins/miscellaneous";
-
-//

scss/_variables.scss

@@ -1,126 +1,134 @@
-// Variables for AdminLTE
-
-// LAYOUT
-// --------------------------------------------------------
-
-$font-size-root:              1rem !default;
-
-// TRANSITIONS SETTINGS
-// --------------------------------------------------------
-
-// Transition global options
-$transition-speed:            .3s !default;
-$transition-fn:               ease-in-out !default;
-
-// Sidebar
-// --------------------------------------------------------
-$sidebar-width:               250px !default;
-$sidebar-padding-x:           .5rem !default;
-$sidebar-padding-y:           .5rem !default;
-$sidebar-custom-height:       4rem !default;
-$sidebar-custom-height-lg:    6rem !default;
-$sidebar-custom-height-xl:    8rem !default;
-$sidebar-custom-padding-x:    .85rem !default;
-$sidebar-custom-padding-y:    .5rem !default;
-$sidebar-transition:          min-width $transition-speed $transition-fn,
-  max-width $transition-speed $transition-fn,
-  margin-top $transition-speed $transition-fn,
-  margin-left $transition-speed $transition-fn,
-  margin-right $transition-speed $transition-fn,
-  transform $transition-speed $transition-fn;
-
-// SIDEBAR SKINS
-// --------------------------------------------------------
-
-// Dark sidebar
-$sidebar-dark-bg:                     $dark !default;
-$sidebar-dark-hover-bg:             rgba(255, 255, 255, .1) !default;
-$sidebar-dark-color:                #c2c7d0 !default;
-$sidebar-dark-hover-color:            $white !default;
-$sidebar-dark-active-color:           $white !default;
-$sidebar-dark-submenu-bg:             transparent !default;
-$sidebar-dark-submenu-color:        #c2c7d0 !default;
-$sidebar-dark-submenu-hover-color:    $white !default;
-$sidebar-dark-submenu-hover-bg:       $sidebar-dark-hover-bg !default;
-$sidebar-dark-submenu-active-color:   $sidebar-dark-bg !default;
-$sidebar-dark-submenu-active-bg:    rgba(255, 255, 255, .9) !default;
-
-// Light sidebar
-$sidebar-light-bg:                     $white !default;
-$sidebar-light-hover-bg:               rgba($black, .1) !default;
-$sidebar-light-color:                  $gray-800 !default;
-$sidebar-light-hover-color:            $gray-900 !default;
-$sidebar-light-active-color:           $black !default;
-$sidebar-light-submenu-bg:             transparent !default;
-$sidebar-light-submenu-color:        #777 !default;
-$sidebar-light-submenu-hover-color:    $black !default;
-$sidebar-light-submenu-hover-bg:       $sidebar-light-hover-bg !default;
-$sidebar-light-submenu-active-color:   $sidebar-light-hover-color !default;
-$sidebar-light-submenu-active-bg:      $sidebar-light-submenu-hover-bg !default;
-
-// SIDEBAR MINI
-// --------------------------------------------------------
-$sidebar-mini-width:          ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
-$sidebar-nav-icon-width:      $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
-$sidebar-user-image-width:    $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
-
-// SIDEBAR HORIZONTAL
-// --------------------------------------------------------
-$sidebar-horizontal-width:    100%;
-$sidebar-horizontal-height:   80px !default;
-
-// CONTROL SIDEBAR
-// --------------------------------------------------------
-$control-sidebar-width:       $sidebar-width !default;
-
-// MAIN HEADER
-// --------------------------------------------------------
-$main-header-bottom-border-width:  $border-width !default;
-$main-header-bottom-border-color:  $gray-300 !default;
-$main-header-bottom-border:        $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
-$main-header-link-padding-y:       $navbar-padding-y !default;
-$main-header-height-inner:         ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
-$main-header-height:               add($main-header-height-inner, $main-header-bottom-border-width) !default;
-$nav-link-sm-padding-y:            .35rem !default;
-$nav-link-sm-height:               ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
-$main-header-height-sm-inner:      ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
-$main-header-height-sm:            add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
-
-// MAIN FOOTER
-// --------------------------------------------------------
-$main-footer-padding:           1rem !default;
-$main-footer-padding-sm:        $main-footer-padding * .812 !default;
-$main-footer-border-top-width:  1px !default;
-$main-footer-border-top-color:  $gray-300 !default;
-$main-footer-border-top:        $main-footer-border-top-width solid $main-footer-border-top-color !default;
-$main-footer-height-inner:      (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
-$main-footer-height:            add($main-footer-height-inner, $main-footer-border-top-width) !default;
-$main-footer-height-sm-inner:   (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
-$main-footer-height-sm:         add($main-footer-height-sm-inner, $main-footer-border-top-width) !default;
-$main-footer-bg:                $white !default;
-$main-footer-color:             tint-color($gray-700, 25%) !default;
-
-// BRAND LINK
-// --------------------------------------------------------
-$brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y;
-$brand-link-border-buttom:    1px;
-
-// Z-INDEX
-// --------------------------------------------------------
-$zindex-main-header:          $zindex-fixed + 4 !default;
-$zindex-sidebar:              $zindex-fixed + 8 !default;
-$zindex-main-footer:          $zindex-fixed + 2 !default;
-$zindex-sidebar-horizontal:   $zindex-main-header - 2 !default;
-$zindex-control-sidebar:      $zindex-fixed + 1 !default;
-$zindex-toasts:               $zindex-sidebar + 2 !default;
-$zindex-content-wrapper:      $zindex-sidebar - 2 !default;
-$zindex-preloader:            $zindex-toasts + 2 !default;
-
-// Body background (Affects main content background only)
-$main-bg:                   #f4f6f9 !default;
-$main-color:                  $black !default;
-
-// Dark mode
-$enable-dark-mode:            false !default;
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+// stylelint-disable
+$grays: () !default;
+$grays: map-merge((
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
+), $grays);
+// stylelint-enable
+
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+
+// stylelint-disable
+$colors: () !default;
+$colors: map-merge((
+  "blue":       $blue,
+  "indigo":     $indigo,
+  "purple":     $purple,
+  "pink":       $pink,
+  "red":        $red,
+  "orange":     $orange,
+  "yellow":     $yellow,
+  "green":      $green,
+  "teal":       $teal,
+  "cyan":       $cyan,
+  "white":      $white,
+  "gray":       $gray-600,
+  "gray-dark":  $gray-800
+), $colors);
+// stylelint-enable
+
+// Color scheme
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+// stylelint-disable
+$theme-colors: () !default;
+$theme-colors: map-merge((
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
+), $theme-colors);
+// stylelint-enable
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret:                true !default;
+$enable-rounded:              true !default;
+$enable-shadows:              true !default;
+$enable-gradients:            false !default;
+$enable-transitions:          true !default;
+$enable-reduced-motion:       true !default;
+$enable-smooth-scroll:        true !default;
+$enable-grid-classes:         true !default;
+$enable-button-pointers:      true !default;
+$enable-rfs:                  true !default;
+$enable-validation-icons:     true !default;
+$enable-negative-margins:     false !default;
+$enable-deprecation-messages: true !default;
+$enable-important-utilities:  true !default;
+
+// Prefix for :root CSS variables
+
+$variable-prefix:             bs- !default;
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                     $white !default;
+$body-color:                  $gray-900 !default;
+$body-text-align:             null !default;
 
+// Links
 //
+// Style anchor elements.
+
+$link-color:                              $primary !default;
+$link-decoration:                         none !default;
+$link-shade-percentage:                   20% !default;
+$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration:                   null !default;
+
+$stretched-link-pseudo-element:           after !default;
+$stretched-link-z-index:                  1 !default;

scss/adminlte.scss

@@ -8,17 +8,22 @@
 // Bootstrap
 // ---------------------------------------------------
 @import "bootstrap/scss/functions";
-@import "bootstrap-variables";
-@import "utilities";
+@import "variables"; // little modified are here
+@import "bootstrap/scss/variables";
+@import "dark/variables-alt";  // dark color set is here
+@import "bootstrap/scss/mixins";
+@import "dark/bootstrap/mixins";
+@import "custom-utilities";
+@import "bootstrap/scss/utilities";
+@import "dark/bootstrap/utilities";
+@import "dark/bootstrap/patch";  // missing from BS, unsupported patch/hack
+@import "dark/bootstrap/color-scheme";
 @import "bootstrap/scss/bootstrap";
 
 // Variables and Mixins
 // ---------------------------------------------------
-@import "bootstrap-variables-alt";
-@import "variables";
-@import "variables-alt";
+@import "custom-variables";
+@import "dark/custom-variables-alt"; // dark color set is here
 @import "mixins";
 
 @import "parts/core";
-
-//

scss/_variables-alt.scss

@@ -1,9 +1,7 @@
 // MAIN FOOTER
 // --------------------------------------------------------
-$main-footer-bg-alt:          $dark !default;
+$main-footer-bg-alt:          $dark-alt !default;
 
 // Body background (Affects main content background only)
 $main-bg-alt:                 tint-color($dark-alt, 7.5%) !default;
-$main-color-alt:              $white !default;
-
-//
+$main-color-alt:              $white-alt !default;

scss/dark/_variables-alt.scss

@@ -0,0 +1,666 @@
+// Alternate Variables (for use in Dark Mode variant)
+
+// Color system
+// ______________________________________
+
+$default-color-scheme: light !default;
+
+$color-schemes: (
+  light,
+  dark
+) !default;
+
+// items marked //** from https://bootswatch.com/darkly/
+// items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
+
+$white-alt:    $white !default;
+$gray-100-alt: $gray-100 !default;  //~~
+$gray-200-alt: $gray-200 !default;  //~~
+$gray-300-alt: $gray-300 !default;  //~~
+$gray-400-alt: $gray-400 !default;  //~~
+$gray-500-alt: $gray-500 !default;  //~~
+$gray-600-alt: $gray-600 !default;  //~~
+$gray-700-alt: $gray-700 !default;  //~~
+$gray-800-alt: $gray-800 !default;  //~~
+$gray-900-alt: $gray-900 !default;  //~~
+$black-alt:    $black !default;  //~~
+
+// fusv-disable
+$grays-alt: (
+  "100": $gray-100-alt,
+  "200": $gray-200-alt,
+  "300": $gray-300-alt,
+  "400": $gray-400-alt,
+  "500": $gray-500-alt,
+  "600": $gray-600-alt,
+  "700": $gray-700-alt,
+  "800": $gray-800-alt,
+  "900": $gray-900-alt
+) !default;
+// fusv-enable
+
+$blue-alt:    #375a7f !default;
+$indigo-alt:  #673ab7 !default;  //~~
+$purple-alt:  #654ea3 !default;  // Panatone CotY 2018
+$pink-alt:    #e83e8c !default;
+$red-alt:     #e74c3c !default;  //**
+$orange-alt:  #fd7e14 !default;
+$yellow-alt:  #f39c12 !default;  //**
+$green-alt:   #00bc8c !default;  //**
+$teal-alt:    #45b5aa !default;  // Panatone CotY 2010
+$cyan-alt:    #17a2b8 !default;
+
+$colors-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,
+  "white":      $white-alt,
+  "black":      $black-alt,
+  "gray":       #7e7e7e,  // $gray-600,
+  "gray-dark":  #121212  //$gray-800
+) !default;
+
+$primary-alt:       $blue-alt !default;
+$secondary-alt:     $gray-600-alt !default;
+$success-alt:       $green-alt !default;
+$info-alt:          $cyan-alt !default;
+$warning-alt:       $yellow-alt !default;
+$danger-alt:        $red-alt !default;
+$light-alt:         $gray-400-alt !default;
+$dark-alt:          $gray-800-alt !default;
+
+$theme-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
+) !default;
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio-alt:   2.5 !default;
+
+$color-contrast-dark-alt:      $black-alt !default;
+$color-contrast-light-alt:     $white-alt !default;
+
+
+// Gradient
+// ______________________________________
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+$gradient-alt: linear-gradient(180deg, rgba($black-alt, .15), rgba($black-alt, 0)) !default;
+
+
+// Body
+// ______________________________________
+// Settings for the `<body>` element.
+
+$body-bg-alt:                   $gray-900-alt !default;  // $white !default;
+$body-color-alt:                $gray-100-alt !default;  // $gray-900 !default;
+
+
+// Links
+// ______________________________________
+// Style anchor elements.
+
+$link-color-alt:                              shift-color($primary-alt, -15%) !default;
+$link-shade-percentage-alt:                   20% !default;  // TODO: should be -20%;
+$link-hover-color-alt:                        tint-color($link-color-alt, $link-shade-percentage-alt) !default;  // TODO: shift-color
+
+
+// Components
+// ______________________________________
+// Define common padding and border radius sizes and more.
+
+$border-color-alt:                $gray-700-alt !default;
+
+$box-shadow-alt:                  0 .5rem 1rem rgba($black-alt, .15) !default;
+$box-shadow-sm-alt:               0 .125rem .25rem rgba($black-alt, .075) !default;
+$box-shadow-lg-alt:               0 1rem 3rem rgba($black-alt, .175) !default;
+$box-shadow-inset-alt:            inset 0 1px 2px rgba($black-alt, .075) !default;
+
+$component-active-color-alt:      $white-alt !default;
+$component-active-bg-alt:         $primary-alt !default;
+
+
+// Typography
+// ______________________________________
+// Font, line-height, and color for body text, headings, and more.
+
+
+$headings-color-alt:              null !default;
+
+$text-muted-alt:                  $gray-400-alt !default;
+
+$blockquote-footer-color-alt:     $gray-600-alt !default;
+
+$hr-color-alt:                    $white-alt !default;
+$hr-opacity-alt:                  .1 !default;
+
+$mark-bg-alt:                     rgba($yellow-alt, .5) !default;
+
+
+// Tables
+// ______________________________________
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-color-alt:                 $body-color-alt !default;
+$table-bg-alt:                    transparent !default;
+
+$table-striped-color-alt:         $table-color-alt !default;
+$table-striped-bg-factor-alt:     .05 !default;
+$table-striped-bg-alt:            rgba($black-alt, $table-striped-bg-factor-alt) !default;
+
+$table-active-color-alt:          $table-color-alt !default;
+$table-active-bg-factor-alt:      .1 !default;
+$table-active-bg-alt:             rgba($black-alt, $table-active-bg-factor-alt) !default;
+
+$table-hover-color-alt:           $table-color-alt !default;
+$table-hover-bg-factor-alt:       .075 !default;
+$table-hover-bg-alt:              rgba($black-alt, $table-hover-bg-factor-alt) !default;
+
+$table-border-factor-alt:         .1 !default;
+$table-border-color-alt:          $border-color-alt !default;
+
+$table-group-separator-color-alt: currentColor !default;
+
+$table-caption-color-alt:         $text-muted-alt !default;
+
+$table-bg-scale-alt:              50% !default;
+
+$table-variants-alt: (
+  "primary":    shift-color($primary-alt, $table-bg-scale-alt),
+  "secondary":  shift-color($secondary-alt, $table-bg-scale-alt),
+  "success":    shift-color($success-alt, $table-bg-scale-alt),
+  "info":       shift-color($info-alt, $table-bg-scale-alt),
+  "warning":    shift-color($warning-alt, $table-bg-scale-alt),
+  "danger":     shift-color($danger-alt, $table-bg-scale-alt),
+  "light":      $light-alt,
+  "dark":       $dark-alt,
+) !default;
+
+
+// Buttons + Forms
+// ______________________________________
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-focus-color-opacity-alt: .25 !default;
+$input-btn-focus-color-alt:         rgba($component-active-bg-alt, $input-btn-focus-color-opacity-alt) !default;
+$input-btn-focus-blur-alt:          0 !default;
+$input-btn-focus-box-shadow-alt:    0 0 $input-btn-focus-blur-alt $input-btn-focus-width $input-btn-focus-color-alt !default;
+
+
+// Buttons
+// ______________________________________
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-box-shadow-alt:              inset 0 1px 0 rgba($white-alt, .15), 0 1px 1px rgba($black-alt, .075) !default;
+$btn-focus-box-shadow-alt:        $input-btn-focus-box-shadow-alt !default;
+$btn-disabled-opacity-alt:        .65 !default;
+$btn-active-box-shadow-alt:       inset 0 3px 5px rgba($black-alt, .125) !default;
+
+$btn-link-color-alt:              $link-color-alt !default;
+$btn-link-hover-color-alt:        $link-hover-color-alt !default;
+$btn-link-disabled-color-alt:     $gray-600-alt !default;
+
+$btn-hover-bg-shade-amount-alt:       15% !default;
+$btn-hover-bg-tint-amount-alt:        15% !default;
+$btn-hover-border-shade-amount-alt:   20% !default;
+$btn-hover-border-tint-amount-alt:    10% !default;
+$btn-active-bg-shade-amount-alt:      20% !default;
+$btn-active-bg-tint-amount-alt:       20% !default;
+$btn-active-border-shade-amount-alt:  25% !default;
+$btn-active-border-tint-amount-alt:   10% !default;
+
+
+// Forms
+// ______________________________________
+
+$form-text-color-alt:                       $text-muted-alt !default;
+
+$form-label-color-alt:                      null !default;
+
+$input-bg-alt:                              $gray-800-alt !default;
+$input-disabled-bg-alt:                     $gray-900-alt !default;
+$input-disabled-border-color-alt:           null !default;
+
+$input-color-alt:                           $gray-300-alt !default;
+$input-border-color-alt:                    $gray-700-alt !default;
+$input-box-shadow-alt:                      $box-shadow-inset-alt !default;
+
+$input-focus-bg-alt:                        $input-bg-alt !default;
+$input-focus-border-color-alt:              tint-color($component-active-bg-alt, 50%) !default;
+$input-focus-color-alt:                     $input-color-alt !default;
+$input-focus-box-shadow-alt:                $input-btn-focus-box-shadow-alt !default;
+
+$input-placeholder-color-alt:               mix($gray-600-alt, $gray-700-alt, 50%) !default;
+$input-plaintext-color-alt:                 $body-color-alt !default;
+
+$form-check-label-color-alt:                  null !default;
+
+$form-check-input-active-filter-alt:          brightness(90%) !default;  // TODO: test
+
+$form-check-input-bg-alt:                     $input-bg-alt !default;
+$form-check-input-border-alt:                 1px solid rgba($white, .25) !default;
+$form-check-input-focus-border-alt:           $input-focus-border-color-alt !default;
+$form-check-input-focus-box-shadow-alt:       $input-btn-focus-box-shadow-alt !default;
+
+$form-check-input-checked-color-alt:          $component-active-color-alt !default;
+$form-check-input-checked-bg-color-alt:       $component-active-bg-alt !default;
+$form-check-input-checked-border-color-alt:   $form-check-input-checked-bg-color-alt !default;
+$form-check-input-checked-bg-image-alt:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
+$form-check-radio-checked-bg-image-alt:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color-alt}'/></svg>") !default;
+
+$form-check-input-indeterminate-color-alt:          $component-active-color-alt !default;
+$form-check-input-indeterminate-bg-color-alt:       $component-active-bg-alt !default;
+$form-check-input-indeterminate-border-color-alt:   $form-check-input-indeterminate-bg-color-alt !default;
+$form-check-input-indeterminate-bg-image-alt:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
+
+$form-check-input-disabled-opacity-alt:        .5 !default;
+$form-check-label-disabled-opacity-alt:        $form-check-input-disabled-opacity-alt !default;
+$form-check-btn-check-disabled-opacity-alt:    $btn-disabled-opacity-alt !default;
+
+$form-switch-color-alt:               rgba(255, 255, 255, .25) !default;
+$form-switch-bg-image-alt:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-alt}'/></svg>") !default;
+
+$form-switch-focus-color-alt:         $input-focus-border-color-alt !default;
+$form-switch-focus-bg-image-alt:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color-alt}'/></svg>") !default;
+
+$form-switch-checked-color-alt:       $component-active-color-alt !default;
+$form-switch-checked-bg-image-alt:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color-alt}'/></svg>") !default;
+
+$input-group-addon-color-alt:               $input-color-alt !default;
+$input-group-addon-bg-alt:                  $gray-800-alt !default;
+$input-group-addon-border-color-alt:        $input-border-color-alt !default;
+
+$form-select-color-alt:                 $input-color-alt !default;
+$form-select-disabled-color-alt:        null !default;
+$form-select-bg-alt:                    $input-bg-alt !default;
+$form-select-disabled-bg-alt:           $gray-800-alt !default;
+$form-select-disabled-border-color-alt: $input-disabled-border-color-alt !default;
+$form-select-indicator-color-alt:       $gray-200-alt !default;
+$form-select-indicator-alt:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
+
+$form-select-border-color-alt:        $input-border-color-alt !default;
+$form-select-box-shadow-alt:          $box-shadow-inset-alt !default;
+
+$form-select-focus-border-color-alt:  $input-focus-border-color-alt !default;
+$form-select-focus-box-shadow-alt:    0 0 0 $form-select-focus-width $input-btn-focus-color-alt !default;
+
+$form-range-track-bg-alt:             $gray-700-alt !default;
+$form-range-track-box-shadow-alt:     $box-shadow-inset-alt !default;
+
+$form-range-thumb-bg-alt:                      $component-active-bg-alt !default;
+$form-range-thumb-border-alt:                  0 !default;
+$form-range-thumb-box-shadow-alt:              0 .1rem .25rem rgba($black-alt, .1) !default;
+$form-range-thumb-focus-box-shadow-alt:        0 0 0 1px $body-bg-alt, $input-focus-box-shadow-alt !default;
+$form-range-thumb-active-bg-alt:               tint-color($component-active-bg-alt, 70%) !default;
+$form-range-thumb-disabled-bg-alt:             $gray-500-alt !default;
+
+$form-file-button-color-alt:          $input-color-alt !default;
+$form-file-button-bg-alt:             $input-group-addon-bg-alt !default;
+$form-file-button-hover-bg-alt:       shade-color($form-file-button-bg-alt, 5%) !default;
+
+$form-floating-label-opacity-alt:     .65 !default;
+
+
+// Form validation
+// ______________________________________
+
+$form-feedback-valid-color-alt:         $success-alt !default;
+$form-feedback-invalid-color-alt:       $danger-alt !default;
+
+$form-feedback-icon-valid-color-alt:    $form-feedback-valid-color-alt !default;
+$form-feedback-icon-valid-alt:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color-alt}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-invalid-color-alt:  $form-feedback-invalid-color-alt !default;
+$form-feedback-icon-invalid-alt:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color-alt}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+
+$form-validation-states-alt: (
+  "valid": (
+    "color": $form-feedback-valid-color-alt,
+    "icon": $form-feedback-icon-valid-alt
+  ),
+  "invalid": (
+    "color": $form-feedback-invalid-color-alt,
+    "icon": $form-feedback-icon-invalid-alt
+  )
+) !default;
+
+
+// Navs
+// ______________________________________
+
+$nav-link-color-alt:                    $link-color-alt !default;
+$nav-link-hover-color-alt:              $link-hover-color-alt !default;
+$nav-link-disabled-color-alt:           $gray-400-alt !default;
+
+$nav-tabs-border-color-alt:             $gray-700-alt !default;
+$nav-tabs-link-hover-border-color-alt:  $gray-800-alt $gray-800-alt $nav-tabs-border-color-alt !default;
+$nav-tabs-link-active-color-alt:        $gray-300-alt !default;
+$nav-tabs-link-active-bg-alt:           $body-bg-alt !default;
+$nav-tabs-link-active-border-color-alt: $gray-700-alt $gray-700-alt $nav-tabs-link-active-bg-alt !default;
+
+$nav-pills-link-active-color-alt:       $component-active-color-alt !default;
+$nav-pills-link-active-bg-alt:          $component-active-bg-alt !default;
+
+
+// Navbar
+// ______________________________________  // TODO: revisit colors
+
+$navbar-dark-color-alt:                 rgba($white-alt, .55) !default;
+$navbar-dark-hover-color-alt:           rgba($white-alt, .75) !default;
+$navbar-dark-active-color-alt:          $white-alt !default;
+$navbar-dark-disabled-color-alt:        rgba($white-alt, .25) !default;
+$navbar-dark-toggler-icon-bg-alt:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color-alt}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-border-color-alt:  rgba($white-alt, .1) !default;
+
+$navbar-light-color-alt:                rgba($white-alt, .55) !default;
+$navbar-light-hover-color-alt:          rgba($white-alt, .7) !default;
+$navbar-light-active-color-alt:         rgba($white-alt, .9) !default;
+$navbar-light-disabled-color-alt:       rgba($white-alt, .3) !default;
+$navbar-light-toggler-icon-bg-alt:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color-alt}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color-alt: rgba($white-alt, .1) !default;
+
+$navbar-light-brand-color-alt:                $navbar-light-active-color-alt !default;
+$navbar-light-brand-hover-color-alt:          $navbar-light-active-color-alt !default;
+$navbar-dark-brand-color-alt:                 $navbar-dark-active-color-alt !default;
+$navbar-dark-brand-hover-color-alt:           $navbar-dark-active-color-alt !default;
+
+
+// Dropdowns
+// ______________________________________
+// Dropdown menu container and contents.
+
+$dropdown-color-alt:                    $body-color-alt !default;
+$dropdown-bg-alt:                       $black-alt !default;
+$dropdown-border-color-alt:             rgba($white-alt, .15) !default;
+$dropdown-divider-bg-alt:               $dropdown-border-color-alt !default;
+$dropdown-box-shadow-alt:               $box-shadow-alt !default;
+
+$dropdown-link-color-alt:               $gray-100 !default;
+$dropdown-link-hover-color-alt:         shade-color($gray-100, 10%) !default;
+$dropdown-link-hover-bg-alt:            $gray-800 !default;
+
+$dropdown-link-active-color-alt:        $component-active-color-alt !default;
+$dropdown-link-active-bg-alt:           $component-active-bg-alt !default;
+
+$dropdown-link-disabled-color-alt:      $gray-500-alt !default;
+
+$dropdown-header-color-alt:             $gray-400-alt !default;
+
+$dropdown-dark-color-alt:               $gray-700-alt !default;
+$dropdown-dark-bg-alt:                  $gray-200-alt !default;
+$dropdown-dark-border-color-alt:        $dropdown-border-color-alt !default;
+$dropdown-dark-divider-bg-alt:          $dropdown-divider-bg-alt !default;
+$dropdown-dark-box-shadow-alt:          null !default;
+$dropdown-dark-link-color-alt:          $dropdown-dark-color-alt !default;
+$dropdown-dark-link-hover-color-alt:    $black-alt !default;
+$dropdown-dark-link-hover-bg-alt:       rgba($black-alt, .15) !default;
+$dropdown-dark-link-active-color-alt:   $dropdown-link-active-color-alt !default;
+$dropdown-dark-link-active-bg-alt:      $dropdown-link-active-bg-alt !default;
+$dropdown-dark-link-disabled-color-alt: $gray-500-alt !default;
+$dropdown-dark-header-color-alt:        $gray-500-alt !default;
+
+
+// Pagination
+// ______________________________________
+
+$pagination-color-alt:                  $link-color-alt !default;
+$pagination-bg-alt:                     $gray-800-alt !default;
+$pagination-border-color-alt:           $gray-700-alt !default;
+
+$pagination-focus-color-alt:            $link-hover-color-alt !default;
+$pagination-focus-bg-alt:               $gray-800-alt !default;
+$pagination-focus-box-shadow-alt:       $input-btn-focus-box-shadow-alt !default;
+$pagination-focus-outline-alt:          0 !default;  // ???
+
+$pagination-hover-color-alt:            $link-hover-color-alt !default;
+$pagination-hover-bg-alt:               $gray-700-alt !default;
+$pagination-hover-border-color-alt:     mix($gray-700-alt, $gray-700-alt, 50%) !default;
+
+$pagination-active-color-alt:           $component-active-color-alt !default;
+$pagination-active-bg-alt:              $component-active-bg-alt !default;
+$pagination-active-border-color-alt:    $pagination-active-bg-alt !default;
+
+$pagination-disabled-color-alt:         mix($gray-600-alt, $gray-700-alt, 50%) !default;
+$pagination-disabled-bg-alt:            $gray-900-alt !default;
+$pagination-disabled-border-color-alt:  $gray-700-alt !default;
+
+
+// Cards
+// ______________________________________
+
+$card-border-color-alt: rgba($white-alt, .125) !default;
+$card-cap-bg-alt:       rgba($white-alt, .03) !default;
+$card-cap-color-alt:    null !default;
+$card-color-alt:        null !default;
+$card-bg-alt:           $gray-900-alt !default;
+
+
+// Accordion
+// ______________________________________
+
+$accordion-color-alt:                         $body-color-alt !default;
+$accordion-bg-alt:                            $body-bg-alt !default;
+$accordion-border-color-alt:                  rgba($white-alt, .125) !default;
+
+$accordion-button-color-alt:                  $accordion-color-alt !default;
+$accordion-button-bg-alt:                     $accordion-bg-alt !default;
+$accordion-button-active-bg-alt:              shade-color($component-active-bg-alt, 50%) !default;
+$accordion-button-active-color-alt:           tint-color($primary-alt, 40%) !default;
+
+$accordion-button-focus-border-color-alt:     $input-focus-border-color-alt !default;
+$accordion-button-focus-box-shadow-alt:       $btn-focus-box-shadow-alt !default;
+
+$accordion-icon-color-alt:                    $accordion-color-alt !default;
+$accordion-icon-active-color-alt:             $accordion-button-active-color-alt !default;
+
+$accordion-button-icon-alt:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-alt}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-alt:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-alt}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+
+
+// Tooltips
+// ______________________________________
+
+$tooltip-color-alt:                     $black-alt !default;
+$tooltip-bg-alt:                        $white-alt !default;
+$tooltip-opacity-alt:                   .9 !default;
+
+$tooltip-arrow-color-alt:               $tooltip-bg-alt !default;
+
+$form-feedback-tooltip-opacity-alt:       $tooltip-opacity-alt !default;
+
+
+// Popovers
+// ______________________________________
+
+$popover-bg-alt:                        $black-alt !default;
+$popover-border-color-alt:              rgba($white-alt, .2) !default;
+$popover-box-shadow-alt:                $box-shadow-alt !default;
+
+$popover-header-bg-alt:                 tint-color($popover-bg-alt, 6%) !default;
+$popover-header-color-alt:              $headings-color-alt !default;
+
+$popover-body-color-alt:                $body-color-alt !default;
+
+$popover-arrow-color-alt:               $popover-bg-alt !default;
+
+$popover-arrow-outer-color-alt:         fade-in($popover-border-color-alt, .05) !default;
+
+
+// Toasts
+// ______________________________________
+
+$toast-color-alt:                       null !default;
+$toast-background-color-alt:            rgba($black-alt, .85) !default;
+$toast-border-color-alt:                rgba(255, 255, 255, .1) !default;
+$toast-box-shadow-alt:                  $box-shadow-alt !default;
+
+$toast-header-color-alt:                $gray-400-alt !default;
+$toast-header-background-color-alt:     rgba($black-alt, .85) !default;
+$toast-header-border-color-alt:         rgba(255, 255, 255, .05) !default;
+
+
+// Badges
+// ______________________________________
+
+$badge-color-alt:                       $white-alt !default;
+
+
+// Modals
+// ______________________________________
+
+$modal-content-color-alt:               null !default;
+$modal-content-bg-alt:                  mix($gray-800-alt, $gray-900-alt, 50%) !default;
+$modal-content-border-color-alt:        rgba($white-alt, .2) !default;
+$modal-content-box-shadow-xs-alt:       $box-shadow-sm-alt !default;
+$modal-content-box-shadow-sm-up-alt:    $box-shadow-alt !default;
+
+$modal-backdrop-bg-alt:                 $black-alt !default;
+$modal-backdrop-opacity-alt:            .85 !default;
+$modal-header-border-color-alt:         $border-color-alt !default;
+$modal-footer-border-color-alt:         $modal-header-border-color-alt !default;
+
+
+// Alerts
+// ______________________________________
+// Define alert colors, border radius, and padding.
+
+$alert-bg-scale-alt:                    50% !default;
+$alert-border-scale-alt:                40% !default;
+$alert-color-scale-alt:                 -30% !default;
+
+
+// Progress bars
+// ______________________________________
+
+$progress-bg-alt:                       $gray-800-alt !default;
+$progress-box-shadow-alt:               $box-shadow-inset-alt !default;
+$progress-bar-color-alt:                $black-alt !default;
+$progress-bar-bg-alt:                   $primary-alt !default;
+
+
+// List group
+// ______________________________________
+
+$list-group-color-alt:                  $gray-100-alt !default;
+$list-group-bg-alt:                     $gray-900-alt !default;  // $white !default;
+$list-group-border-color-alt:           rgba($white-alt, .125) !default;
+
+$list-group-item-bg-scale-alt:          50% !default;
+$list-group-item-color-scale-alt:       -30% !default;
+
+$list-group-hover-bg-alt:               mix($gray-800-alt, $gray-900-alt, 50%) !default;
+$list-group-active-color-alt:           $component-active-color-alt !default;
+$list-group-active-bg-alt:              $component-active-bg-alt !default;
+$list-group-active-border-color-alt:    $list-group-active-bg-alt !default;
+
+$list-group-disabled-color-alt:         $gray-400-alt !default;
+$list-group-disabled-bg-alt:            $list-group-bg-alt !default;
+
+$list-group-action-color-alt:           $gray-300-alt !default;
+$list-group-action-hover-color-alt:     $list-group-action-color-alt !default;
+
+$list-group-action-active-color-alt:    $body-color-alt !default;
+$list-group-action-active-bg-alt:       $gray-800-alt !default;
+
+
+// Image thumbnails
+// ______________________________________
+
+$thumbnail-bg-alt:                      $body-bg-alt !default;
+$thumbnail-border-color-alt:            $gray-700-alt !default;
+$thumbnail-box-shadow-alt:              $box-shadow-sm-alt !default;
+
+
+// Figures
+// ______________________________________
+
+$figure-caption-color-alt:              $gray-400-alt !default;
+
+
+// Breadcrumbs
+// ______________________________________
+
+$breadcrumb-bg-alt:                     $gray-800-alt !default;  // null !default;
+$breadcrumb-divider-color-alt:          $gray-400-alt !default;
+$breadcrumb-active-color-alt:           $gray-400-alt !default;
+
+// Carousel
+// ______________________________________
+
+$carousel-control-color-alt:             $white-alt !default;
+$carousel-control-opacity-alt:           .5 !default;
+$carousel-control-hover-opacity-alt:     .9 !default;
+
+$carousel-indicator-opacity-alt:         .5 !default;
+$carousel-indicator-active-bg-alt:       $black-alt !default;
+$carousel-indicator-active-opacity-alt:  1 !default;
+
+$carousel-caption-color-alt:             $black-alt !default;
+
+$carousel-control-prev-icon-bg-alt:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color-alt}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
+$carousel-control-next-icon-bg-alt:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color-alt}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
+
+$carousel-dark-indicator-active-bg-alt:  $white-alt !default;
+$carousel-dark-caption-color-alt:        $white-alt !default;
+$carousel-dark-control-icon-filter-alt:  invert(1) grayscale(100) !default;
+
+
+// Spinners
+// ______________________________________
+
+// ...nada
+
+
+// Close
+// ______________________________________
+
+$btn-close-color-alt:            $white-alt !default;
+$btn-close-bg-alt:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-alt}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-focus-shadow-alt:     $input-btn-focus-box-shadow-alt !default;
+$btn-close-opacity-alt:          .5 !default;
+$btn-close-hover-opacity-alt:    .75 !default;
+$btn-close-focus-opacity-alt:    1 !default;
+$btn-close-disabled-opacity-alt: .25 !default;
+$btn-close-white-filter-alt:     invert(1) grayscale(100%) brightness(200%) !default;
+
+
+// Offcanvas
+// ______________________________________
+
+$offcanvas-border-color-alt:            $modal-content-border-color-alt !default;
+$offcanvas-bg-color-alt:                $modal-content-bg-alt !default;
+$offcanvas-color-alt:                   $modal-content-color-alt !default;
+$offcanvas-box-shadow-alt:              $modal-content-box-shadow-xs-alt !default;
+
+
+// Code
+// ______________________________________
+
+$code-color-alt:                        $teal-alt !default;
+
+$kbd-color-alt:                         $gray-100-alt !default;
+$kbd-bg-alt:                            $gray-800-alt !default;
+
+$pre-color-alt:                         $gray-100-alt !default;
+
+
+// Unique to Dark!!
+// **************************************
+// Text Selection
+// ______________________________________
+
+$selection-color-alt:                       $gray-200-alt !default;
+$selection-bg-alt:                          rgba($cyan-alt, .5) !default;

scss/dark/adminlte-dark.scss

@@ -0,0 +1,15 @@
+// Used https://github.com/vinorodrigues/bootstrap-dark-5/releases/tag/v1.0.0
+
+// Dark mode Enable using prefers-color-scheme
+$enable-dark-mode:            true;
+
+// AdminLTE
+// ---------------------------------------------------
+@import "../adminlte";
+// stylelint-disable no-invalid-position-at-import-rule
+@include color-scheme-alt(alternative-color-scheme($default-color-scheme)) {
+  @import "../parts/dark";
+}
+
+// Additional Global Utilities
+@import "../dark/bootstrap/utilities/api-all";

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; }
+  }
+}

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);
+  }
+}

scss/dark/bootstrap/_badge.scss

@@ -0,0 +1,7 @@
+// Base class
+
+.badge {
+  color: $badge-color-alt;
+  // THIS DOES NOTHING
+  // @include gradient-bg();
+}

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;
+  }
+}

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);
+  }
+}

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;
+  }
+}

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;
+    }
+  }
+}

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;
+  }
+}

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;
+}

scss/dark/bootstrap/_color-scheme.scss

@@ -0,0 +1,3 @@
+:root {
+  @include color-scheme-property($default-color-scheme, true);
+}

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;
+}

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;
+  }
+}

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";

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

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;
+}

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);
+}

scss/dark/bootstrap/_mixins.scss

@@ -0,0 +1,4 @@
+@import "mixins/color-scheme";
+@import "mixins/buttons";
+@import "mixins/forms";
+@import "mixins/table-variants";

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);
+  }
+}

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);
+  }
+}

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;
+    }
+  }
+}

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;
+}

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;
+  }
+}

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),
+        ),
+      ),
+    ),
+  )
+);

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;
+}

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();
+}

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;
+}

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};
+}

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);
+}

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;
+}

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;
+}

scss/dark/bootstrap/_type.scss

@@ -0,0 +1,7 @@
+//
+// Misc
+//
+
+.blockquote-footer {
+  color: $blockquote-footer-color-alt;
+}

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
+);

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)

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)

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)

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;
+    }
+  }
+}

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;
+    }
+  }
+}

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;
+}

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;
+    }
+  }
+}

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;
+  }
+}

scss/dark/bootstrap/forms/_form-text.scss

@@ -0,0 +1,5 @@
+// Form text
+
+.form-text {
+  color: $form-text-color-alt;
+}

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???

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;
+}

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...);
+}

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));
+      }
+    }
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+      }
+    }
+  }
+}

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));
+  }
+}

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}");
+  }
+}

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);
+      }
+    }
+  }
+}

scss/dark/layout/_content-wrapper.scss

@@ -0,0 +1,4 @@
+.content-wrapper {
+  background-color: $main-bg-alt;
+  color: $main-color-alt;
+}

scss/dark/layout/_main-footer.scss

@@ -0,0 +1,4 @@
+.main-footer {
+  background-color: $main-footer-bg-alt;
+  border-top-color: tint-color($dark-alt, 10%);
+}

scss/dark/layout/_main-header.scss

@@ -0,0 +1,13 @@
+.main-header {
+  background-color: $dark-alt;
+  border-bottom-color: tint-color($dark-alt, 10%);
+
+  .nav-link {
+    color: $gray-400-alt;
+
+    &:hover,
+    &:focus {
+      color: $white-alt;
+    }
+  }
+}

scss/layout/_content-wrapper.scss

@@ -3,10 +3,3 @@
   background-color: $main-bg;
   color: $main-color;
 }
-
-@include dark-mode() {
-  .content-wrapper {
-    background-color: $main-bg-alt;
-    color: $main-color-alt;
-  }
-}

scss/layout/_layout-fixed.scss

@@ -39,5 +39,3 @@
   // stylelint-disable-next-line
   height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
 }
-
-//

scss/layout/_main-footer.scss

@@ -26,12 +26,3 @@
     margin-bottom: $main-footer-height;
   }
 }
-
-@include dark-mode() {
-  .main-footer {
-    background-color: $main-footer-bg-alt;
-    border-top-color: tint-color($dark, 10%);
-  }
-}
-
-//

scss/layout/_main-header.scss

@@ -28,21 +28,3 @@
     // margin-top: $main-header-height;
   }
 }
-
-@include dark-mode() {
-  .main-header {
-    background-color: $dark-alt;
-    border-bottom-color: tint-color($dark-alt, 10%);
-
-    .nav-link {
-      color: $gray-400-alt;
-
-      &:hover,
-      &:focus {
-        color: $white-alt;
-      }
-    }
-  }
-}
-
-//

scss/layout/_main-sidebar.scss

@@ -73,5 +73,3 @@
     display: block;
   }
 }
-
-//

scss/layout/_sidebar-horizontal.scss

@@ -60,5 +60,3 @@
     }
   }
 }
-
-//

scss/layout/_sidebar-mini.scss

@@ -112,5 +112,3 @@
     visibility: visible;
   }
 }
-
-//

scss/layout/_wrapper.scss

@@ -15,5 +15,3 @@
   grid-template-rows: auto 1fr auto;
   min-height: 100vh;
 }
-
-//

scss/mixins/_animations.scss

@@ -115,5 +115,3 @@
     transform: none;
   }
 }
-
-//

scss/mixins/_dark-mode.scss

@@ -1,7 +0,0 @@
-@mixin dark-mode {
-  @if $enable-dark-mode {
-    @media (prefers-color-scheme: dark) {
-      @content;
-    }
-  }
-}

scss/mixins/_miscellaneous.scss

@@ -29,5 +29,3 @@
 //   background-color: $color;
 //   background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
 // }
-
-//

scss/mixins/_scrollbar.scss

@@ -34,5 +34,3 @@
     width: 0;
   }
 }
-
-//

scss/mixins/_sidebar-theme.scss

@@ -45,5 +45,3 @@
     }
   }
 }
-
-//

scss/parts/_core.scss

@@ -3,5 +3,3 @@
 //
 
 @import "../layout";
-
-//

scss/parts/_dark.scss

@@ -0,0 +1,2 @@
+@import "../bootstrap-dark";
+@import "../layout-dark";

scss/parts/adminlte.pcs.rtl.scss

@@ -1,8 +0,0 @@
-// Dark mode Enable using prefers-color-scheme
-$enable-dark-mode:            true;
-
-// AdminLTE
-// ---------------------------------------------------
-@import "../adminlte";
-
-//

scss/parts/adminlte.pcs.scss

@@ -1,8 +0,0 @@
-// Dark mode Enable using prefers-color-scheme
-$enable-dark-mode:            true;
-
-// AdminLTE
-// ---------------------------------------------------
-@import "../adminlte";
-
-//

scss/parts/adminlte.rtl.scss

@@ -1,5 +0,0 @@
-// AdminLTE
-// ---------------------------------------------------
-@import "../adminlte";
-
-//