fix: improve Dark Mode styling for icons barely visible in dark

ghiscoding · Mar 26, 2024 · 16b1a6e · 16b1a6e
1 parent 20229f7
commit 16b1a6e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -204,6 +204,5 @@ $slick-pagination-page-input-border-radius:                   3px !default;
   --slick-highlight-color:                  #0389ff;
   --slick-pagination-icon-color:            #1190ff;
   --slick-row-mouse-hover-box-shadow:       0 0 0 2px #3a3a3a;
-  --slick-checkbox-selector-opacity:        1;
-  --slick-checkbox-selector-icon-border:    1px solid #838383;
+  --slick-checkbox-selector-icon-border:    1px solid #888888;
 }
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -1019,6 +1019,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-column-picker-background-color:                 var(--slick-base-dark-menu-bg-color);
   --slick-column-picker-box-shadow:                       0 0 1px #606060;
   --slick-column-picker-border:                           var(--slick-base-dark-menu-border);
+  --slick-column-picker-close-btn-color:                  #bbbbbb;
   --slick-column-picker-checkbox-opacity:                 0.25;
   --slick-column-picker-checkbox-opacity-hover:           0.45;
   --slick-column-picker-close-btn-bg-color:               transparent;
@@ -1028,8 +1029,8 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-column-picker-item-hover-color:                 var(--slick-base-dark-menu-item-hover-color);
   --slick-column-picker-item-hover-border:                var(--slick-base-dark-menu-item-border);
   --slick-column-picker-title-border-bottom:              1px solid #525252;
-  --slick-checkbox-selector-opacity:                      0.25;
-  --slick-checkbox-selector-opacity-hover:                0.45;
+  --slick-checkbox-selector-opacity:                      0.7;
+  --slick-checkbox-selector-opacity-hover:                0.85;
   --slick-checkbox-selector-checked-color:                var(--slick-highlight-color);
   --slick-checkbox-selector-icon-bg-color:                #444444;
   --slick-checkbox-selector-icon-bg-color:                transparent;
@@ -1049,7 +1050,8 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-menu-bg-color:                                  var(--slick-base-dark-menu-bg-color);
   --slick-menu-border:                                    var(--slick-base-dark-menu-border);
   --slick-menu-box-shadow:                                0 0 1px #606060;
-  --slick-menu-close-btn-bg-color:                        #1c1c1c;
+  --slick-menu-close-btn-bg-color:                        transparent;
+  --slick-menu-close-btn-color:                           #bbbbbb;
   --slick-menu-color:                                     #bbbbbb;
   --slick-menu-divider-color:                             #606060;
   --slick-menu-item-hover-color:                          var(--slick-base-dark-menu-bg-color);