Merge pull request #3595 from danny007in/light-mode-only

feat: light mode only alt css

.bundlewatch.config.json

@@ -32,6 +32,14 @@
       "path": "./dist/css/alt/adminlte.extra-components.min.css",
       "maxSize": "4.5 kB"
     },
+    {
+      "path": "./dist/css/alt/adminlte.light.css",
+      "maxSize": "94 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.light.min.css",
+      "maxSize": "89 kB"
+    },
     {
       "path": "./dist/css/alt/adminlte.pages.css",
       "maxSize": "3.5 kB"

build/scss/_alerts.scss

@@ -35,7 +35,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   @each $color, $value in $theme-colors-alt {
     .alert-#{$color} {
       color: color-yiq($value);

build/scss/_buttons.scss

@@ -113,7 +113,7 @@
   @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
 }
 
-.dark-mode {
+@include dark-mode () {
   .btn-default,
   .btn-app {
     background-color: lighten($dark, 2.5%);

build/scss/_callout.scss

@@ -50,7 +50,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .callout {
     background-color: lighten($dark, 5%);
 

build/scss/_cards.scss

@@ -479,7 +479,7 @@ html.maximized-card {
   }
 }
 
-.dark-mode {
+@include dark-mode () {
 
   // Color variants
   @each $name, $color in $theme-colors-alt {

build/scss/_colors.scss

@@ -90,7 +90,7 @@ a.text-muted:hover {
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .bg-light {
     background-color: lighten($dark, 7.5%) !important;
     color: $white !important;

build/scss/_direct-chat.scss

@@ -223,7 +223,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .direct-chat-text {
     background-color: lighten($dark, 7.5%);
     border-color: lighten($dark, 10%);

build/scss/_dropdown.scss

@@ -244,7 +244,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .dropdown-menu {
     background-color: $dark;
     color: $white;

build/scss/_forms.scss

@@ -358,7 +358,7 @@ body.text-sm {
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .form-control:not(.form-control-navbar):not(.form-control-sidebar),
   .custom-select,
   .custom-file-label,

build/scss/_info-box.scss

@@ -145,7 +145,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .info-box {
     background-color: $dark;
     color: $white;

build/scss/_layout.scss

@@ -651,7 +651,7 @@ body:not(.layout-fixed) {
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   background-color: $dark-main-bg;
   color: $white;
 

build/scss/_main-sidebar.scss

@@ -1155,7 +1155,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   @each $name, $color in $theme-colors-alt {
     .sidebar-dark-#{$name},
     .sidebar-light-#{$name} {

build/scss/_miscellaneous.scss

@@ -482,7 +482,7 @@ blockquote {
   padding: .375rem .6rem;
 }
 
-.dark-mode {
+@include dark-mode () {
   a:not(.btn):hover {
     color: lighten($link-color, 10%);
   }

build/scss/_mixins.scss

@@ -10,6 +10,7 @@
 @import "mixins/accent";
 @import "mixins/custom-forms";
 @import "mixins/backgrounds";
+@import "mixins/dark-mode";
 @import "mixins/direct-chat";
 @import "mixins/toasts";
 @import "mixins/touch-support";

build/scss/_modals.scss

@@ -43,7 +43,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .modal-header,
   .modal-footer {
     border-color: $gray-600;

build/scss/_navs.scss

@@ -98,7 +98,7 @@
   @include navbar-variant($color, $value);
 }
 
-.dark-mode {
+@include dark-mode () {
   .nav-pills .nav-link {
     color: $gray-400;
   }

build/scss/_pagination.scss

@@ -42,7 +42,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .page-item {
     &.disabled a,
     &.disabled .page-link {

build/scss/_preloader.scss

@@ -14,7 +14,7 @@
   z-index: $zindex-preloader;
 }
 
-.dark-mode {
+@include dark-mode () {
   .preloader {
     background-color: $dark-main-bg;
     color: $white;

build/scss/_products.scss

@@ -55,7 +55,7 @@
 }
 
 
-.dark-mode {
+@include dark-mode () {
   .products-list > .item {
     background-color: $dark;
     color: $white;

build/scss/_progress-bars.scss

@@ -65,7 +65,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .progress {
     background: lighten($dark, 7.5%);
   }

build/scss/_root.scss

@@ -1,4 +1,4 @@
-.dark-mode {
+@include dark-mode () {
   :root {
     // Custom variable values only support SassScript inside `#{}`.
     @each $color, $value in $colors-alt {

build/scss/_table.scss

@@ -123,7 +123,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .table-bordered {
     &,
     td,

build/scss/_text.scss

@@ -38,7 +38,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .text-muted {
     color: $gray-500 !important;
   }

build/scss/_timeline.scss

@@ -133,7 +133,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .timeline {
     &::before {
       background-color: $gray-600;

build/scss/_toasts.scss

@@ -46,7 +46,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .toast {
     background-color: rgba($dark, .85);
     color: $white;

build/scss/_users-list.scss

@@ -44,7 +44,7 @@
   font-size: 12px;
 }
 
-.dark-mode {
+@include dark-mode () {
   .users-list-name {
     color: $gray-400;
   }

build/scss/_variables.scss

@@ -240,3 +240,9 @@ $ribbon-xl-right: 4px !default;
 $custom-select-dark-indicator-color:     $white !default;
 $custom-select-dark-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-dark-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
 $custom-select-dark-background:          escape-svg($custom-select-dark-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+
+// ENABLE DARK MODE
+// --------------------------------------------------------
+$enable-dark-mode: true !default;  // requires `@import "variables-alt";`
+
+//

build/scss/mixins/_accent.scss

@@ -91,12 +91,14 @@
       }
     }
   }
-  .dark-mode.accent-#{$name} {
-    .page-item {
-      .page-link {
-        &:hover,
-        &:focus {
-          color: lighten($link-color, 5%);
+  @include dark-mode () {
+    &.accent-#{$name} {
+      .page-item {
+        .page-link {
+          &:hover,
+          &:focus {
+            color: lighten($link-color, 5%);
+          }
         }
       }
     }

build/scss/mixins/_dark-mode.scss

@@ -0,0 +1,11 @@
+//
+// Mixins: Dark Mode Controll
+//
+
+@mixin dark-mode {
+  @if $enable-dark-mode {
+    .dark-mode {
+      @content;
+    }
+  }
+}

build/scss/pages/_invoice.scss

@@ -12,7 +12,7 @@
   margin-top: 0;
 }
 
-.dark-mode {
+@include dark-mode () {
   .invoice {
     background-color: $dark;
   }

build/scss/pages/_lockscreen.scss

@@ -77,7 +77,7 @@
   margin-top: 10px;
 }
 
-.dark-mode {
+@include dark-mode () {
   .lockscreen-item {
     background-color: $dark;
   }

build/scss/pages/_login_and_register.scss

@@ -102,7 +102,7 @@
   margin: 10px 0;
 }
 
-.dark-mode {
+@include dark-mode () {
   .login-card-body,
   .register-card-body {
     background-color: $dark;

build/scss/pages/_profile.scss

@@ -36,7 +36,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .post {
     color: $white;
     border-color: $gray-600;

build/scss/parts/adminlte.light.scss

@@ -0,0 +1,16 @@
+/*!
+ *   AdminLTE v3.1.0
+ *     Without Dark mode
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// DISABLE DARK MODE
+$enable-dark-mode: false !default;  // stylelint-disable-line
+
+// AdminLTE Original file
+// ---------------------------------------------------
+@import "../adminlte";
+
+//

build/scss/plugins/_bootstrap-slider.scss

@@ -34,7 +34,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .slider-track {
     background-color: lighten($dark, 10%);
     background-image: none;

build/scss/plugins/_bootstrap-switch.scss

@@ -174,7 +174,7 @@ $bootstrap-switch-handle-border-radius: .1rem;
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .bootstrap-switch {
     border-color: $gray-600;
 

build/scss/plugins/_icheck-bootstrap.scss

@@ -40,7 +40,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   [class*="icheck-"] > input:first-child:not(:checked) {
     + input[type="hidden"] + label::before,
     + label::before {

build/scss/plugins/_miscellaneous.scss

@@ -39,7 +39,7 @@
 }
 
 
-.dark-mode {
+@include dark-mode () {
   .irs--flat .irs-line {
     background-color: lighten($dark, 10%);
   }

build/scss/plugins/_select2.scss

@@ -273,7 +273,7 @@ select.form-control-sm ~ {
   @include select2-variant($name, $color);
 }
 
-.dark-mode {
+@include dark-mode () {
   .select2-selection {
     background-color: $dark;
     border-color: $gray-600;

build/scss/plugins/_sweetalert2.scss

@@ -38,7 +38,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .swal2-popup {
     background-color: $dark;
     color: $gray-200;