fix(styling): improve button & text colors for Dark Mode

ghiscoding · Apr 17, 2024 · 9414ab4 · 9414ab4
1 parent a8e66f2
commit 9414ab4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss
@@ -143,11 +143,24 @@
       --slick-checkbox-selector-icon-height: 22px;
       --slick-checkbox-selector-icon-bg-color: transparent;
       --slick-checkbox-selector-icon-border: none;
-      --slick-multiselect-icon-radio-color:           var(--slick-primary-color);
+      --slick-multiselect-icon-radio-color: var(--slick-primary-color);
       --ms-checkbox-color: var(--slick-primary-color);
       --ms-checkbox-hover-color: #{lighten(#49a54e, 13%)};
       --ms-ok-button-text-color: #66bb6a;
       --ms-ok-button-text-hover-color: #{lighten(#66bb6a, 5%)};
+
+      .slick-headerrow {
+        .search-filter.filled .input-group-addon.slider-value,
+        .search-filter.filled .input-group-addon.slider-range-value,
+        .search-filter.filled .input-group-addon select {
+          color: var(--slick-filled-filter-color);
+        }
+        input.search-filter.filled,
+        .search-filter.filled input,
+        .search-filter.filled input.flatpickr-input {
+          color: var(--slick-text-color);
+        }
+      }
     }
   }
 }
diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -194,6 +194,7 @@ $slick-pagination-page-input-border-radius:                   3px !default;
 .slick-dark-mode {
   --ms-checkbox-color:                      #3a9ef5;
   --ms-ok-button-text-color:                #3a9ef5;
+  --slick-button-primary-bg-color:          #0057ac;
   --slick-multiselect-icon-checked-color:   #3a9ef5;
   --slick-base-dark-menu-bg-color:          #212121;
   --slick-cell-box-shadow: 0px 1px 0px      #303030, 0px -1px 0px #303030;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -19,6 +19,7 @@ $slick-font-size-base:          			                      $slick-font-size-base-v
 $slick-font-family:                                         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $slick-primary-color:                                       $primary-color !default;
 $slick-btn-default-bg-color:                                #fff !default;
+$slick-btn-default-border-color:                            #ccc !default;
 $slick-button-primary-bg-color:                             $slick-primary-color !default;
 $slick-button-primary-bg-color-disabled:                    #bebebe !default;
 $slick-button-primary-color:                                inherit !default;
@@ -1011,7 +1012,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-button-border-color:                            #626262;
   --slick-button-primary-color:                           #bababa;
   --slick-button-style-bg-color:                          var(--slick-base-dark-menu-bg-color);
-  --slick-btn-default-bg-color:                           #292929;
+  --slick-btn-default-bg-color:                           #383838;
   --slick-cell-even-background-color:                     #141618;
   --slick-cell-odd-background-color:                      #2c3034;
   --slick-cell-text-color:                                #cdcdcd;
@@ -1035,6 +1036,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-checkbox-selector-icon-bg-color:                #444444;
   --slick-checkbox-selector-icon-bg-color:                transparent;
   --slick-checkbox-selector-unchecked-color:              #{lighten($primary-color, 10%)};
+  --slick-btn-default-border-color:                       #565656;
   --slick-grid-menu-icon-btn-color:                       #bbbbbb;
   --slick-row-mouse-hover-color:                          #2c3034;
   --slick-header-background-color:                        #1c1c1c;
@@ -1067,10 +1069,10 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-input-group-addon-color:                        var(--slick-base-dark-text-color);
   --slick-input-group-addon-bg-color:                     #383a3c;
   --slick-input-group-addon-border:                       var(--slick-base-dark-menu-item-border);
-  --slick-input-group-btn-bg-color:                       #292929;
-  --slick-input-group-btn-hover-bg-color:                 #3a3a3a;
+  --slick-input-group-btn-bg-color:                       #383838;
+  --slick-input-group-btn-hover-bg-color:                 #3e3e3e;
   --slick-input-group-btn-border:                         var(--slick-base-dark-menu-item-border);
-  --slick-input-group-append-bg-color:                    #292929;
+  --slick-input-group-append-bg-color:                    #383838;
   --slick-compound-filter-bgcolor:                        var(--slick-base-dark-menu-bg-color);
   --slick-flatpickr-bgcolor:                              var(--slick-base-dark-menu-bg-color);
   --slick-footer-left-text-color:                         #acacac;
@@ -1097,7 +1099,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-editor-modal-checkbox-editor-border:            var(--slick-base-dark-menu-border);
   --slick-editor-modal-footer-btn-border:                 var(--slick-base-dark-menu-item-border);
   --slick-editor-modal-container-box-shadow:              0 0 2px #606060;
-  --slick-editor-modal-reset-btn-bg-color:                #292929;
+  --slick-editor-modal-reset-btn-bg-color:                #383838;
   --slick-editor-modal-close-btn-bg-color:                transparent;
   --slick-editor-modal-close-btn-color:                   #bababa;
   --slick-editor-modal-reset-btn-color:                   #bababa;

diff --git a/packages/common/src/styles/slick-without-bootstrap-min-styling.scss b/packages/common/src/styles/slick-without-bootstrap-min-styling.scss
@@ -20,7 +20,7 @@
   .btn-default {
     color: var(--slick-button-primary-color, $slick-button-primary-color);
     background-color: var(--slick-btn-default-bg-color, $slick-btn-default-bg-color);
-    border-color: #ccc;
+    border-color: var(--slick-btn-default-border-color, $slick-btn-default-border-color);
   }
 
   .btn-primary {