From: Julien Déramond <juderamond@gmail.com>
Date: Thu, 29 Dec 2022 06:58:35 +0000 (+0100)
Subject: Docs: display examples based on the docs current color mode (#37562)
X-Git-Tag: v5.3.0-alpha2~208
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=8befabbde90e8ee19f8bf9196840e25c07130710;p=thirdparty%2Fbootstrap.git

Docs: display examples based on the docs current color mode (#37562)

* Docs: display examples based on the docs current color mode

* Fix _default/examples.html
---

diff --git a/site/content/docs/5.3/examples/album-rtl/index.html b/site/content/docs/5.3/examples/album-rtl/index.html
index 3408056bc0..6ce7a244b9 100644
--- a/site/content/docs/5.3/examples/album-rtl/index.html
+++ b/site/content/docs/5.3/examples/album-rtl/index.html
@@ -51,7 +51,7 @@ direction: rtl
     </div>
   </section>
 
-  <div class="album py-5 bg-light">
+  <div class="album py-5 bg-body-tertiary">
     <div class="container">
 
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
diff --git a/site/content/docs/5.3/examples/album/index.html b/site/content/docs/5.3/examples/album/index.html
index 2d25d726ae..21b0387636 100644
--- a/site/content/docs/5.3/examples/album/index.html
+++ b/site/content/docs/5.3/examples/album/index.html
@@ -50,7 +50,7 @@ title: Album example
     </div>
   </section>
 
-  <div class="album py-5 bg-light">
+  <div class="album py-5 bg-body-tertiary">
     <div class="container">
 
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
diff --git a/site/content/docs/5.3/examples/blog-rtl/index.html b/site/content/docs/5.3/examples/blog-rtl/index.html
index 05af925eb1..939c297fd6 100644
--- a/site/content/docs/5.3/examples/blog-rtl/index.html
+++ b/site/content/docs/5.3/examples/blog-rtl/index.html
@@ -161,7 +161,7 @@ include_js: false
 
     <div class="col-md-4">
       <div class="position-sticky" style="top: 2rem;">
-        <div class="p-4 mb-3 bg-light rounded">
+        <div class="p-4 mb-3 bg-body-tertiary rounded">
           <h4 class="fst-italic">حول</h4>
           <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
         </div>
diff --git a/site/content/docs/5.3/examples/blog/index.html b/site/content/docs/5.3/examples/blog/index.html
index 6b60ea069f..f600a6540f 100644
--- a/site/content/docs/5.3/examples/blog/index.html
+++ b/site/content/docs/5.3/examples/blog/index.html
@@ -213,7 +213,7 @@ include_js: false
 
     <div class="col-md-4">
       <div class="position-sticky" style="top: 2rem;">
-        <div class="p-4 mb-3 bg-light rounded">
+        <div class="p-4 mb-3 bg-body-tertiary rounded">
           <h4 class="fst-italic">About</h4>
           <p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
         </div>
diff --git a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
index e699f20383..c42da6c681 100644
--- a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
@@ -5,7 +5,7 @@ extra_css:
   - "../cheatsheet/cheatsheet.rtl.css"
 extra_js:
   - src: "../cheatsheet/cheatsheet.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 direction: rtl
 ---
 
@@ -1221,7 +1221,7 @@ direction: rtl
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg bg-light">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@@ -1434,7 +1434,7 @@ direction: rtl
 
       <div>
         <div class="bd-example">
-          <nav id="navbar-example2" class="navbar bg-light px-3">
+          <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
             <a class="navbar-brand" href="#">شريط التنقل</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html
index f167fc0701..8905395842 100644
--- a/site/content/docs/5.3/examples/cheatsheet/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet/index.html
@@ -5,7 +5,7 @@ extra_css:
   - "cheatsheet.css"
 extra_js:
   - src: "cheatsheet.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 ---
 
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
@@ -1220,7 +1220,7 @@ body_class: "bg-light"
 
       <div>
         {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg bg-light">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@@ -1431,7 +1431,7 @@ body_class: "bg-light"
 
       <div>
         <div class="bd-example">
-          <nav id="navbar-example2" class="navbar bg-light px-3">
+          <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
             <a class="navbar-brand" href="#">Navbar</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
diff --git a/site/content/docs/5.3/examples/checkout-rtl/index.html b/site/content/docs/5.3/examples/checkout-rtl/index.html
index e2a7971c1a..0f06815f9e 100644
--- a/site/content/docs/5.3/examples/checkout-rtl/index.html
+++ b/site/content/docs/5.3/examples/checkout-rtl/index.html
@@ -6,7 +6,7 @@ extra_css:
   - "../checkout/checkout.css"
 extra_js:
   - src: "../checkout/checkout.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 ---
 
 <div class="container">
@@ -45,7 +45,7 @@ body_class: "bg-light"
             </div>
             <span class="text-muted">$5</span>
           </li>
-          <li class="list-group-item d-flex justify-content-between bg-light">
+          <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
             <div class="text-success">
               <h6 class="my-0">رمز ترويجي</h6>
               <small>EXAMPLECODE</small>
diff --git a/site/content/docs/5.3/examples/checkout/index.html b/site/content/docs/5.3/examples/checkout/index.html
index ba415f0d9f..850ceca965 100644
--- a/site/content/docs/5.3/examples/checkout/index.html
+++ b/site/content/docs/5.3/examples/checkout/index.html
@@ -5,7 +5,7 @@ extra_css:
   - "checkout.css"
 extra_js:
   - src: "checkout.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 ---
 
 <div class="container">
@@ -44,7 +44,7 @@ body_class: "bg-light"
             </div>
             <span class="text-muted">$5</span>
           </li>
-          <li class="list-group-item d-flex justify-content-between bg-light">
+          <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
             <div class="text-success">
               <h6 class="my-0">Promo code</h6>
               <small>EXAMPLECODE</small>
diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html
index bc41cc6043..1c3281fff0 100644
--- a/site/content/docs/5.3/examples/dashboard-rtl/index.html
+++ b/site/content/docs/5.3/examples/dashboard-rtl/index.html
@@ -27,7 +27,7 @@ extra_js:
 
 <div class="container-fluid">
   <div class="row">
-    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse">
       <div class="position-sticky pt-3 sidebar-sticky">
         <ul class="nav flex-column">
           <li class="nav-item">
diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/content/docs/5.3/examples/dashboard/index.html
index b3b40c266c..e3d518b671 100644
--- a/site/content/docs/5.3/examples/dashboard/index.html
+++ b/site/content/docs/5.3/examples/dashboard/index.html
@@ -26,7 +26,7 @@ extra_js:
 
 <div class="container-fluid">
   <div class="row">
-    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse">
       <div class="position-sticky pt-3 sidebar-sticky">
         <ul class="nav flex-column">
           <li class="nav-item">
diff --git a/site/content/docs/5.3/examples/dropdowns/index.html b/site/content/docs/5.3/examples/dropdowns/index.html
index 5ff6145637..90d41c490d 100644
--- a/site/content/docs/5.3/examples/dropdowns/index.html
+++ b/site/content/docs/5.3/examples/dropdowns/index.html
@@ -70,7 +70,7 @@ body_class: ""
 
 <div class="d-flex gap-5 justify-content-center">
   <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
-    <form class="p-2 mb-2 bg-light border-bottom">
+    <form class="p-2 mb-2 bg-body-tertiary border-bottom">
       <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
     </form>
     <ul class="list-unstyled mb-0">
diff --git a/site/content/docs/5.3/examples/headers/index.html b/site/content/docs/5.3/examples/headers/index.html
index b8fc8b27b8..b14e7def45 100644
--- a/site/content/docs/5.3/examples/headers/index.html
+++ b/site/content/docs/5.3/examples/headers/index.html
@@ -194,10 +194,10 @@ body_class: ""
 
   <div class="container-fluid pb-3">
     <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
-      <div class="bg-light border rounded-3">
+      <div class="bg-body-tertiary border rounded-3">
         <br><br><br><br><br><br><br><br><br><br>
       </div>
-      <div class="bg-light border rounded-3">
+      <div class="bg-body-tertiary border rounded-3">
         <br><br><br><br><br><br><br><br><br><br>
       </div>
     </div>
@@ -205,7 +205,7 @@ body_class: ""
 
   <div class="b-example-divider"></div>
 
-  <nav class="py-2 bg-light border-bottom">
+  <nav class="py-2 bg-body-tertiary border-bottom">
     <div class="container d-flex flex-wrap">
       <ul class="nav me-auto">
         <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
diff --git a/site/content/docs/5.3/examples/heroes/index.html b/site/content/docs/5.3/examples/heroes/index.html
index ef621fd500..819434bf81 100644
--- a/site/content/docs/5.3/examples/heroes/index.html
+++ b/site/content/docs/5.3/examples/heroes/index.html
@@ -66,7 +66,7 @@ body_class: ""
         <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
       </div>
       <div class="col-md-10 mx-auto col-lg-5">
-        <form class="p-4 p-md-5 border rounded-3 bg-light">
+        <form class="p-4 p-md-5 border rounded-3 bg-body-tertiary">
           <div class="form-floating mb-3">
             <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
             <label for="floatingInput">Email address</label>
diff --git a/site/content/docs/5.3/examples/jumbotron/index.html b/site/content/docs/5.3/examples/jumbotron/index.html
index 8131d1903d..8d3c6f169a 100644
--- a/site/content/docs/5.3/examples/jumbotron/index.html
+++ b/site/content/docs/5.3/examples/jumbotron/index.html
@@ -13,7 +13,7 @@ include_js: false
       </a>
     </header>
 
-    <div class="p-5 mb-4 bg-light rounded-3">
+    <div class="p-5 mb-4 bg-body-tertiary rounded-3">
       <div class="container-fluid py-5">
         <h1 class="display-5 fw-bold">Custom jumbotron</h1>
         <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
@@ -30,7 +30,7 @@ include_js: false
         </div>
       </div>
       <div class="col-md-6">
-        <div class="h-100 p-5 bg-light border rounded-3">
+        <div class="h-100 p-5 bg-body-tertiary border rounded-3">
           <h2>Add borders</h2>
           <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
           <button class="btn btn-outline-secondary" type="button">Example button</button>
diff --git a/site/content/docs/5.3/examples/list-groups/index.html b/site/content/docs/5.3/examples/list-groups/index.html
index 9599913c02..7163b18358 100644
--- a/site/content/docs/5.3/examples/list-groups/index.html
+++ b/site/content/docs/5.3/examples/list-groups/index.html
@@ -145,8 +145,8 @@ body_class: ""
       </small>
     </span>
   </label>
-  <label class="list-group-item d-flex gap-3 bg-light">
-    <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
+  <label class="list-group-item d-flex gap-3 bg-body-tertiary">
+    <input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
     <span class="pt-1 form-checked-content">
       <span contenteditable="true" class="w-100">Add new task...</span>
       <small class="d-block text-muted">
diff --git a/site/content/docs/5.3/examples/navbar-bottom/index.html b/site/content/docs/5.3/examples/navbar-bottom/index.html
index c0e859ad0c..92eed643a7 100644
--- a/site/content/docs/5.3/examples/navbar-bottom/index.html
+++ b/site/content/docs/5.3/examples/navbar-bottom/index.html
@@ -4,7 +4,7 @@ title: Bottom navbar example
 ---
 
 <main class="container">
-  <div class="bg-light p-5 rounded mt-3">
+  <div class="bg-body-tertiary p-5 rounded mt-3">
     <h1>Bottom Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/5.3/examples/navbar-fixed/index.html b/site/content/docs/5.3/examples/navbar-fixed/index.html
index 3e2cc10856..a2a1c751ec 100644
--- a/site/content/docs/5.3/examples/navbar-fixed/index.html
+++ b/site/content/docs/5.3/examples/navbar-fixed/index.html
@@ -32,7 +32,7 @@ extra_css:
 </nav>
 
 <main class="container">
-  <div class="bg-light p-5 rounded">
+  <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/5.3/examples/navbar-static/index.html b/site/content/docs/5.3/examples/navbar-static/index.html
index 0406576780..2b1b308a07 100644
--- a/site/content/docs/5.3/examples/navbar-static/index.html
+++ b/site/content/docs/5.3/examples/navbar-static/index.html
@@ -32,7 +32,7 @@ extra_css:
 </nav>
 
 <main class="container">
-  <div class="bg-light p-5 rounded">
+  <div class="bg-body-tertiary p-5 rounded">
     <h1>Navbar example</h1>
     <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
     <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
diff --git a/site/content/docs/5.3/examples/navbars-offcanvas/index.html b/site/content/docs/5.3/examples/navbars-offcanvas/index.html
index cbbaf8673f..4ee8c0c65a 100644
--- a/site/content/docs/5.3/examples/navbars-offcanvas/index.html
+++ b/site/content/docs/5.3/examples/navbars-offcanvas/index.html
@@ -48,7 +48,7 @@ extra_css:
     </div>
   </nav>
 
-  <nav class="navbar bg-light" aria-label="Light offcanvas navbar">
+  <nav class="navbar bg-body-tertiary" aria-label="Light offcanvas navbar">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Light offcanvas navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight">
@@ -133,7 +133,7 @@ extra_css:
   </nav>
 
   <div class="container my-5">
-    <div class="bg-light p-5 rounded">
+    <div class="bg-body-tertiary p-5 rounded">
       <div class="col-sm-8 py-5 mx-auto">
         <h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
         <p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
diff --git a/site/content/docs/5.3/examples/navbars/index.html b/site/content/docs/5.3/examples/navbars/index.html
index c4d0d89e40..4c903bbb90 100644
--- a/site/content/docs/5.3/examples/navbars/index.html
+++ b/site/content/docs/5.3/examples/navbars/index.html
@@ -336,7 +336,7 @@ extra_css:
   </nav>
 
   <div class="container">
-    <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Eleventh navbar example">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Eleventh navbar example">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
@@ -370,7 +370,7 @@ extra_css:
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Twelfth navbar example">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Twelfth navbar example">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -400,7 +400,7 @@ extra_css:
       </div>
     </nav>
 
-    <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Thirteenth navbar example">
+    <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Thirteenth navbar example">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -435,7 +435,7 @@ extra_css:
     </nav>
 
     <div>
-      <div class="bg-light p-5 rounded">
+      <div class="bg-body-tertiaryp-5 rounded">
         <div class="col-sm-8 mx-auto">
           <h1>Navbar examples</h1>
           <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
diff --git a/site/content/docs/5.3/examples/offcanvas-navbar/index.html b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
index 07b18d681c..cc3188b677 100644
--- a/site/content/docs/5.3/examples/offcanvas-navbar/index.html
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
@@ -5,7 +5,7 @@ extra_css:
   - "offcanvas-navbar.css"
 extra_js:
   - src: "offcanvas-navbar.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 aliases: "/docs/5.3/examples/offcanvas/"
 ---
 
diff --git a/site/content/docs/5.3/examples/product/index.html b/site/content/docs/5.3/examples/product/index.html
index c2eb0eb2ae..46f2e4b190 100644
--- a/site/content/docs/5.3/examples/product/index.html
+++ b/site/content/docs/5.3/examples/product/index.html
@@ -21,7 +21,7 @@ extra_css:
 </header>
 
 <main>
-  <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
+  <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary">
     <div class="col-md-5 p-lg-5 mx-auto my-5">
       <h1 class="display-4 fw-normal">Punny headline</h1>
       <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
@@ -37,9 +37,9 @@ extra_css:
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 p-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
@@ -49,7 +49,7 @@ extra_css:
   </div>
 
   <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 p-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
@@ -61,19 +61,19 @@ extra_css:
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
   </div>
 
   <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 p-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 py-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
@@ -83,14 +83,14 @@ extra_css:
   </div>
 
   <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 p-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
       <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
-    <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
+    <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 py-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
diff --git a/site/content/docs/5.3/examples/sidebars/index.html b/site/content/docs/5.3/examples/sidebars/index.html
index 48889faccb..6fe87eac7f 100644
--- a/site/content/docs/5.3/examples/sidebars/index.html
+++ b/site/content/docs/5.3/examples/sidebars/index.html
@@ -126,7 +126,7 @@ body_class: ""
 
   <div class="b-example-divider b-example-vr"></div>
 
-  <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
+  <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
       <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-4">Sidebar</span>
@@ -182,7 +182,7 @@ body_class: ""
 
   <div class="b-example-divider b-example-vr"></div>
 
-  <div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
+  <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
     <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
       <svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       <span class="visually-hidden">Icon-only</span>
@@ -293,7 +293,7 @@ body_class: ""
 
   <div class="b-example-divider b-example-vr"></div>
 
-  <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
+  <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
     <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
       <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">List group</span>
diff --git a/site/content/docs/5.3/examples/sticky-footer-navbar/index.html b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html
index 1f807a6dc1..b34fc30f05 100644
--- a/site/content/docs/5.3/examples/sticky-footer-navbar/index.html
+++ b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html
@@ -45,7 +45,7 @@ body_class: "d-flex flex-column h-100"
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<footer class="footer mt-auto py-3 bg-body-tertiary">
   <div class="container">
     <span class="text-muted">Place sticky footer content here.</span>
   </div>
diff --git a/site/content/docs/5.3/examples/sticky-footer/index.html b/site/content/docs/5.3/examples/sticky-footer/index.html
index 7a6e127cd6..c596950c97 100644
--- a/site/content/docs/5.3/examples/sticky-footer/index.html
+++ b/site/content/docs/5.3/examples/sticky-footer/index.html
@@ -17,7 +17,7 @@ include_js: false
   </div>
 </main>
 
-<footer class="footer mt-auto py-3 bg-light">
+<footer class="footer mt-auto py-3 bg-body-tertiary">
   <div class="container">
     <span class="text-muted">Place sticky footer content here.</span>
   </div>
diff --git a/site/content/docs/5.3/helpers/stretched-link.md b/site/content/docs/5.3/helpers/stretched-link.md
index 8a13ff41ca..21a11c0300 100644
--- a/site/content/docs/5.3/helpers/stretched-link.md
+++ b/site/content/docs/5.3/helpers/stretched-link.md
@@ -66,7 +66,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
     <p class="card-text">
       <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
     </p>
-    <p class="card-text bg-light" style="transform: rotate(0);">
+    <p class="card-text bg-body-tertiary" style="transform: rotate(0);">
       This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
     </p>
   </div>
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index f70f859a6f..2700bcc0cf 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -1,6 +1,9 @@
 <!doctype html>
-<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }}>
+<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }} data-bs-theme="auto">
   <head>
+    {{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
+    <script src="{{ $colorModeJS | relURL }}"></script>
+
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">