From d4e17121d2f66a414b0e0da7be3f069e9831e390 Mon Sep 17 00:00:00 2001
From: Geremia Taglialatela <tagliala.dev@gmail.com>
Date: Fri, 28 Jul 2023 19:26:00 +0200
Subject: [PATCH] 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 #38853
---
 scss/_close.scss                                 | 4 ++++
 site/content/docs/5.3/components/close-button.md | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/scss/_close.scss b/scss/_close.scss
index 4d6e73c13931..230bd8be2ff9 100644
--- 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
index 533271b49874..3d6d5800f114 100644
--- 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