Invert close button color in dark mode

This workaround allows to use `data-bs-theme="dark"` directly on `btn-close` tags to honor documentation and support use cases where a white button is required in all themes Fix twbs#38853
tagliala · Jul 28, 2023 · d4e1712 · d4e1712
1 parent c81a694
commit d4e1712
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/scss/_close.scss b/scss/_close.scss
@@ -60,4 +60,8 @@
       @include btn-close-white();
     }
   }
+
+  .btn-close[data-bs-theme="dark"] {
+    @include btn-close-white();
+  }
 }
diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md
@@ -37,6 +37,10 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv
   <button type="button" class="btn-close" aria-label="Close"></button>
   <button type="button" class="btn-close" disabled aria-label="Close"></button>
 </div>
+<div>
+  <button type="button" class="btn-close" aria-label="Close" data-bs-theme="dark"></button>
+  <button type="button" class="btn-close" disabled aria-label="Close" data-bs-theme="dark"></button>
+</div>
 {{< /example >}}
 
 ## CSS