wip - dark mode

resources/assets/dcat/sass/components/_button.scss

@@ -121,7 +121,7 @@ a.btn-sm, .btn-group-sm > a.btn {
 
 
 .btn-outline {
-  background: transparent;
+  background-color: transparent;
 }
 .btn-primary.btn-outline {
   color: $primary;
@@ -144,8 +144,19 @@ a.btn-sm, .btn-group-sm > a.btn {
   border-color: $warning;
 }
 
-.btn-primary.btn-outline:hover, .btn-info.btn-outline:hover, .btn-success.btn-outline:hover, .btn-danger.btn-outline:hover, .btn-warning.btn-outline:hover,
+.btn-primary.btn-outline.disabled,
+.btn-primary.btn-outline:disabled {
+  background: transparent;
+}
+
+.btn-info.btn-outline:hover, .btn-success.btn-outline:hover, .btn-danger.btn-outline:hover, .btn-warning.btn-outline:hover,
 //.btn-primary.btn-outline:focus, .btn-info.btn-outline:focus, .btn-success.btn-outline:focus, .btn-danger.btn-outline:focus, .btn-warning.btn-outline:focus,
-.btn-primary.btn-outline.active, .btn-info.btn-outline.active, .btn-success.btn-outline.active, .btn-danger.btn-outline.active, .btn-warning.btn-outline.active{
+.btn-info.btn-outline.active, .btn-success.btn-outline.active, .btn-danger.btn-outline.active, .btn-warning.btn-outline.active{
   color: $white;
 }
+
+.btn-primary.btn-outline:hover,
+.btn-primary.btn-outline.active {
+  background: rgba($primary, .05);
+}
+

resources/assets/dcat/sass/theme/_colors.scss

@@ -104,7 +104,7 @@ $body-dark-font-color: #a8a9bb;
 $body-dark-heading-color: #ebeefd;
 //$body-dark-table-bg : #212744;
 $body-dark-table-bg: $body-dark-color;
-$body-dark-border-color: #414561;
+$body-dark-border-color: darken(#363950, 2%);
 
 // 灰背景色
 $gray-bg: #f1f1f1;

resources/assets/dcat/sass/theme/_dark.scss

@@ -1,4 +1,19 @@
 
+@mixin dark-scrollbar($selector) {
+  #{$selector}::-webkit-scrollbar {
+    width: 12px;
+  }
+  #{$selector}::-webkit-scrollbar-track {
+    background-color: $body-dark-bg;
+  }
+  #{$selector}::-webkit-scrollbar-thumb {
+    background-color: $body-darker-color;
+    border-radius: .4rem;
+  }
+}
+
+@include dark-scrollbar('body.dark-mode');
+
 body.dark-mode {
   background-color: $body-dark-bg;
   color: $body-dark-font-color;
@@ -11,25 +26,60 @@ body.dark-mode {
     background: $body-dark-bg!important;
   }
 
-  //a {
-  //  color: $primary;
-  //}
+  a {
+    color: lighten($primary, 1%);
+  }
+
+  .grid-column-header a {
+    color: darken($body-dark-font-color, 15%);
+  }
+  .grid-column-header a:hover, .grid-column-header a.active {
+    color: lighten($primary, 1%);
+  }
 
   h1, h2, h3, h4, h5, h6 {
     color: $body-dark-heading-color;
   }
 
-  p, small, span, label {
+  p, small, label {
     color: $body-dark-font-color;
   }
 
   .label {
-    color: $white;
+    color: darken($white, 2.5%);
   }
 
-  .btn.btn-white, .btn.btn-default {
+  .dcat-loading {
+    background-color: inherit!important;
+  }
+
+  .btn.btn-white,
+  .btn.btn-default,
+  .btn.btn-light {
     color: $body-dark-font-color;
-    background: $body-dark-color;
+    background-color: $body-dark-color;
+    border-color: $body-dark-color;
+  }
+  .btn.btn-white:hover,
+  .btn.btn-white:focus,
+  .btn.btn-default:hover,
+  .btn.btn-light:hover {
+    color: lighten($body-dark-font-color, 2%)!important;
+  }
+
+  .btn.btn-light,
+  .bg-light {
+    color: $body-dark-font-color!important;
+    background-color: $body-dark-bg!important;
+    border-color: $body-dark-bg!important;
+  }
+  .bg-default {
+    background-color: $body-dark-color!important;
+    color: $body-dark-font-color!important;
+  }
+
+  .btn-light:hover, .btn-light:focus {
+    color: lighten($body-dark-font-color, 1.2%)!important;
   }
 
   hr {
@@ -50,7 +100,7 @@ body.dark-mode {
   }
   code {
     background-color: $body-content-dark-bg;
-    color: $gray-600;
+    color: $gray-600!important;
   }
   kbd {
     background-color: $body-content-dark-bg;
@@ -101,8 +151,10 @@ body.dark-mode {
   }
 
   .dropdown-menu {
-    background-color: $body-content-dark-bg;
-    &:before,
+    background-color: $body-dark-color;
+    &:before {
+      background: $body-dark-color;
+    }
     .dropdown-item:hover,
     .dropdown-item:focus {
       background: $body-darker-color;
@@ -117,14 +169,17 @@ body.dark-mode {
       border-color: $body-dark-border-color;
     }
   }
+  .dropdown-item a, .dropdown-menu label {
+    color: $body-dark-font-color;
+  }
 
 
   .modal {
     .modal-header,
     .modal-header[class*="bg-"] {
-      background-color: $body-dark-color;
+      border-color: $body-dark-border-color;
+      background-color: lighten($body-dark-color, 1%);
       .close {
-        background-color: $body-content-dark-bg;
         span {
           color: $white50;
         }
@@ -133,7 +188,7 @@ body.dark-mode {
     .modal-content,
     .modal-body,
     .modal-footer {
-      background-color: $body-content-dark-bg;
+      background-color: lighten($body-dark-color, 1%);
       .form-control,
       .picker__input,
       .custom-file-label,
@@ -149,7 +204,6 @@ body.dark-mode {
         &.active {
           background-color: $body-content-dark-bg;
           .page-link {
-            background-color: $primary;
             &:hover {
               color: $white;
             }
@@ -157,10 +211,7 @@ body.dark-mode {
         }
         .page-link {
           background-color: $body-content-dark-bg;
-          color: $white;
-          &:hover {
-            color: $primary;
-          }
+          color: $body-dark-font-color;
         }
         &.prev-item,
         &.next-item {
@@ -173,8 +224,8 @@ body.dark-mode {
     &[class*="pagination-"] {
       .page-item:not(.active):not(:hover) {
         .page-link {
-          background-color: $body-content-dark-bg;
-          color: $white;
+          background-color: $body-darker-color;
+          color: $body-dark-font-color;
         }
       }
       .page-item {
@@ -184,7 +235,7 @@ body.dark-mode {
           }
         }
         &.active {
-          background-color: $body-content-dark-bg;
+          background-color: $body-dark-color;
         }
       }
     }
@@ -194,17 +245,40 @@ body.dark-mode {
     .nav-item {
       .nav-link {
         color: $body-dark-font-color;
-        &.active,
-        &:hover {
-          color: $primary;
-        }
+        //&.active,
+        //&:hover {
+        //  color: $primary;
+        //}
       }
     }
   }
 
+  // ------ tab
+  .nav.nav-tabs {
+    border-color: lighten($body-dark-border-color, 12%);
+  }
+
+  // ------ table
+  @include dark-scrollbar('.table-responsive[data-pattern=priority-columns]');
+
+  .table.default-table td,
+  .table.default-table th {
+    border-color: $body-dark-border-color!important;
+  }
+  .table.default-table {
+    th {
+      background: darken($body-dark-bg, 3%);
+    }
+  }
+
   .table {
     background-color: $body-dark-table-bg;
     padding: 0 1rem;
+
+    th, td {
+      border-color: $body-dark-border-color;
+    }
+
     .thead,
     tbody {
       tr:not([class*="table-"]) {
@@ -229,6 +303,8 @@ body.dark-mode {
     }
     tbody {
       tr {
+        background: $body-content-dark-bg!important;
+
         &[class*="table-"] {
           td,
           th {
@@ -302,30 +378,98 @@ body.dark-mode {
 
   }
 
+  .table.table-bordered {
+    padding: 0;
+  }
+
+  .card, .box {
+    background: $body-darker-color;
+  }
+  .box.box-solid.box-default {
+    background-color: $body-dark-bg;
+  }
+
+  .dd-handle,
+  .card.dcat-box .card-header,
+  .box-header.with-border,
+  .with-border,
+  .box.box-solid.box-default {
+    border-bottom: 1px solid $body-dark-border-color;
+    border-color: $body-dark-border-color!important;
+  }
+
+  .box .box-footer, .card .box-footer {
+    border-color: $body-dark-border-color;
+  }
+
+  .dd-handle {
+    background: $body-dark-color;
+    color: $body-dark-font-color
+  }
+  .dd-item > button:before {
+    color: $body-dark-font-color
+  }
+
+  // ----- 滚动条
+
   // ----- form
+  .input-group-prepend,
+  .input-group-append,
+  .input-group-addon,
   .input-group-text {
+    background-color: $body-dark-bg;
     border-color: $body-dark-border-color;
     color: $body-dark-font-color!important;
   }
+
+  input::-webkit-input-placeholder{
+    color: darken($body-dark-font-color, 1.2%)!important;
+  }
+  input:-moz-placeholder{
+    color: darken($body-dark-font-color, 1.2%)!important;
+  }
+  input::-moz-placeholder{
+    color: darken($body-dark-font-color, 1.2%)!important;
+  }
+  input:-ms-input-placeholder {
+    color: darken($body-dark-font-color, 1.2%)!important;
+  }
+  .help-block {
+    color: darken($body-dark-font-color, 1.2%)!important;
+  }
+
+  @include dark-scrollbar('.select2-container--default .select2-results>.select2-results__options');
+  .select2-container--default .select2-selection--single,
   .select2-container--default .select2-selection--multiple,
   .form-control {
     background: $body-dark-bg;
-    color: $body-dark-font-color;
-    border-color: $body-dark-border-color;
+    color: $body-dark-font-color!important;
+    border-color: $body-dark-border-color!important;
+  }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: $body-dark-font-color!important;
   }
 
+  .select2-container--default .select2-search--dropdown .select2-search__field {
+    background: $body-dark-bg!important;
+    color: $body-dark-font-color!important;
+  }
+
+  .select2-container--default .select2-search--dropdown .select2-search__field,
   .select2-container--default .select2-selection--multiple {
     border-color: $body-dark-border-color!important;
   }
-  .select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child.select2-search.select2-search--inline .select2-search__field {
-    color: $body-dark-font-color!important;
-  }
+
+  //.select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child.select2-search.select2-search--inline .select2-search__field {
+  //  color: $body-dark-font-color!important;
+  //}
   .select2-container--default .select2-results>.select2-results__options {
     background: $body-dark-color!important;
   }
   .select2-dropdown {
     background: $body-dark-color!important;
   }
+  .select2-container--default .select2-results__option[aria-selected=true],
   .select2-container--default .select2-results__option--highlighted[aria-selected] {
     background: $body-darker-color!important;
     color: $body-dark-font-color!important;
@@ -336,12 +480,13 @@ body.dark-mode {
     color: $body-dark-font-color;
   }
 
-
+  // 滚动条
+  @include dark-scrollbar('.layui-layer-page .layui-layer-content');
   .layui-layer {
-    background-color: $body-dark-bg!important;
+    background-color: lighten($body-dark-color, 1%)!important;
   }
   .layui-layer-title {
-    background-color: $body-dark-bg!important;
+    background-color: lighten($body-dark-color, 1%)!important;
     border-bottom: 1px solid $body-dark-border-color!important;
     color: $body-dark-font-color!important;
   }
@@ -356,7 +501,67 @@ body.dark-mode {
     color: $body-dark-font-color!important;
   }
 
-  .web-uploader .placeholder {
-    border-color: $body-dark-font-color!important;
+  .web-uploader {
+    .placeholder {
+      border-width: 2px;
+      border-color: darken($body-dark-font-color, 7%)!important;
+    }
+    .filelist li {
+      background: $body-dark-color!important;
+    }
+    .queueList {
+      border-color: $body-dark-border-color!important;
+    }
+
+    .statusBar .info,
+    .filelist li p.title {
+      color: $body-dark-font-color!important;
+    }
+  }
+
+  // ----- slider
+  .slider-panel {
+    background-color: lighten($body-dark-color, 1.1%);
+  }
+  .right-side-filter-container .header {
+    border-color: $body-dark-border-color;
+    background-color: lighten($body-dark-color, 1.1%);;
+  }
+
+  // ----- sweet2
+  .swal2-popup {
+    background: $body-dark-color;
+
+    h2 {
+      color: $body-dark-font-color
+    }
+  }
+  .swal2-content {
+    color: darken($body-dark-font-color, 1.5%)
+  }
+
+
+  // ---- quick create
+  .quick-create {
+    td {
+      background-color: lighten($body-dark-color, 3%)!important;
+      color: darken($body-dark-font-color, 5%)
+    }
+  }
+
+  // ----- iconpicker
+  @include dark-scrollbar('.iconpicker .iconpicker-items');
+
+  .iconpicker-popover.popover .popover-title,
+  .iconpicker .iconpicker-items,
+  .iconpicker-popover.popover {
+    background: $body-dark-color!important;
+    border-color: $body-dark-border-color!important;
+  }
+
+  .iconpicker-popover.popover .popover-title,
+  .iconpicker-popover.popover.bottom>.arrow:after,
+  .iconpicker-popover.popover.bottomRight>.arrow:after, .iconpicker-popover.popover.bottomLeft>.arrow:after {
+    border-color: $body-dark-color;
   }
 }