From bfaffd9ea85ef87598f9a2184fe686b5813bc6ce Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Wed, 12 May 2021 04:21:49 +0530
Subject: [PATCH] dark mode with bootstrap complete components
Used https://github.com/vinorodrigues/bootstrap-dark-5/releases/tag/v1.0.0
---
build/.eslintrc.json | 2 +-
package.json | 15 +-
scss/_bootstrap-components.scss | 0
scss/_bootstrap-dark.scss | 44 ++
scss/_bootstrap-variables-alt.scss | 87 ---
scss/_bootstrap-variables.scss | 136 ----
..._utilities.scss => _custom-utilities.scss} | 2 -
scss/_custom-variables.scss | 124 ++++
scss/_layout-dark.scss | 3 +
scss/_layout.scss | 2 -
scss/_mixins.scss | 3 -
scss/_variables.scss | 256 +++----
scss/adminlte.scss | 19 +-
.../_custom-variables-alt.scss} | 6 +-
scss/dark/_variables-alt.scss | 666 ++++++++++++++++++
scss/dark/adminlte-dark.scss | 15 +
scss/dark/bootstrap/_accordion.scss | 51 ++
scss/dark/bootstrap/_alert.scss | 25 +
scss/dark/bootstrap/_badge.scss | 7 +
scss/dark/bootstrap/_breadcrumb.scss | 20 +
scss/dark/bootstrap/_button-group.scss | 9 +
scss/dark/bootstrap/_buttons.scss | 65 ++
scss/dark/bootstrap/_card.scss | 35 +
scss/dark/bootstrap/_carousel.scss | 64 ++
scss/dark/bootstrap/_close.scss | 26 +
scss/dark/bootstrap/_color-scheme.scss | 3 +
scss/dark/bootstrap/_dark.scss | 7 +
scss/dark/bootstrap/_dropdown.scss | 92 +++
scss/dark/bootstrap/_forms.scss | 9 +
scss/dark/bootstrap/_helpers.scss | 7 +
scss/dark/bootstrap/_images.scss | 14 +
scss/dark/bootstrap/_list-group.scss | 63 ++
scss/dark/bootstrap/_mixins.scss | 4 +
scss/dark/bootstrap/_modal.scss | 36 +
scss/dark/bootstrap/_nav.scss | 64 ++
scss/dark/bootstrap/_navbar.scss | 117 +++
scss/dark/bootstrap/_offcanvas.scss | 22 +
scss/dark/bootstrap/_pagination.scss | 33 +
scss/dark/bootstrap/_patch.scss | 50 ++
scss/dark/bootstrap/_popover.scss | 82 +++
scss/dark/bootstrap/_progress.scss | 15 +
scss/dark/bootstrap/_reboot.scss | 91 +++
scss/dark/bootstrap/_root.scss | 12 +
scss/dark/bootstrap/_tables.scss | 65 ++
scss/dark/bootstrap/_toasts.scss | 17 +
scss/dark/bootstrap/_tooltip.scss | 50 ++
scss/dark/bootstrap/_type.scss | 7 +
scss/dark/bootstrap/_utilities.scss | 95 +++
.../bootstrap/_variables-map-alt-to-core.scss | 409 +++++++++++
.../_variables-map-core-to-temp.scss | 409 +++++++++++
.../bootstrap/_variables-map-temp-to-alt.scss | 409 +++++++++++
.../bootstrap/forms/_floating-labels.scss | 26 +
scss/dark/bootstrap/forms/_form-check.scss | 93 +++
scss/dark/bootstrap/forms/_form-control.scss | 64 ++
scss/dark/bootstrap/forms/_form-range.scss | 56 ++
scss/dark/bootstrap/forms/_form-select.scss | 35 +
scss/dark/bootstrap/forms/_form-text.scss | 5 +
scss/dark/bootstrap/forms/_input-group.scss | 16 +
scss/dark/bootstrap/forms/_labels.scss | 9 +
scss/dark/bootstrap/forms/_validation.scss | 5 +
.../bootstrap/helpers/_colored-links.scss | 12 +
scss/dark/bootstrap/mixins/_buttons.scss | 119 ++++
scss/dark/bootstrap/mixins/_color-scheme.scss | 45 ++
scss/dark/bootstrap/mixins/_forms.scss | 74 ++
.../bootstrap/mixins/_table-variants.scss | 19 +
scss/dark/bootstrap/utilities/_api-all.scss | 7 +
scss/dark/bootstrap/utilities/_api.scss | 17 +
scss/dark/layout/_content-wrapper.scss | 4 +
scss/dark/layout/_main-footer.scss | 4 +
scss/dark/layout/_main-header.scss | 13 +
scss/layout/_content-wrapper.scss | 7 -
scss/layout/_layout-fixed.scss | 2 -
scss/layout/_main-footer.scss | 9 -
scss/layout/_main-header.scss | 18 -
scss/layout/_main-sidebar.scss | 2 -
scss/layout/_sidebar-horizontal.scss | 2 -
scss/layout/_sidebar-mini.scss | 2 -
scss/layout/_wrapper.scss | 2 -
scss/mixins/_animations.scss | 2 -
scss/mixins/_dark-mode.scss | 7 -
scss/mixins/_miscellaneous.scss | 2 -
scss/mixins/_scrollbar.scss | 2 -
scss/mixins/_sidebar-theme.scss | 2 -
scss/parts/_core.scss | 2 -
scss/parts/_dark.scss | 2 +
scss/parts/adminlte.pcs.rtl.scss | 8 -
scss/parts/adminlte.pcs.scss | 8 -
scss/parts/adminlte.rtl.scss | 5 -
88 files changed, 4117 insertions(+), 454 deletions(-)
delete mode 100644 scss/_bootstrap-components.scss
create mode 100644 scss/_bootstrap-dark.scss
delete mode 100644 scss/_bootstrap-variables-alt.scss
delete mode 100644 scss/_bootstrap-variables.scss
rename scss/{_utilities.scss => _custom-utilities.scss} (98%)
create mode 100644 scss/_custom-variables.scss
create mode 100644 scss/_layout-dark.scss
rename scss/{_variables-alt.scss => dark/_custom-variables-alt.scss} (66%)
create mode 100644 scss/dark/_variables-alt.scss
create mode 100644 scss/dark/adminlte-dark.scss
create mode 100644 scss/dark/bootstrap/_accordion.scss
create mode 100644 scss/dark/bootstrap/_alert.scss
create mode 100644 scss/dark/bootstrap/_badge.scss
create mode 100644 scss/dark/bootstrap/_breadcrumb.scss
create mode 100644 scss/dark/bootstrap/_button-group.scss
create mode 100644 scss/dark/bootstrap/_buttons.scss
create mode 100644 scss/dark/bootstrap/_card.scss
create mode 100644 scss/dark/bootstrap/_carousel.scss
create mode 100644 scss/dark/bootstrap/_close.scss
create mode 100644 scss/dark/bootstrap/_color-scheme.scss
create mode 100644 scss/dark/bootstrap/_dark.scss
create mode 100644 scss/dark/bootstrap/_dropdown.scss
create mode 100644 scss/dark/bootstrap/_forms.scss
create mode 100644 scss/dark/bootstrap/_helpers.scss
create mode 100644 scss/dark/bootstrap/_images.scss
create mode 100644 scss/dark/bootstrap/_list-group.scss
create mode 100644 scss/dark/bootstrap/_mixins.scss
create mode 100644 scss/dark/bootstrap/_modal.scss
create mode 100644 scss/dark/bootstrap/_nav.scss
create mode 100644 scss/dark/bootstrap/_navbar.scss
create mode 100644 scss/dark/bootstrap/_offcanvas.scss
create mode 100644 scss/dark/bootstrap/_pagination.scss
create mode 100644 scss/dark/bootstrap/_patch.scss
create mode 100644 scss/dark/bootstrap/_popover.scss
create mode 100644 scss/dark/bootstrap/_progress.scss
create mode 100644 scss/dark/bootstrap/_reboot.scss
create mode 100644 scss/dark/bootstrap/_root.scss
create mode 100644 scss/dark/bootstrap/_tables.scss
create mode 100644 scss/dark/bootstrap/_toasts.scss
create mode 100644 scss/dark/bootstrap/_tooltip.scss
create mode 100644 scss/dark/bootstrap/_type.scss
create mode 100644 scss/dark/bootstrap/_utilities.scss
create mode 100644 scss/dark/bootstrap/_variables-map-alt-to-core.scss
create mode 100644 scss/dark/bootstrap/_variables-map-core-to-temp.scss
create mode 100644 scss/dark/bootstrap/_variables-map-temp-to-alt.scss
create mode 100644 scss/dark/bootstrap/forms/_floating-labels.scss
create mode 100644 scss/dark/bootstrap/forms/_form-check.scss
create mode 100644 scss/dark/bootstrap/forms/_form-control.scss
create mode 100644 scss/dark/bootstrap/forms/_form-range.scss
create mode 100644 scss/dark/bootstrap/forms/_form-select.scss
create mode 100644 scss/dark/bootstrap/forms/_form-text.scss
create mode 100644 scss/dark/bootstrap/forms/_input-group.scss
create mode 100644 scss/dark/bootstrap/forms/_labels.scss
create mode 100644 scss/dark/bootstrap/forms/_validation.scss
create mode 100644 scss/dark/bootstrap/helpers/_colored-links.scss
create mode 100644 scss/dark/bootstrap/mixins/_buttons.scss
create mode 100644 scss/dark/bootstrap/mixins/_color-scheme.scss
create mode 100644 scss/dark/bootstrap/mixins/_forms.scss
create mode 100644 scss/dark/bootstrap/mixins/_table-variants.scss
create mode 100644 scss/dark/bootstrap/utilities/_api-all.scss
create mode 100644 scss/dark/bootstrap/utilities/_api.scss
create mode 100644 scss/dark/layout/_content-wrapper.scss
create mode 100644 scss/dark/layout/_main-footer.scss
create mode 100644 scss/dark/layout/_main-header.scss
delete mode 100644 scss/mixins/_dark-mode.scss
create mode 100644 scss/parts/_dark.scss
delete mode 100644 scss/parts/adminlte.pcs.rtl.scss
delete mode 100644 scss/parts/adminlte.pcs.scss
delete mode 100644 scss/parts/adminlte.rtl.scss
diff --git a/build/.eslintrc.json b/build/.eslintrc.json
index 739d674c5..6969a46d4 100644
--- a/build/.eslintrc.json
+++ b/build/.eslintrc.json
@@ -6,7 +6,7 @@
"parserOptions": {
"sourceType": "script"
},
- "extends": "../../.eslintrc.json",
+ "extends": "../.eslintrc.json",
"rules": {
"no-console": "off",
"strict": "error",
diff --git a/package.json b/package.json
index 1af6ea4e5..c2bf639dc 100644
--- a/package.json
+++ b/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",
diff --git a/scss/_bootstrap-components.scss b/scss/_bootstrap-components.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/scss/_bootstrap-dark.scss b/scss/_bootstrap-dark.scss
new file mode 100644
index 000000000..86edcc82a
--- /dev/null
+++ b/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";
diff --git a/scss/_bootstrap-variables-alt.scss b/scss/_bootstrap-variables-alt.scss
deleted file mode 100644
index bd4b9a7f2..000000000
--- a/scss/_bootstrap-variables-alt.scss
+++ /dev/null
@@ -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
-
-//
diff --git a/scss/_bootstrap-variables.scss b/scss/_bootstrap-variables.scss
deleted file mode 100644
index 62d3b9413..000000000
--- a/scss/_bootstrap-variables.scss
+++ /dev/null
@@ -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 `` 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;
-
-//
diff --git a/scss/_utilities.scss b/scss/_custom-utilities.scss
similarity index 98%
rename from scss/_utilities.scss
rename to scss/_custom-utilities.scss
index 0b0a2ad43..8a88f1460 100644
--- a/scss/_utilities.scss
+++ b/scss/_custom-utilities.scss
@@ -18,5 +18,3 @@ $utilities: (
)
)
);
-
-//
diff --git a/scss/_custom-variables.scss b/scss/_custom-variables.scss
new file mode 100644
index 000000000..61fa97862
--- /dev/null
+++ b/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;
diff --git a/scss/_layout-dark.scss b/scss/_layout-dark.scss
new file mode 100644
index 000000000..8be11092e
--- /dev/null
+++ b/scss/_layout-dark.scss
@@ -0,0 +1,3 @@
+@import "dark/layout/main-header";
+@import "dark/layout/content-wrapper";
+@import "dark/layout/main-footer";
diff --git a/scss/_layout.scss b/scss/_layout.scss
index 448846b52..ff3839449 100644
--- a/scss/_layout.scss
+++ b/scss/_layout.scss
@@ -9,5 +9,3 @@
@import "layout/content-wrapper";
@import "layout/main-footer";
@import "layout/layout-fixed";
-
-//
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 0c826fee0..3551ebc81 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -3,9 +3,6 @@
//
@import "mixins/animations";
-@import "mixins/dark-mode";
@import "mixins/scrollbar";
@import "mixins/sidebar-theme";
@import "mixins/miscellaneous";
-
-//
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e67ad7447..c95467572 100644
--- a/scss/_variables.scss
+++ b/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 `` 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;
diff --git a/scss/adminlte.scss b/scss/adminlte.scss
index df94cf189..aa9a76e94 100644
--- a/scss/adminlte.scss
+++ b/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";
-
-//
diff --git a/scss/_variables-alt.scss b/scss/dark/_custom-variables-alt.scss
similarity index 66%
rename from scss/_variables-alt.scss
rename to scss/dark/_custom-variables-alt.scss
index 2a40e2641..d92f14afe 100644
--- a/scss/_variables-alt.scss
+++ b/scss/dark/_custom-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;
diff --git a/scss/dark/_variables-alt.scss b/scss/dark/_variables-alt.scss
new file mode 100644
index 000000000..8117175ee
--- /dev/null
+++ b/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 `` 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,") !default;
+$form-check-radio-checked-bg-image-alt: url("data:image/svg+xml,") !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,") !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,") !default;
+
+$form-switch-focus-color-alt: $input-focus-border-color-alt !default;
+$form-switch-focus-bg-image-alt: url("data:image/svg+xml,") !default;
+
+$form-switch-checked-color-alt: $component-active-color-alt !default;
+$form-switch-checked-bg-image-alt: url("data:image/svg+xml,") !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,") !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,") !default;
+$form-feedback-icon-invalid-color-alt: $form-feedback-invalid-color-alt !default;
+$form-feedback-icon-invalid-alt: url("data:image/svg+xml,") !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,") !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,") !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,") !default;
+$accordion-button-active-icon-alt: url("data:image/svg+xml,") !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,") !default;
+$carousel-control-next-icon-bg-alt: url("data:image/svg+xml,") !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,") !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;
diff --git a/scss/dark/adminlte-dark.scss b/scss/dark/adminlte-dark.scss
new file mode 100644
index 000000000..84bab919c
--- /dev/null
+++ b/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";
diff --git a/scss/dark/bootstrap/_accordion.scss b/scss/dark/bootstrap/_accordion.scss
new file mode 100644
index 000000000..1820c3fbb
--- /dev/null
+++ b/scss/dark/bootstrap/_accordion.scss
@@ -0,0 +1,51 @@
+// Base styles
+
+.accordion-button {
+ color: $accordion-button-color-alt;
+ background-color: $accordion-button-bg-alt;
+
+ &:not(.collapsed) {
+ color: $accordion-button-active-color-alt;
+ background-color: $accordion-button-active-bg-alt;
+ box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color-alt;
+
+ &::after {
+ background-image: escape-svg($accordion-button-active-icon-alt);
+ }
+ }
+
+ // Accordion icon
+ &::after {
+ background-image: escape-svg($accordion-button-icon-alt);
+ }
+
+ &:hover {
+ z-index: 2;
+ }
+
+ &:focus {
+ border-color: $accordion-button-focus-border-color-alt;
+ box-shadow: $accordion-button-focus-box-shadow-alt;
+ }
+}
+
+.accordion-item {
+ background-color: $accordion-bg-alt;
+ border: $accordion-border-width solid $accordion-border-color-alt;
+}
+
+// Flush accordion items
+
+.accordion-flush {
+ .accordion-collapse {
+ border-width: 0;
+ }
+
+ .accordion-item {
+ border-right: 0;
+ border-left: 0;
+
+ &:first-child { border-top: 0; }
+ &:last-child { border-bottom: 0; }
+ }
+}
diff --git a/scss/dark/bootstrap/_alert.scss b/scss/dark/bootstrap/_alert.scss
new file mode 100644
index 000000000..16e49efd7
--- /dev/null
+++ b/scss/dark/bootstrap/_alert.scss
@@ -0,0 +1,25 @@
+// Base styles
+
+// NOT NEEDED
+// .alert {
+// border: $alert-border-width solid transparent;
+// }
+
+// Headings for larger alerts
+.alert-heading {
+ color: inherit;
+}
+
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $state, $value in $theme-colors-alt {
+ $alert-background-alt: shift-color($value, $alert-bg-scale-alt);
+ $alert-border-alt: shift-color($value, $alert-border-scale-alt);
+ $alert-color-alt: shift-color($value, $alert-color-scale-alt);
+ @if (contrast-ratio($alert-background-alt, $alert-color-alt) < $min-contrast-ratio-alt) {
+ $alert-color-alt: mix($value, color-contrast($alert-background-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($alert-color-scale-alt));
+ }
+ .alert-#{$state} {
+ @include alert-variant($alert-background-alt, $alert-border-alt, $alert-color-alt);
+ }
+}
diff --git a/scss/dark/bootstrap/_badge.scss b/scss/dark/bootstrap/_badge.scss
new file mode 100644
index 000000000..45c250dce
--- /dev/null
+++ b/scss/dark/bootstrap/_badge.scss
@@ -0,0 +1,7 @@
+// Base class
+
+.badge {
+ color: $badge-color-alt;
+ // THIS DOES NOTHING
+ // @include gradient-bg();
+}
diff --git a/scss/dark/bootstrap/_breadcrumb.scss b/scss/dark/bootstrap/_breadcrumb.scss
new file mode 100644
index 000000000..f38076dd2
--- /dev/null
+++ b/scss/dark/bootstrap/_breadcrumb.scss
@@ -0,0 +1,20 @@
+.breadcrumb {
+ background-color: $breadcrumb-bg-alt;
+}
+
+.breadcrumb-item {
+ // The separator between breadcrumbs (by default, a forward-slash: "/")
+ + .breadcrumb-item {
+ padding-left: $breadcrumb-item-padding-x;
+
+ &::before {
+ color: $breadcrumb-divider-color-alt;
+ // TODO: DO I NEED THIS?
+ // content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+ }
+ }
+
+ &.active {
+ color: $breadcrumb-active-color-alt;
+ }
+}
diff --git a/scss/dark/bootstrap/_button-group.scss b/scss/dark/bootstrap/_button-group.scss
new file mode 100644
index 000000000..5450535bd
--- /dev/null
+++ b/scss/dark/bootstrap/_button-group.scss
@@ -0,0 +1,9 @@
+
+.btn-group.show .dropdown-toggle {
+ @include box-shadow($btn-active-box-shadow-alt);
+
+ // Show no shadow for `.btn-link` since it has no other button styles.
+ &.btn-link {
+ @include box-shadow(none);
+ }
+}
diff --git a/scss/dark/bootstrap/_buttons.scss b/scss/dark/bootstrap/_buttons.scss
new file mode 100644
index 000000000..a0268f52c
--- /dev/null
+++ b/scss/dark/bootstrap/_buttons.scss
@@ -0,0 +1,65 @@
+// Base styles
+
+.btn {
+ color: $body-color-alt;
+ background-color: transparent;
+ border: $btn-border-width solid transparent;
+
+ &:hover {
+ color: $body-color-alt;
+ }
+
+ .btn-check:focus + &,
+ &:focus {
+ box-shadow: $btn-focus-box-shadow-alt;
+ }
+
+ .btn-check:checked + &,
+ .btn-check:active + &,
+ &:active,
+ &.active {
+ @include box-shadow($btn-active-box-shadow-alt);
+
+ &:focus {
+ @include box-shadow($btn-focus-box-shadow-alt, $btn-active-box-shadow-alt);
+ }
+ }
+
+ &:disabled,
+ &.disabled,
+ fieldset:disabled & {
+ opacity: $btn-disabled-opacity-alt;
+ @include box-shadow(none);
+ }
+}
+
+
+// Alternate buttons
+
+@each $color, $value in $theme-colors-alt {
+ .btn-#{$color} {
+ @include button-variant-alt($value, $value);
+ }
+}
+
+@each $color, $value in $theme-colors-alt {
+ .btn-outline-#{$color} {
+ @include button-outline-variant-alt($value);
+ }
+}
+
+// Link buttons
+
+// Make a button look and behave like a link
+.btn-link {
+ color: $btn-link-color-alt;
+
+ &:hover {
+ color: $btn-link-hover-color-alt;
+ }
+
+ &:disabled,
+ &.disabled {
+ color: $btn-link-disabled-color-alt;
+ }
+}
diff --git a/scss/dark/bootstrap/_card.scss b/scss/dark/bootstrap/_card.scss
new file mode 100644
index 000000000..b028c4b26
--- /dev/null
+++ b/scss/dark/bootstrap/_card.scss
@@ -0,0 +1,35 @@
+// Base styles
+
+.card {
+ background-color: $card-bg-alt;
+ border: $card-border-width solid $card-border-color-alt;
+}
+
+.card-body {
+ color: $card-color-alt;
+}
+
+// Optional textual caps
+
+.card-header {
+ color: $card-cap-color-alt;
+ background-color: $card-cap-bg-alt;
+ border-bottom: $card-border-width solid $card-border-color-alt;
+}
+
+.card-footer {
+ color: $card-cap-color-alt;
+ background-color: $card-cap-bg-alt;
+ border-top: $card-border-width solid $card-border-color-alt;
+}
+
+// Header navs
+
+.card-header-tabs {
+ @if $nav-tabs-link-active-bg != $card-bg {
+ .nav-link.active {
+ background-color: $card-bg-alt;
+ border-bottom-color: $card-bg-alt;
+ }
+ }
+}
diff --git a/scss/dark/bootstrap/_carousel.scss b/scss/dark/bootstrap/_carousel.scss
new file mode 100644
index 000000000..aeb648346
--- /dev/null
+++ b/scss/dark/bootstrap/_carousel.scss
@@ -0,0 +1,64 @@
+// Left/right controls for nav
+
+.carousel-control-prev,
+.carousel-control-next {
+ color: $carousel-control-color-alt;
+ opacity: $carousel-control-opacity-alt;
+
+ // Hover/focus state
+ &:hover,
+ &:focus {
+ color: $carousel-control-color-alt;
+ opacity: $carousel-control-hover-opacity-alt;
+ }
+}
+.carousel-control-prev {
+ background-image: if($enable-gradients, linear-gradient(90deg, rgba($white-alt, .25), rgba($white-alt, .001)), null);
+}
+.carousel-control-next {
+ background-image: if($enable-gradients, linear-gradient(270deg, rgba($white, .25), rgba($white, .001)), null);
+}
+
+// Icons for within
+.carousel-control-prev-icon {
+ background-image: escape-svg($carousel-control-prev-icon-bg-alt);
+}
+.carousel-control-next-icon {
+ background-image: escape-svg($carousel-control-next-icon-bg-alt);
+}
+
+// Optional indicator pips/controls
+
+.carousel-indicators {
+ [data-bs-target] {
+ background-color: $carousel-indicator-active-bg-alt;
+ opacity: $carousel-indicator-opacity-alt;
+ }
+
+ .active {
+ opacity: $carousel-indicator-active-opacity-alt;
+ }
+}
+
+// Optional captions
+
+.carousel-caption {
+ color: $carousel-caption-color-alt;
+}
+
+// Dark mode carousel
+
+.carousel-dark {
+ .carousel-control-prev-icon,
+ .carousel-control-next-icon {
+ filter: $carousel-dark-control-icon-filter-alt;
+ }
+
+ .carousel-indicators [data-bs-target] {
+ background-color: $carousel-dark-indicator-active-bg-alt;
+ }
+
+ .carousel-caption {
+ color: $carousel-dark-caption-color-alt;
+ }
+}
diff --git a/scss/dark/bootstrap/_close.scss b/scss/dark/bootstrap/_close.scss
new file mode 100644
index 000000000..bfb9be34c
--- /dev/null
+++ b/scss/dark/bootstrap/_close.scss
@@ -0,0 +1,26 @@
+
+.btn-close {
+ color: $btn-close-color-alt;
+ background: transparent escape-svg($btn-close-bg-alt) center / $btn-close-width auto no-repeat; // include transparent for button elements
+ opacity: $btn-close-opacity-alt;
+
+ // Override '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;
+}
diff --git a/scss/dark/bootstrap/_color-scheme.scss b/scss/dark/bootstrap/_color-scheme.scss
new file mode 100644
index 000000000..c931859d7
--- /dev/null
+++ b/scss/dark/bootstrap/_color-scheme.scss
@@ -0,0 +1,3 @@
+:root {
+ @include color-scheme-property($default-color-scheme, true);
+}
diff --git a/scss/dark/bootstrap/_dark.scss b/scss/dark/bootstrap/_dark.scss
new file mode 100644
index 000000000..bdc6fc195
--- /dev/null
+++ b/scss/dark/bootstrap/_dark.scss
@@ -0,0 +1,7 @@
+
+// from Chris Coyier on Jul 26, 2016: https://css-tricks.com/overriding-the-default-text-selection-color-with-css/
+
+body::selection {
+ color: $selection-color-alt;
+ background: $selection-bg-alt;
+}
diff --git a/scss/dark/bootstrap/_dropdown.scss b/scss/dark/bootstrap/_dropdown.scss
new file mode 100644
index 000000000..d12ab1e49
--- /dev/null
+++ b/scss/dark/bootstrap/_dropdown.scss
@@ -0,0 +1,92 @@
+
+// The dropdown menu
+.dropdown-menu {
+ color: $dropdown-color-alt;
+ background-color: $dropdown-bg-alt;
+ border: $dropdown-border-width solid $dropdown-border-color-alt;
+ @include box-shadow($dropdown-box-shadow-alt);
+}
+
+// Dividers (basically an `
`) 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 `