Add color mode on Toasts

Orange-OpenSource · Nov 29, 2023 · 0107e8a · 0107e8a
1 parent b0b2994
commit 0107e8a
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 3 deletions.
diff --git 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,12 @@ 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`.
+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`.
+
+{{< callout-deprecated-dark-variants "toast" >}}
 
 {{< 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.

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -9512,3 +9512,90 @@ sitemap_exclude: true
 <div class="d-flex gap-2 flex-wrap border p-3" style="background-color: #b5e8f7">
   <a class="link-chevron" href="#" data-bs-theme="light">This is a sample link with chevron</a>
 </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>