citrus-cms/template/assets/scss/dark/_variables-dark.scss

// Variables dark
// Bootstrap variable and theme variable overrides for dark mode

// Color system

$white:       #fff;
$gray-100:    #f7f8f9;
$gray-200:    #f0f1f3;
$gray-300:    #c5c6cc;
$gray-400:    #a1a1a8;
$gray-500:    #464950;
$gray-600:    #30343c;
$gray-700:    #202227;
$gray-800:    #191a1f;
$gray-900:    #0f0f10;
$black:       #000;

$secondary:   $gray-500;
$light:       $gray-700;
$dark:        $gray-900;
$dark-gray:   $gray-400;
$light-gray:  $gray-300;

// theme colors map
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

// scss-docs-start theme-colors-rgb
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

// Body

$body-bg:                  $gray-800;
$body-color:               $gray-400;

$headings-color:                $white;

// Components

$border-color:                  rgba($white, .1);
$component-active-color:        $white;
$component-active-bg:           $primary;

// shadow

$box-shadow:                  0px 0px 20px rgba(0, 0, 0, .25);
$box-shadow-sm:               0 .125rem .25rem rgba(0, 0, 0, .25);
$box-shadow-lg:               0 1rem 3rem rgba(0, 0, 0, .25);

$hr-color:                    $gray-600;
$hr-opacity:                  .6;

// Cards

$card-bg:                       $body-bg;
$card-cap-bg:                   $body-bg;

// Accordion

$accordion-color:                         var(--#{$prefix}body-color);
$accordion-bg:                            $body-bg;
$accordion-button-active-bg:              tint-color($component-active-bg, 90%);
$accordion-button-active-color:           shade-color($primary, 10%);
$accordion-border-color:                  rgba($white, .125);
$accordion-button-color:                  $accordion-color;
$accordion-button-bg:                     $accordion-bg;
$accordion-transition:                    $btn-transition, border-radius .15s ease;
$accordion-button-active-bg:              tint-color($component-active-bg, 80%);
$accordion-button-active-color:           shade-color($primary, 90%);
$accordion-icon-color:                    $accordion-color;
$accordion-icon-active-color:             $accordion-button-active-color;
$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><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>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><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>");

// List group

$list-group-color:                  $body-color;
$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;
$list-group-border-color:           rgba($white, .125);
$list-group-action-hover-color:     $body-color;
$list-group-hover-bg:               rgba($white, .125);

// Navbar

$navbar-light-color:            $body-color;
$nav-link-color:                var(--#{$prefix}body-color);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");

// Dropdowns

$dropdown-color:                    $body-color;
$dropdown-bg:                       $gray-900;
$dropdown-border-color:             var(--#{$prefix}border-color);
$dropdown-divider-bg:               $gray-700;
$dropdown-link-color:               $gray-300;
$dropdown-box-shadow:               0px 20px 30px rgba(0, 0, 0, 0.3), 0px 0px 30px rgba(0, 0, 0, 0.3);

// Forms

$input-bg:                              $body-bg;
$input-disabled-bg:                     $gray-700;
$input-disabled-border-color:           $gray-600;

$input-color:                           $gray-300;
$input-border-color:                    $gray-600;
$input-focus-bg:                        $body-bg;
$input-focus-color:                     $input-color;
$input-placeholder-color:               $body-color;

$input-plaintext-color:                 $body-color;

$form-select-color:                     $input-color;
$form-select-bg:                        $input-bg;
$form-select-border-color:              $input-border-color;
$form-select-focus-border-color:        $input-focus-border-color;
$form-select-focus-box-shadow:           $input-btn-focus-box-shadow;

$form-select-disabled-border-color:     $input-disabled-border-color;
$form-select-disabled-bg:               $input-disabled-bg;
$form-select-disabled-border-color:     $input-border-color;
$form-select-disabled-color:            $gray-500;

$form-check-input-bg:                   $gray-400;

$form-range-track-bg:                   $gray-400;
$form-range-thumb-disabled-bg:          $gray-500;

$input-group-addon-color:               $input-color;
$input-group-addon-bg:                  $gray-600;
$input-group-addon-border-color:        $input-border-color;

// Modals

$modal-content-bg:                  $gray-900;

//off canvas

$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;

// btn close
$btn-close-color:            $white;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><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>");

// Navs 
$nav-link-color:                    var(--#{$prefix}body-color);
$nav-pills-link-color:              $body-color;
$nav-pills-link-active-color:       $component-active-color;
$nav-tabs-border-color:             $border-color;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;

// Pagination
$pagination-bg:                     $body-bg;
$pagination-color:                  var(--#{$prefix}body-color);
$pagination-border-color:           $gray-600;

$pagination-disabled-bg:            $body-bg;
$pagination-disabled-color:         $gray-500;
$pagination-disabled-border-color:  $gray-600;

// table
$table-color:                 $body-color;
$table-striped-color:         $table-color;
$table-border-color:          $border-color;

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);
$table-group-separator-color: $gray-500;

// progress

$progress-bg:                       $border-color;


// Code

$kbd-bg:                            $dark-gray;