add dark-mode in some components

build/scss/_buttons.scss

@@ -112,3 +112,31 @@
 .btn-xs {
   @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 {
+  .btn-default,
+  .btn-app {
+    background-color: lighten($dark, 2.5%);
+    color: $white;
+    border-color: $gray-600;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($dark, 5%);
+      color: $gray-300;
+      border-color: lighten($gray-600, 2.5%);
+    }
+  }
+  .btn-light {
+    background-color: lighten($dark, 7.5%);
+    color: $white;
+    border-color: $gray-600;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($dark, 10%);
+      color: $gray-300;
+      border-color: lighten($gray-600, 5%);
+    }
+  }
+}

build/scss/_callout.scss

@@ -49,3 +49,9 @@
     border-left-color: darken(theme-color("success"), 10%);
   }
 }
+
+.dark-mode {
+  .callout {
+    background-color: lighten($dark, 5%);
+  }
+}

build/scss/_cards.scss

@@ -96,7 +96,7 @@
 
         .nav-item {
           &:first-child .nav-link {
-            margin-left: -1px;
+            border-left-color: transparent;
           }
         }
       }
@@ -478,3 +478,40 @@ html.maximized-card {
     }
   }
 }
+
+.dark-mode {
+
+  .card {
+    background-color: $dark;
+    color: color-yiq($dark);
+
+    .nav.flex-column > li {
+      border-bottom-color: $gray-600;
+    }
+    .card-footer {
+      background-color: rgba($black, .1);
+    }
+    &.card-outline-tabs .card-header a:hover {
+      border-color: $gray-600;
+    }
+    &:not(.card-outline) > .card-header a.active {
+      color: $white;
+    }
+  }
+
+  .card-comments {
+    background-color: lighten($dark, 1.25%);
+    .username {
+      color: $gray-400;
+    }
+    .card-comment {
+      border-bottom-color: lighten($dark, 7.5%);
+    }
+  }
+
+  .todo-list > li {
+    background-color: lighten($dark, 5%);
+    border-color: lighten($dark, 7.5%);
+    color: $white;
+  }
+}

build/scss/_colors.scss

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

build/scss/_direct-chat.scss

@@ -222,3 +222,23 @@
     @include direct-chat-variant($color);
   }
 }
+
+.dark-mode {
+  .direct-chat-text {
+    background-color: lighten($dark, 7.5%);
+    border-color: lighten($dark, 10%);
+    color: $white;
+
+    &::after,
+    &::before {
+      border-right-color: lighten($dark, 10%);
+    }
+
+  }
+  .right > .direct-chat-text {
+    &::after,
+    &::before {
+      border-right-color: transparent;
+    }
+  }
+}

build/scss/_dropdown.scss

@@ -269,3 +269,21 @@
     width: $sidebar-user-image-width;
   }
 }
+
+.dark-mode {
+  .dropdown-menu {
+    background-color: $dark;
+    color: $white;
+  }
+  .dropdown-item {
+    color: $white;
+
+    &:focus,
+    &:hover {
+      background-color: lighten($dark, 5%);
+    }
+  }
+  .dropdown-divider {
+    border-color: $gray-600;
+  }
+}

build/scss/_forms.scss

@@ -330,3 +330,41 @@ body.text-sm {
     @include gradient-bg(transparent);
   }
 }
+
+.dark-mode {
+  .form-control:not(.form-control-navbar):not(.is-invalid),
+  .custom-select,
+  .custom-file-label,
+  .custom-file-label::after,
+  .custom-control-label::before,
+  .input-group-text {
+    background-color: $dark;
+    border-color: $gray-600;
+    color: $white;
+  }
+
+  select {
+    background-color: $dark;
+    color: $white;
+    border-color: $gray-600;
+  }
+
+  .custom-control-input:disabled ~ .custom-control-label::before,
+  .custom-control-input[disabled] ~ .custom-control-label::before {
+    background-color: lighten($dark, 5%);
+    border-color: $gray-600;
+    color: $white;
+  }
+
+  .custom-range {
+    &::-webkit-slider-runnable-track {
+      background-color: lighten($dark, 7.5%);
+    }
+    &::-moz-range-track {
+      background-color: lighten($dark, 7.5%);
+    }
+    &::-ms-track {
+      background-color: lighten($dark, 7.5%);
+    }
+  }
+}

build/scss/_info-box.scss

@@ -144,3 +144,10 @@
     }
   }
 }
+
+.dark-mode {
+  .info-box {
+    background-color: $dark;
+    color: $white;
+  }
+}

build/scss/_layout.scss

@@ -625,3 +625,26 @@ body:not(.sidebar-mini-md) {
     animation-duration: 0s !important;
   }
 }
+
+.dark-mode {
+  background-color: lighten($dark, 7.5%);
+
+  .breadcrumb-item {
+    &.active,
+    & + .breadcrumb-item::before {
+      color: $gray-500;
+    }
+  }
+  .main-footer {
+    background-color: $dark;
+    border-color: lighten($dark, 10%);
+  }
+  .content-wrapper {
+    background-color: lighten($dark, 7.5%);
+    color: $white;
+
+    .content-header {
+      color: $white;
+    }
+  }
+}

build/scss/_miscellaneous.scss

@@ -481,3 +481,27 @@ blockquote {
 .badge-btn.badge-pill {
   padding: .375rem .6rem;
 }
+
+.dark-mode {
+  a:hover {
+    color: lighten($link-color, 10%);
+  }
+  .attachment-block {
+    background-color: lighten($dark, 3.75%);
+
+    .attachment-text {
+      color: $gray-400;
+    }
+  }
+  blockquote {
+    background-color: lighten($dark, 5%);
+  }
+  .close,
+  .mailbox-attachment-close {
+    color: $gray-500;
+    text-shadow: 0 1px 0 $gray-700;
+  }
+  .tab-custom-content {
+    border-color: $gray-600;
+  }
+}

build/scss/_modals.scss

@@ -38,3 +38,35 @@
     }
   }
 }
+
+.dark-mode {
+  .modal-header,
+  .modal-footer {
+    border-color: $gray-600;
+  }
+  .modal-content {
+    background-color: $dark;
+
+    &.bg-warning {
+      .modal-header,
+      .modal-footer {
+        border-color: $gray-600;
+      }
+      .close {
+        color: $dark !important;
+        text-shadow: 0 1px 0 $gray-700 !important;
+      }
+    }
+
+    &.bg-primary,
+    &.bg-secondary,
+    &.bg-info,
+    &.bg-danger,
+    &.bg-success {
+      .modal-header,
+      .modal-footer {
+        border-color: $white;
+      }
+    }
+  }
+}

build/scss/_navs.scss

@@ -81,6 +81,9 @@
   @if $color == dark or $color == light {
     .navbar-#{$color} {
       background-color: $value;
+      @if $color == dark {
+        border-color: lighten($dark, 10%);
+      }
     }
   }
 }
@@ -98,3 +101,49 @@
     background-color: $value;
   }
 }
+
+.dark-mode {
+  .nav-pills .nav-link {
+    color: $gray-400;
+  }
+  .nav-tabs {
+    border-color: lighten($dark, 15%);
+
+    .nav-link:focus,
+    .nav-link:hover {
+      border-color: lighten($dark, 15%);
+    }
+
+    .nav-item.show .nav-link,
+    .nav-link.active {
+      background-color: $dark;
+      border-color: lighten($dark, 15%) lighten($dark, 15%) transparent lighten($dark, 15%);
+      color: $white;
+    }
+
+    &.flex-column {
+      .nav-item.show .nav-link,
+      .nav-link {
+        &.active,
+        &:focus,
+        &:hover {
+          border-color: lighten($dark, 15%) transparent lighten($dark, 15%) lighten($dark, 15%);
+        }
+        &:focus,
+        &:hover {
+          background-color: lighten($dark, 5%);
+        }
+      }
+      &.nav-tabs-right {
+        border-color: lighten($dark, 15%);
+        .nav-link {
+          &.active,
+          &:focus,
+          &:hover {
+            border-color: lighten($dark, 15%) lighten($dark, 15%) lighten($dark, 15%) transparent;
+          }
+        }
+      }
+    }
+  }
+}

build/scss/_pagination.scss

@@ -40,3 +40,33 @@
     }
   }
 }
+
+.dark-mode {
+  .page-item {
+    &.disabled .page-link {
+      background-color: lighten($dark, 2.5%);
+      border-color: $gray-600;
+      color: $gray-600;
+    }
+    &.active {
+      .page-link {
+        &:hover,
+        &:focus {
+          color: $gray-400;
+        }
+      }
+    }
+    &:not(.active) {
+      .page-link {
+        background-color: $dark;
+        border-color: $gray-600;
+
+        &:hover,
+        &:focus {
+          color: lighten($primary, 5%);
+          background-color: lighten($dark, 5%);
+        }
+      }
+    }
+  }
+}

build/scss/_products.scss

@@ -16,6 +16,7 @@
 
     background-color: $white;
     padding: 10px 0;
+
   }
 
   .product-img {
@@ -52,3 +53,16 @@
     border-bottom-width: 0;
   }
 }
+
+
+.dark-mode {
+  .products-list > .item {
+    background-color: $dark;
+    color: $white;
+    border-bottom-color: $gray-600;
+  }
+
+  .product-description {
+    color: $gray-400;
+  }
+}

build/scss/_progress-bars.scss

@@ -64,3 +64,9 @@
     }
   }
 }
+
+.dark-mode {
+  .progress {
+    background: lighten($dark, 7.5%);
+  }
+}

build/scss/_table.scss

@@ -120,3 +120,34 @@
     }
   }
 }
+
+.dark-mode {
+  .table-bordered {
+    &,
+    td,
+    th {
+      border-color: $gray-600;
+    }
+  }
+  .table-hover {
+    tbody tr:hover {
+      color: $gray-300;
+      background-color: lighten($dark, 2.5%);
+      border-color: $gray-600;
+    }
+  }
+  .table {
+    thead th {
+      border-bottom-color: $gray-600;
+    }
+    th,
+    td {
+      border-top-color: $gray-600;
+    }
+    &.table-head-fixed {
+      thead tr:nth-child(1) th {
+        background-color: lighten($dark, 5%);
+      }
+    }
+  }
+}

build/scss/_text.scss

@@ -37,3 +37,9 @@
     color: #{$color} !important;
   }
 }
+
+.dark-mode {
+  .text-muted {
+    color: $gray-500 !important;
+  }
+}

build/scss/_timeline.scss

@@ -132,3 +132,14 @@
     }
   }
 }
+
+.dark-mode {
+  .timeline > div > .timeline-item {
+    background-color: $dark;
+    color: $white;
+
+    > .timeline-header {
+      color: $gray-500;
+    }
+  }
+}

build/scss/_toasts.scss

@@ -46,6 +46,18 @@
   }
 }
 
+.dark-mode {
+  .toast {
+    background-color: rgba($dark, .85);
+    color: $white;
+
+    .toast-header {
+      background-color: rgba($dark, .7);
+      color: $gray-100;
+    }
+  }
+}
+
 .toast {
   @each $name, $color in $theme-colors {
     @include toast-variant($name, $color);

build/scss/_users-list.scss

@@ -43,3 +43,12 @@
   color: darken($gray-500, 20%);
   font-size: 12px;
 }
+
+.dark-mode {
+  .users-list-name {
+    color: $gray-400;
+  }
+  .users-list-date {
+    color: $gray-500;
+  }
+}

build/scss/mixins/_accent.scss

@@ -4,8 +4,8 @@
 
 // Accent Variant
 @mixin accent-variant($name, $color) {
+  $link-color: $color;
   .accent-#{$name} {
-    $link-color: $color;
     $link-hover-color: darken($color, 15%);
     $pagination-active-bg: $color;
     $pagination-active-border-color: $color;
@@ -90,5 +90,14 @@
       }
     }
   }
+  .dark-mode.accent-#{$name} {
+    .page-item {
+      .page-link {
+        &:hover,
+        &:focus {
+          color: lighten($link-color, 5%);
+        }
+      }
+    }
+  }
 }
-

build/scss/plugins/_bootstrap-slider.scss

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

build/scss/plugins/_bootstrap-switch.scss

@@ -173,3 +173,16 @@ $bootstrap-switch-handle-border-radius: .1rem;
     border-top-left-radius: $bootstrap-switch-handle-border-radius;
   }
 }
+
+.dark-mode {
+  .bootstrap-switch {
+    border-color: $gray-600;
+
+    .bootstrap-switch-handle-off.bootstrap-switch-default,
+    .bootstrap-switch-handle-on.bootstrap-switch-default {
+      background-color: lighten($dark, 2.5%);
+      color: $white;
+      border-color: lighten($dark, 7.5%);
+    }
+  }
+}

build/scss/plugins/_miscellaneous.scss

@@ -37,3 +37,29 @@
   overflow: hidden;
   position: relative;
 }
+
+
+.dark-mode {
+  .irs--flat .irs-line {
+    background-color: lighten($dark, 10%);
+  }
+  .jsgrid-edit-row > .jsgrid-cell,
+  .jsgrid-filter-row > .jsgrid-cell,
+  .jsgrid-grid-body, .jsgrid-grid-header,
+  .jsgrid-header-row > .jsgrid-header-cell,
+  .jsgrid-insert-row > .jsgrid-cell,
+  .jsgrid-row > .jsgrid-cell,
+  .jsgrid-alt-row > .jsgrid-cell {
+    border-color: $gray-600;
+  }
+  .jsgrid-header-row > .jsgrid-header-cell,
+  .jsgrid-row > .jsgrid-cell {
+    background-color: $dark;
+  }
+  .jsgrid-alt-row > .jsgrid-cell {
+    background-color: lighten($dark, 2.5%);
+  }
+  .jsgrid-selected-row > .jsgrid-cell {
+    background-color: lighten($dark, 5%);
+  }
+}

build/scss/plugins/_select2.scss

@@ -272,3 +272,46 @@ select.form-control-sm ~ {
 @each $name, $color in $colors {
   @include select2-variant($name, $color);
 }
+
+.dark-mode {
+  .select2-selection {
+    background-color: $dark;
+    border-color: $gray-600;
+  }
+
+  .select2-container--disabled .select2-selection--single {
+    background-color: lighten($dark, 7.5%);
+  }
+
+  .select2-selection--single {
+    background-color: $dark;
+    border-color: $gray-600;
+
+    .select2-selection__rendered {
+      color: $white;
+    }
+  }
+  .select2-dropdown .select2-search__field,
+  .select2-search--inline .select2-search__field {
+    background-color: $dark;
+    border-color: $gray-600;
+    color: white;
+  }
+  .select2-dropdown {
+    background-color: $dark;
+    border-color: $gray-600;
+    color: white;
+  }
+  .select2-results__option[aria-selected="true"] {
+    background-color: lighten($dark, 5%) !important;
+    color: $gray-300;
+  }
+  .select2-container .select2-search--inline .select2-search__field {
+    background-color: transparent;
+    color: $white;
+  }
+
+  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
+    color: $white;
+  }
+}

build/scss/plugins/_sweetalert2.scss

@@ -36,5 +36,16 @@
       background-color: $success;
     }
   }
-
+}
+
+.dark-mode {
+  .swal2-popup {
+    background-color: $dark;
+    color: $gray-200;
+
+    .swal2-content,
+    .swal2-title {
+      color: $gray-200;
+    }
+  }
 }