custom.scss

/* For design in bootstrap look at:
 Colors and Text: https://getbootstrap.com/docs/5.0/utilities/colors/
 Background: https://getbootstrap.com/docs/5.0/utilities/background/

Key Colors
$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;
$gray-100: #f8f9fa;
$gray-600: #6c757d;
$gray-900: #212529;

Key Colors map to ...
$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Key colors are are mapped to words we use in HTML (text-primary, text-dark, bg-primary, bg-dark)
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

*/

// redefine colors
$primary: #a1a9bd;
$secondary: #5B9D82;
$body-bg: #cfd8dc;

// redefine body background
@import "../../../../../node_modules/bootstrap/scss/bootstrap";

// setup default background
html, body {
  background-image: var(--bs-gradient);
  background-color: var(--bs-body-bg);
}

// setup dark mode styling
.dark-mode {
  $enable-gradients: true;

  /* redefine theme colors */
  $primary: #5c7ba8;
  $secondary: $green-600;
  $body-bg: #455a64;
  /* set background values */
  --#{$variable-prefix}body-bg: #{$body-bg};

  $theme-colors: (
          "primary": $primary,
          "secondary": $secondary
  );
  /* redefine theme color variables */
  @each $color, $value in $theme-colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }
  /* redefine theme theme-colors-rgb variables */
  $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
  @each $color, $value in $theme-colors-rgb {
    --#{$variable-prefix}#{$color}-rgb: #{$value};
  }

  @import "../../../../../node_modules/bootstrap/scss/bootstrap";
}