lux: set background color on modal in dark mode, #1336

Author: thomaspark

dist/lux/_bootswatch.scss

@@ -293,3 +293,12 @@ th {
     --bs-popover-border-width: 1px;
   }
 }
+
+
+@include color-mode(dark) {
+  .modal-content,
+  .popover,
+  .toast {
+    background-color: lighten($gray-900, 5%);
+  }
+}

dist/lux/_variables.scss

@@ -117,3 +117,8 @@ $pagination-disabled-border-color:  $pagination-border-color !default;
 // Popovers
 
 $popover-header-bg:                 transparent !default;
+$popover-header-color:              var(--bs-popover-header-color) !default;
+
+// Toasts
+
+$toast-header-background-color:     transparent !default;

dist/lux/bootstrap.css

@@ -5184,7 +5184,7 @@ textarea.form-control-lg {
   --bs-toast-border-radius: var(--bs-border-radius);
   --bs-toast-box-shadow: var(--bs-box-shadow);
   --bs-toast-header-color: var(--bs-secondary-color);
-  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
+  --bs-toast-header-bg: transparent;
   --bs-toast-header-border-color: var(--bs-border-color-translucent);
   width: var(--bs-toast-max-width);
   max-width: 100%;
@@ -5609,7 +5609,7 @@ textarea.form-control-lg {
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
   --bs-popover-header-font-size: 1rem;
-  --bs-popover-header-color: #1a1a1a;
+  --bs-popover-header-color: var(--bs-popover-header-color);
   --bs-popover-header-bg: transparent;
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: 1rem;
@@ -12034,4 +12034,10 @@ th {
 }
 .popover .popover-arrow {
   --bs-popover-border-width: 1px;
+}
+
+[data-bs-theme=dark] .modal-content,
+[data-bs-theme=dark] .popover,
+[data-bs-theme=dark] .toast {
+  background-color: #272727;
 }

dist/lux/bootstrap.min.css

@@ -5182,7 +5182,7 @@ textarea.form-control-lg {
   --bs-toast-border-radius: var(--bs-border-radius);
   --bs-toast-box-shadow: var(--bs-box-shadow);
   --bs-toast-header-color: var(--bs-secondary-color);
-  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
+  --bs-toast-header-bg: transparent;
   --bs-toast-header-border-color: var(--bs-border-color-translucent);
   width: var(--bs-toast-max-width);
   max-width: 100%;
@@ -5599,7 +5599,7 @@ textarea.form-control-lg {
   --bs-popover-header-padding-x: 1rem;
   --bs-popover-header-padding-y: 0.5rem;
   --bs-popover-header-font-size: 1rem;
-  --bs-popover-header-color: #1a1a1a;
+  --bs-popover-header-color: var(--bs-popover-header-color);
   --bs-popover-header-bg: transparent;
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: 1rem;
@@ -12008,4 +12008,10 @@ th {
 }
 .popover .popover-arrow {
   --bs-popover-border-width: 1px;
+}
+
+[data-bs-theme=dark] .modal-content,
+[data-bs-theme=dark] .popover,
+[data-bs-theme=dark] .toast {
+  background-color: #272727;
 }

dist/lux/bootstrap.min.css.map

@@ -293,3 +293,12 @@ th {
     --bs-popover-border-width: 1px;
   }
 }
+
+
+@include color-mode(dark) {
+  .modal-content,
+  .popover,
+  .toast {
+    background-color: lighten($gray-900, 5%);
+  }
+}

dist/lux/bootstrap.rtl.css

@@ -117,3 +117,8 @@ $pagination-disabled-border-color:  $pagination-border-color !default;
 // Popovers
 
 $popover-header-bg:                 transparent !default;
+$popover-header-color:              var(--bs-popover-header-color) !default;
+
+// Toasts
+
+$toast-header-background-color:     transparent !default;