Merge pull request #3492 from danny007in/enhance-dark-mode

Enhance: dark mode

.bundlewatch.config.json

@@ -2,35 +2,35 @@
   "files": [
     {
       "path": "./dist/css/adminlte.css",
-      "maxSize": "90.3 kB"
+      "maxSize": "121.9 kB"
     },
     {
       "path": "./dist/css/adminlte.min.css",
-      "maxSize": "85.7 kB"
+      "maxSize": "116.5 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.css",
-      "maxSize": "16 kB"
+      "maxSize": "27.2 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.min.css",
-      "maxSize": "15.4 kB"
+      "maxSize": "26.5 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.core.css",
-      "maxSize": "55.1 kB"
+      "maxSize": "69.2 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.core.min.css",
-      "maxSize": "51.6 kB"
+      "maxSize": "65.4 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.extra-components.css",
-      "maxSize": "4 kB"
+      "maxSize": "4.6 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.extra-components.min.css",
-      "maxSize": "4 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.pages.css",
@@ -42,11 +42,11 @@
     },
     {
       "path": "./dist/css/alt/adminlte.plugins.css",
-      "maxSize": "17 kB"
+      "maxSize": "21.8 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.plugins.min.css",
-      "maxSize": "16.6 kB"
+      "maxSize": "21.2 kB"
     },
     {
       "path": "./dist/js/adminlte.js",

build/scss/_adminlte.raw.scss

@@ -19,6 +19,7 @@
 // ---------------------------------------------------
 @import "bootstrap-variables";
 @import "variables";
+@import "variables-alt";
 @import "mixins";
 
 @import "parts/core";

build/scss/_alerts.scss

@@ -34,3 +34,19 @@
     @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
   }
 }
+
+.dark-mode {
+  @each $color, $value in $theme-colors-alt {
+    .alert-#{$color} {
+      color: color-yiq($value);
+      background-color: $value;
+      border-color: darken($value, 5%);
+    }
+
+    .alert-default-#{$color} {
+      @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+    }
+  }
+}
+
+//

build/scss/_buttons.scss

@@ -139,4 +139,16 @@
       border-color: lighten($gray-600, 5%);
     }
   }
+
+  @each $color, $value in $theme-colors-alt {
+    .btn-#{$color} {
+      @include button-variant($value, $value);
+    }
+  }
+
+  @each $color, $value in $theme-colors-alt {
+    .btn-outline-#{$color} {
+      @include button-outline-variant($value);
+    }
+  }
 }

build/scss/_callout.scss

@@ -53,5 +53,21 @@
 .dark-mode {
   .callout {
     background-color: lighten($dark, 5%);
+
+    &.callout-danger {
+      border-left-color: lighten($danger-alt, 10%);
+    }
+
+    &.callout-warning {
+      border-left-color: lighten($warning-alt, 10%);
+    }
+
+    &.callout-info {
+      border-left-color: lighten($info-alt, 10%);
+    }
+
+    &.callout-success {
+      border-left-color: lighten($success-alt, 10%);
+    }
   }
 }

build/scss/_cards.scss

@@ -481,6 +481,15 @@ html.maximized-card {
 
 .dark-mode {
 
+  // Color variants
+  @each $name, $color in $theme-colors-alt {
+    @include cards-variant($name, $color);
+  }
+
+  @each $name, $color in $colors-alt {
+    @include cards-variant($name, $color);
+  }
+
   .card {
     background-color: $dark;
     color: $white;
@@ -499,7 +508,7 @@ html.maximized-card {
       border-color: $gray-600;
     }
     &:not(.card-outline) > .card-header a.active {
-      color: $white;
+      color: $dark;
     }
   }
 
@@ -518,4 +527,18 @@ html.maximized-card {
     border-color: lighten($dark, 7.5%);
     color: $white;
   }
+
+  .todo-list {
+    @each $name, $color in $theme-colors-alt {
+      .#{$name} {
+        border-left-color: $color;
+      }
+    }
+
+    @each $name, $color in $colors-alt {
+      .#{$name} {
+        border-left-color: $color;
+      }
+    }
+  }
 }

build/scss/_colors.scss

@@ -101,4 +101,44 @@ a.text-muted:hover {
   .link-dark {
     color: $gray-400;
   }
+
+  // Background colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    @include background-variant($name, $color);
+  }
+
+  // Background colors (colors)
+  @each $name, $color in $colors-alt {
+    @include background-variant($name, $color);
+  }
+
+  // Gradient Background colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    @include background-gradient-variant($name, $color);
+  }
+
+  // Gradient Background colors (colors)
+  @each $name, $color in $colors-alt {
+    @include background-gradient-variant($name, $color);
+  }
+
+  // Accent colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    @include accent-variant($name, $color);
+  }
+
+  [class*="accent-"] {
+    @each $name, $color in $theme-colors-alt {
+      a.btn-#{$name} {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  // Accent colors (colors)
+  @each $name, $color in $colors-alt {
+    @include accent-variant($name, $color);
+  }
 }
+
+//

build/scss/_direct-chat.scss

@@ -243,4 +243,17 @@
       border-right-color: transparent;
     }
   }
+
+  // Color variants
+  @each $name, $color in $theme-colors-alt {
+    .direct-chat-#{$name} {
+      @include direct-chat-variant($color);
+    }
+  }
+
+  @each $name, $color in $colors-alt {
+    .direct-chat-#{$name} {
+      @include direct-chat-variant($color);
+    }
+  }
 }

build/scss/_forms.scss

@@ -400,5 +400,32 @@ body.text-sm {
     &::-ms-track {
       background-color: lighten($dark, 7.5%);
     }
+
+    @each $name, $color in $theme-colors-alt {
+      @include custom-range-variant($name, $color);
+    }
+
+    @each $name, $color in $colors-alt {
+      @include custom-range-variant($name, $color);
+    }
+  }
+
+  // custom switch color variations
+  .custom-switch {
+    @each $name, $color in $theme-colors-alt {
+      @include custom-switch-variant($name, $color);
+    }
+
+    @each $name, $color in $colors-alt {
+      @include custom-switch-variant($name, $color);
+    }
+  }
+
+  @each $name, $color in $theme-colors-alt {
+    @include custom-control-input-variant($name, $color);
+  }
+
+  @each $name, $color in $colors-alt {
+    @include custom-control-input-variant($name, $color);
   }
 }

build/scss/_info-box.scss

@@ -149,5 +149,17 @@
   .info-box {
     background-color: $dark;
     color: $white;
+    @each $name, $color in $theme-colors-alt {
+      .info-box {
+        .bg-#{$name},
+        .bg-gradient-#{$name} {
+          color: color-yiq($color);
+
+          .progress-bar {
+            background-color: color-yiq($color);
+          }
+        }
+      }
+    }
   }
 }

build/scss/_layout.scss

@@ -651,6 +651,38 @@ body:not(.layout-fixed) {
   background-color: $dark-main-bg;
   color: $white;
 
+  .wrapper {
+    .layout-navbar-fixed & {
+      @each $name, $color in $theme-colors-alt {
+        .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
+          background-color: $sidebar-dark-bg;
+        }
+
+        .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
+          background-color: $sidebar-light-bg;
+        }
+      }
+    }
+
+    @each $breakpoint in map-keys($grid-breakpoints) {
+      @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .layout#{$infix}-navbar-fixed & {
+          @each $name, $color in $theme-colors-alt {
+            .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
+              background-color: $sidebar-dark-bg;
+            }
+
+            .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
+              background-color: $sidebar-light-bg;
+            }
+          }
+        }
+      }
+    }
+  }
+
   .breadcrumb-item {
     &.active,
     + .breadcrumb-item::before {

build/scss/_main-header.scss

@@ -167,20 +167,7 @@
   display: none;
   justify-content: center;
   flex-direction: column;
-
+  background-color: initial;
-  @each $color, $value in $theme-colors {
-    @if $color != dark and $color != light {
-      .navbar-#{$color} & {
-        background-color: $value;
-      }
-    }
-  }
-
-  @each $color, $value in $colors {
-    .navbar-#{$color} & {
-      background-color: $value;
-    }
-  }
 
   &.navbar-search-open {
     display: flex;

build/scss/_main-sidebar.scss

@@ -1144,3 +1144,21 @@
     }
   }
 }
+
+.dark-mode {
+  @each $name, $color in $theme-colors-alt {
+    .sidebar-dark-#{$name},
+    .sidebar-light-#{$name} {
+      @include sidebar-color($color);
+    }
+  }
+
+  @each $name, $color in $colors-alt {
+    .sidebar-dark-#{$name},
+    .sidebar-light-#{$name} {
+      @include sidebar-color($color);
+    }
+  }
+}
+
+//

build/scss/_miscellaneous.scss

@@ -495,6 +495,36 @@ blockquote {
   }
   blockquote {
     background-color: lighten($dark, 5%);
+
+    @each $color, $value in $theme-colors {
+      &.quote-#{$color} {
+        border-color: $value;
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: $value;
+        }
+      }
+    }
+
+    @each $color, $value in $colors {
+      &.quote-#{$color} {
+        border-color: $value;
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: $value;
+        }
+      }
+    }
   }
   .close,
   .mailbox-attachment-close {

build/scss/_navs.scss

@@ -143,4 +143,26 @@
       }
     }
   }
+
+  // Color variants
+  @each $color, $value in $theme-colors-alt {
+    @if $color == dark or $color == light {
+      .navbar-#{$color} {
+        background-color: $value;
+        @if $color == dark {
+          border-color: lighten($dark, 10%);
+        }
+      }
+    }
+  }
+
+  @each $color, $value in $theme-colors-alt {
+    @if $color != dark and $color != light {
+      @include navbar-variant($color, $value);
+    }
+  }
+
+  @each $color, $value in $colors-alt {
+    @include navbar-variant($color, $value);
+  }
 }

build/scss/_pagination.scss

@@ -50,8 +50,16 @@
       border-color: $gray-600 !important;
       color: $gray-600;
     }
+
+    .page-link {
+      color: $primary-alt;
+    }
+
     &.active {
       .page-link {
+        background-color: $primary-alt;
+        color: $white;
+
         &:hover,
         &:focus {
           color: $gray-400 !important;
@@ -65,7 +73,7 @@
 
         &:hover,
         &:focus {
-          color: lighten($primary, 5%);
+          color: lighten($primary-alt, 5%);
           background-color: lighten($dark, 5%);
         }
       }

build/scss/_root.scss

@@ -0,0 +1,14 @@
+.dark-mode {
+  :root {
+    // Custom variable values only support SassScript inside `#{}`.
+    @each $color, $value in $colors-alt {
+      --#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-alt {
+      --#{$color}: #{$value};
+    }
+  }
+}
+
+//

build/scss/_text.scss

@@ -42,4 +42,10 @@
   .text-muted {
     color: $gray-500 !important;
   }
+
+  @each $name, $color in $colors-alt {
+    .text-#{$name} {
+      color: #{$color} !important;
+    }
+  }
 }

build/scss/_toasts.scss

@@ -55,9 +55,18 @@
       background-color: rgba($dark, .7);
       color: $gray-100;
     }
+
+    @each $name, $color in $theme-colors-alt {
+      @include toast-variant($name, $color);
+    }
+
+    @each $name, $color in $colors-alt {
+      @include toast-variant($name, $color);
+    }
   }
 }
 
+
 .toast {
   @each $name, $color in $theme-colors {
     @include toast-variant($name, $color);

build/scss/_variables-alt.scss

@@ -0,0 +1,107 @@
+//
+// Core: Variables for Dark Mode
+//
+
+// COLORS
+// --------------------------------------------------------
+
+// stylelint-disable
+// Gray color will be default in dark mode
+$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;
+
+$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);
+
+// Below colors from bootwatch darkly
+$blue-alt:    #3f6791 !default;
+$indigo-alt:  #6610f2 !default;
+$purple-alt:  #6f42c1 !default;
+$pink-alt:    #e83e8c !default;
+$red-alt:     #e74c3c !default;
+$orange-alt:  #fd7e14 !default;
+$yellow-alt:  #f39c12 !default;
+$green-alt:   #00bc8c !default;
+$teal-alt:    #20c997 !default;
+$cyan-alt:    #3498db !default;
+
+// by darken function
+$lightblue-alt: lighten(#3c8dbc, 20%) !default;
+$navy-alt: lighten(#001f3f, 5%) !default;
+$olive-alt: lighten(#3d9970, 20%) !default;
+$lime-alt: lighten(#01ff70, 20%) !default;
+$fuchsia-alt: lighten(#f012be, 20%) !default;
+$maroon-alt: lighten(#d81b60, 20%) !default;
+$gray-x-light-alt: lighten(#d2d6de, 20%) !default;
+
+$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);
+
+$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;
+
+$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);
+
+$colors-alt: map-merge(
+  (
+    "lightblue": $lightblue-alt,
+    "navy": $navy-alt,
+    "olive": $olive-alt,
+    "lime": $lime-alt,
+    "fuchsia": $fuchsia-alt,
+    "maroon": $maroon-alt,
+  ),
+  $colors-alt
+);
+// stylelint-enable
+
+//

build/scss/adminlte.scss

@@ -14,6 +14,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "variables";
+@import "variables-alt";
 @import "mixins";
 
 @import "parts/core";

build/scss/parts/_core.scss

@@ -2,6 +2,7 @@
 // Part: Core
 //
 
+@import "../root";
 @import "../animation-effects";
 @import "../preloader";
 @import "../layout";

build/scss/parts/adminlte.components.scss

@@ -15,6 +15,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "components";

build/scss/parts/adminlte.core.scss

@@ -15,6 +15,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "core";

build/scss/parts/adminlte.extra-components.scss

@@ -15,6 +15,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "extra-components";

build/scss/parts/adminlte.pages.scss

@@ -16,6 +16,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "pages";

build/scss/parts/adminlte.plugins.scss

@@ -15,6 +15,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "plugins";

build/scss/plugins/_bootstrap-slider.scss

@@ -39,4 +39,20 @@
     background-color: lighten($dark, 10%);
     background-image: none;
   }
+
+  @each $name, $color in $theme-colors-alt {
+    .slider-#{$name} .slider {
+      .slider-selection {
+        background: $color;
+      }
+    }
+  }
+
+  @each $name, $color in $colors-alt {
+    .slider-#{$name} .slider {
+      .slider-selection {
+        background: $color;
+      }
+    }
+  }
 }

build/scss/plugins/_bootstrap-switch.scss

@@ -184,5 +184,21 @@ $bootstrap-switch-handle-border-radius: .1rem;
       color: $white;
       border-color: lighten($dark, 7.5%);
     }
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off {
+      @each $name, $color in $theme-colors-alt {
+        &.bootstrap-switch-#{$name} {
+          background: $color;
+          color: color-yiq($color);
+        }
+      }
+
+      @each $name, $color in $colors-alt {
+        &.bootstrap-switch-#{$name} {
+          background: $color;
+          color: color-yiq($color);
+        }
+      }
+    }
   }
 }

build/scss/plugins/_icheck-bootstrap.scss

@@ -47,4 +47,41 @@
       border-color: $gray-600;
     }
   }
+  // iCheck colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+      border-color: #{$color};
+    }
+
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
+      border-color: #{$color};
+    }
+
+    .icheck-#{$name} > input:first-child:checked + label::before,
+    .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
+      background-color: #{$color};
+      border-color: #{$color};
+    }
+  }
+
+  // iCheck colors (colors)
+  @each $name, $color in $colors-alt {
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+      border-color: #{$color};
+    }
+
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
+      border-color: #{$color};
+    }
+
+    .icheck-#{$name} > input:first-child:checked + label::before,
+    .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
+      background-color: #{$color};
+      border-color: #{$color};
+    }
+  }
 }

build/scss/plugins/_select2.scss

@@ -314,4 +314,14 @@ select.form-control-sm ~ {
   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
     color: $white;
   }
+
+  // Background colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    @include select2-variant($name, $color);
+  }
+
+  // Background colors (colors)
+  @each $name, $color in $colors-alt {
+    @include select2-variant($name, $color);
+  }
 }

index.html

@@ -1299,7 +1299,7 @@
               </div>
               <!-- /.card-body -->
               <div class="card-footer clearfix">
-                <button type="button" class="btn btn-info float-right"><i class="fas fa-plus"></i> Add item</button>
+                <button type="button" class="btn btn-primary float-right"><i class="fas fa-plus"></i> Add item</button>
               </div>
             </div>
             <!-- /.card -->