From 87f750ad14016bebf47430c6ccf4497639a07f6d Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 19 Dec 2023 11:21:16 +0100
Subject: [PATCH] Dark mode: Toasts (#2380)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/components/toasts.md | 13 +++-
 site/content/docs/5.3/dark-mode.md         | 87 ++++++++++++++++++++++
 2 files changed, 97 insertions(+), 3 deletions(-)

diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md
index d5793fb4ba..e47ffc0a1b 100644
--- a/site/content/docs/5.3/components/toasts.md
+++ b/site/content/docs/5.3/components/toasts.md
@@ -95,7 +95,7 @@ We use the following JavaScript to trigger our live toast demo:
 
 Toasts are slightly translucent to blend in with what's below them.
 
-{{< example class="bg-dark" stackblitz_add_js="true" >}}
+{{< example class="bg-secondary" stackblitz_add_js="true" >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
   <div class="toast-header">
     {{< placeholder width="20" height="20" background="#ff7900" class="me-2" text="false" title="false" >}}
@@ -172,10 +172,16 @@ Alternatively, you can also add additional controls and components to toasts.
 
 ### Color schemes
 
-Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-secondary` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`.
+{{< callout-deprecated-dark-variants "toast" >}}
+
+<details>
+<summary>See a dark color scheme example</summary>
+<br>
+
+Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-dark` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`.
 
 {{< example stackblitz_add_js="true" >}}
-<div class="toast align-items-center text-bg-secondary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
   <div class="d-flex">
     <div class="toast-body my-auto">
       Hello, world! This is a toast message.
@@ -184,6 +190,7 @@ Building on the above example, you can create different toast color schemes with
   </div>
 </div>
 {{< /example >}}
+</details>
 
 ## Placement
 
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index c2ac0bbea1..457ef48a87 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -5800,6 +5800,93 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Toasts
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="bd-example border p-3">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="bd-example border p-3 bg-body" data-bs-theme="dark">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="bd-example border p-3 bg-body" data-bs-theme="light">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="bd-example border p-3" style="background-color: #282d55;">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="bd-example border p-3" style="background-color: #b5e8f7">
+  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="light">
+    <div class="toast-header">
+      <svg class="bd-placeholder-img me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#ff7900"/>
+        </svg>
+      <strong class="me-auto">Boosted</strong>
+      <small>11 mins ago</small>
+      <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="toast-body">
+      Hello, world! This is a toast message.
+    </div>
+  </div>
+</div>
+
 ### Tooltips
 
 <h4 class="mt-3">No theme</h4>