From 761d57e2aa84485fbff0af86415a9a1e65c66786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Sun, 29 Dec 2024 21:44:28 +0100
Subject: [PATCH] Add a new test use case

---
 .../docs/5.3/components/close-button.md       | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md
index 3de901d70c..fd2958ec0a 100644
--- a/site/content/docs/5.3/components/close-button.md
+++ b/site/content/docs/5.3/components/close-button.md
@@ -12,7 +12,7 @@ toc: true
 <button type="button" class="btn-close" aria-label="Close"></button>
 {{< /example >}}
 
-## Dark Close Button
+## Dark Variant
 
 {{< example >}}
 <div class="bg-dark p-2">
@@ -55,3 +55,21 @@ toc: true
   </div>
 </div>
 {{< /example >}}
+
+## Toast and Close Button issue
+
+Forcing `data-bs-theme="light"` didn't work in dark mode. Now, the cross button is always dark.
+
+{{< example >}}
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-header bg-warning" data-bs-theme="light">
+    <img src="..." class="rounded me-2" alt="...">
+    <strong class="me-auto">Warning!</strong>
+    <small>11 mins ago</small>
+    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+  <div class="toast-body">
+    This is a warning message.
+  </div>
+</div>
+{{< /example >}}