dark mode fixes

tabler · Nov 3, 2020 · 85bad48 · 85bad48
1 parent 7949f92
commit 85bad48
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 21 deletions.
diff --git a/src/scss/_dark.scss b/src/scss/_dark.scss
@@ -7,7 +7,7 @@
   }
 
   .card,
-  .footer,
+  .footer:not(.footer-transparent),
   .modal-content,
   .modal-header,
   .dropdown-menu,

diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
@@ -77,40 +77,40 @@ $utilities: (
   "border": (
     property: border,
     values: (
-      null: $border-width solid $border-color,
-      wide: $border-width-wide solid $border-color,
+      null: $border-width solid $border-color-transparent,
+      wide: $border-width-wide solid $border-color-transparent,
       0: 0,
     )
   ),
   "border-top": (
     property: border-top,
     values: (
-      null: $border-width solid $border-color,
-      wide: $border-width-wide solid $border-color,
+      null: $border-width solid $border-color-transparent,
+      wide: $border-width-wide solid $border-color-transparent,
       0: 0,
     )
   ),
   "border-right": (
     property: border-right,
     values: (
-      null: $border-width solid $border-color,
-      wide: $border-width-wide solid $border-color,
+      null: $border-width solid $border-color-transparent,
+      wide: $border-width-wide solid $border-color-transparent,
       0: 0,
     )
   ),
   "border-bottom": (
     property: border-bottom,
     values: (
-      null: $border-width solid $border-color,
-      wide: $border-width-wide solid $border-color,
+      null: $border-width solid $border-color-transparent,
+      wide: $border-width-wide solid $border-color-transparent,
       0: 0,
     )
   ),
   "border-left": (
     property: border-left,
     values: (
-      null: $border-width solid $border-color,
-      wide: $border-width-wide solid $border-color,
+      null: $border-width solid $border-color-transparent,
+      wide: $border-width-wide solid $border-color-transparent,
       0: 0,
     )
   ),

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -73,7 +73,7 @@ $text-muted-light-opacity: .4 !default;
 $border-opacity: .16 !default;
 $border-dark-opacity: .24 !default;
 
-$light: #f5f7fb !default;
+$light: #f0f3f6 !default;
 $dark: #354052 !default;
 
 $body-bg: $light !default;
@@ -299,7 +299,7 @@ $btn-font-weight: $font-weight-medium !default;
 $btn-border-radius: 3px !default;
 
 //cards
-$card-border-color: $border-color !default;
+$card-border-color: $border-color-transparent !default;
 $card-border-radius: $border-radius !default;
 $card-cap-bg: $min-black !default;
 
@@ -391,11 +391,13 @@ $navbar-padding-y: .25rem !default;
 
 $navbar-light-color: rgba($body-color, $text-muted-opacity) !default;
 $navbar-light-brand-color: $body-color !default;
+$navbar-light-border-color: $border-color-transparent !default;
 $navbar-light-active-color: $body-color !default;
 $navbar-light-disabled-color: rgba($body-color, .3) !default;
 
 $navbar-dark-color: rgba($white, $text-muted-opacity) !default;
 $navbar-dark-brand-color: $white !default;
+$navbar-light-border-color: $border-color-transparent !default;
 $navbar-dark-active-color: $white !default;
 $navbar-dark-disabled-color: rgba($white, .3) !default;
 
@@ -452,15 +454,15 @@ $spinner-border-width-sm: 1px !default;
 
 //tables
 $table-color: inherit !default;
-$table-head-border-color: $border-color !default;
+$table-border-color: $border-color-transparent !default;
+$table-head-border-color: $border-color-transparent !default;
 $table-head-padding-y: .5rem !default;
 $table-head-color: $text-muted !default;
 $table-head-bg: $min-black !default;
-$table-group-seperator-color: $border-color !default;
 $table-striped-order: even !default;
 $table-striped-bg: $min-black !default;
 $table-accent-bg: $min-black !default;
-$table-group-separator-color: $border-color !default;
+$table-group-separator-color: $border-color-transparent !default;
 
 //toasts
 $toast-border-color: $border-color !default;
@@ -479,7 +481,7 @@ $list-group-action-color: inherit !default;
 $list-group-bg: inherit !default;
 
 $input-disabled-bg: $gray-100 !default;
-$input-border-color: $border-color-dark !default;
+$input-border-color: $border-color-dark-transparent !default;
 $input-placeholder-color: $text-muted-light !default;
 
 $input-group-addon-bg: $min-black !default;

diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
@@ -298,7 +298,7 @@ Navbar toggler
 Navbar light
  */
 .navbar-light {
-  box-shadow: inset 0 -1px 0 0 $border-color;
+  box-shadow: inset 0 -1px 0 0 $navbar-light-border-color;
   background-color: $white;
 }
 

diff --git a/src/scss/mixins/_functions.scss b/src/scss/mixins/_functions.scss
@@ -2,8 +2,12 @@
   @return red($hex), green($hex), blue($hex);
 }
 
-@function theme-color-lighter($color) {
-  @return tint-color($color, 90%);
+@function theme-color-lighter($color, $transparent: false) {
+  @if ($transparent) {
+    @return rgba($color, .1);
+  } @else {
+    @return tint-color($color, 90%);
+  }
 }
 
 @function theme-color-darker($color) {

diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss
@@ -27,7 +27,7 @@ SOCIAL COLORS
 
     .bg-#{$color}-lt {
       color: $value !important;
-      background: theme-color-lighter($value) !important;
+      background: theme-color-lighter($value, true) !important;
     }
   }
 }