From fc58c748d1ffdf1fcc647aeee14181ad4c7bbbda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Tue, 29 Nov 2022 18:07:40 +0100
Subject: [PATCH] Docs: display examples based on the docs current color mode

---
 .../docs/5.2/examples/album-rtl/index.html     |  2 +-
 .../content/docs/5.2/examples/album/index.html |  2 +-
 .../docs/5.2/examples/blog-rtl/index.html      |  2 +-
 site/content/docs/5.2/examples/blog/index.html |  2 +-
 .../5.2/examples/cheatsheet-rtl/index.html     |  6 +++---
 .../docs/5.2/examples/cheatsheet/index.html    |  6 +++---
 .../docs/5.2/examples/checkout-rtl/index.html  |  4 ++--
 .../docs/5.2/examples/checkout/index.html      |  4 ++--
 .../docs/5.2/examples/dashboard-rtl/index.html |  2 +-
 .../docs/5.2/examples/dashboard/index.html     |  2 +-
 .../docs/5.2/examples/dropdowns/index.html     |  2 +-
 .../docs/5.2/examples/headers/index.html       |  6 +++---
 .../docs/5.2/examples/heroes/index.html        |  2 +-
 .../docs/5.2/examples/jumbotron/index.html     |  4 ++--
 .../docs/5.2/examples/list-groups/index.html   |  4 ++--
 .../docs/5.2/examples/navbar-bottom/index.html |  2 +-
 .../docs/5.2/examples/navbar-fixed/index.html  |  2 +-
 .../docs/5.2/examples/navbar-static/index.html |  2 +-
 .../5.2/examples/navbars-offcanvas/index.html  |  4 ++--
 .../docs/5.2/examples/navbars/index.html       |  8 ++++----
 .../5.2/examples/offcanvas-navbar/index.html   |  2 +-
 .../docs/5.2/examples/product/index.html       | 18 +++++++++---------
 .../docs/5.2/examples/sidebars/index.html      |  6 +++---
 .../examples/sticky-footer-navbar/index.html   |  2 +-
 .../docs/5.2/examples/sticky-footer/index.html |  2 +-
 .../content/docs/5.2/helpers/stretched-link.md |  2 +-
 site/layouts/_default/examples.html            |  5 ++++-
 27 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/site/content/docs/5.2/examples/album-rtl/index.html b/site/content/docs/5.2/examples/album-rtl/index.html
index 3408056bc0ca..6ce7a244b9b7 100644
--- a/site/content/docs/5.2/examples/album-rtl/index.html
+++ b/site/content/docs/5.2/examples/album-rtl/index.html
@@ -51,7 +51,7 @@ <h1 class="fw-light">مثال الألبوم</h1>
     </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.2/examples/album/index.html b/site/content/docs/5.2/examples/album/index.html
index 2d25d726aeb3..21b038763626 100644
--- a/site/content/docs/5.2/examples/album/index.html
+++ b/site/content/docs/5.2/examples/album/index.html
@@ -50,7 +50,7 @@ <h1 class="fw-light">Album example</h1>
     </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.2/examples/blog-rtl/index.html b/site/content/docs/5.2/examples/blog-rtl/index.html
index 05af925eb12c..939c297fd6cc 100644
--- a/site/content/docs/5.2/examples/blog-rtl/index.html
+++ b/site/content/docs/5.2/examples/blog-rtl/index.html
@@ -161,7 +161,7 @@ <h2 class="blog-post-title mb-1">ميزة جديدة</h2>
 
     <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.2/examples/blog/index.html b/site/content/docs/5.2/examples/blog/index.html
index 6b60ea069f2c..f600a6540f79 100644
--- a/site/content/docs/5.2/examples/blog/index.html
+++ b/site/content/docs/5.2/examples/blog/index.html
@@ -213,7 +213,7 @@ <h2 class="blog-post-title mb-1">New feature</h2>
 
     <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.2/examples/cheatsheet-rtl/index.html b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html
index d3d0c6f008f1..542f79074992 100644
--- a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html
@@ -5,7 +5,7 @@
   - "../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 @@ <h3>شريط التنقل</h3>
 
       <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 @@ <h3>المخطوطة</h3>
 
       <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.2/examples/cheatsheet/index.html b/site/content/docs/5.2/examples/cheatsheet/index.html
index 6ee32654d1cd..b842327912ab 100644
--- a/site/content/docs/5.2/examples/cheatsheet/index.html
+++ b/site/content/docs/5.2/examples/cheatsheet/index.html
@@ -5,7 +5,7 @@
   - "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 @@ <h3>Navbar</h3>
 
       <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 @@ <h3>Scrollspy</h3>
 
       <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.2/examples/checkout-rtl/index.html b/site/content/docs/5.2/examples/checkout-rtl/index.html
index e2a7971c1a19..0f06815f9e14 100644
--- a/site/content/docs/5.2/examples/checkout-rtl/index.html
+++ b/site/content/docs/5.2/examples/checkout-rtl/index.html
@@ -6,7 +6,7 @@
   - "../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 @@ <h6 class="my-0">البند الثالث</h6>
             </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.2/examples/checkout/index.html b/site/content/docs/5.2/examples/checkout/index.html
index ba415f0d9f7a..850ceca96540 100644
--- a/site/content/docs/5.2/examples/checkout/index.html
+++ b/site/content/docs/5.2/examples/checkout/index.html
@@ -5,7 +5,7 @@
   - "checkout.css"
 extra_js:
   - src: "checkout.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 ---
 
 <div class="container">
@@ -44,7 +44,7 @@ <h6 class="my-0">Third item</h6>
             </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.2/examples/dashboard-rtl/index.html b/site/content/docs/5.2/examples/dashboard-rtl/index.html
index bc41cc604343..1c3281fff0e9 100644
--- a/site/content/docs/5.2/examples/dashboard-rtl/index.html
+++ b/site/content/docs/5.2/examples/dashboard-rtl/index.html
@@ -27,7 +27,7 @@
 
 <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.2/examples/dashboard/index.html b/site/content/docs/5.2/examples/dashboard/index.html
index b3b40c266ce1..e3d518b671f4 100644
--- a/site/content/docs/5.2/examples/dashboard/index.html
+++ b/site/content/docs/5.2/examples/dashboard/index.html
@@ -26,7 +26,7 @@
 
 <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.2/examples/dropdowns/index.html b/site/content/docs/5.2/examples/dropdowns/index.html
index f08f69701bb4..5394dfd3ca20 100644
--- a/site/content/docs/5.2/examples/dropdowns/index.html
+++ b/site/content/docs/5.2/examples/dropdowns/index.html
@@ -101,7 +101,7 @@
 
 <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.2/examples/headers/index.html b/site/content/docs/5.2/examples/headers/index.html
index b8fc8b27b80f..b14e7def4571 100644
--- a/site/content/docs/5.2/examples/headers/index.html
+++ b/site/content/docs/5.2/examples/headers/index.html
@@ -194,10 +194,10 @@ <h1 class="visually-hidden">Headers examples</h1>
 
   <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 @@ <h1 class="visually-hidden">Headers examples</h1>
 
   <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.2/examples/heroes/index.html b/site/content/docs/5.2/examples/heroes/index.html
index ef621fd500b7..819434bf8140 100644
--- a/site/content/docs/5.2/examples/heroes/index.html
+++ b/site/content/docs/5.2/examples/heroes/index.html
@@ -66,7 +66,7 @@ <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h
         <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.2/examples/jumbotron/index.html b/site/content/docs/5.2/examples/jumbotron/index.html
index 8131d1903dfa..8d3c6f169a5b 100644
--- a/site/content/docs/5.2/examples/jumbotron/index.html
+++ b/site/content/docs/5.2/examples/jumbotron/index.html
@@ -13,7 +13,7 @@
       </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 @@ <h2>Change the background</h2>
         </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.2/examples/list-groups/index.html b/site/content/docs/5.2/examples/list-groups/index.html
index 9599913c027c..7163b183589a 100644
--- a/site/content/docs/5.2/examples/list-groups/index.html
+++ b/site/content/docs/5.2/examples/list-groups/index.html
@@ -145,8 +145,8 @@ <h6 class="mb-0">Third heading</h6>
       </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.2/examples/navbar-bottom/index.html b/site/content/docs/5.2/examples/navbar-bottom/index.html
index c0e859ad0cb3..92eed643a7db 100644
--- a/site/content/docs/5.2/examples/navbar-bottom/index.html
+++ b/site/content/docs/5.2/examples/navbar-bottom/index.html
@@ -4,7 +4,7 @@
 ---
 
 <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.2/examples/navbar-fixed/index.html b/site/content/docs/5.2/examples/navbar-fixed/index.html
index 3e2cc108561d..a2a1c751ec8b 100644
--- a/site/content/docs/5.2/examples/navbar-fixed/index.html
+++ b/site/content/docs/5.2/examples/navbar-fixed/index.html
@@ -32,7 +32,7 @@
 </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.2/examples/navbar-static/index.html b/site/content/docs/5.2/examples/navbar-static/index.html
index 04065767809a..2b1b308a07d5 100644
--- a/site/content/docs/5.2/examples/navbar-static/index.html
+++ b/site/content/docs/5.2/examples/navbar-static/index.html
@@ -32,7 +32,7 @@
 </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.2/examples/navbars-offcanvas/index.html b/site/content/docs/5.2/examples/navbars-offcanvas/index.html
index cbbaf8673f07..4ee8c0c65a63 100644
--- a/site/content/docs/5.2/examples/navbars-offcanvas/index.html
+++ b/site/content/docs/5.2/examples/navbars-offcanvas/index.html
@@ -48,7 +48,7 @@ <h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
     </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 @@ <h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
   </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.2/examples/navbars/index.html b/site/content/docs/5.2/examples/navbars/index.html
index c4d0d89e4018..4c903bbb90f1 100644
--- a/site/content/docs/5.2/examples/navbars/index.html
+++ b/site/content/docs/5.2/examples/navbars/index.html
@@ -336,7 +336,7 @@
   </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 @@
       </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 @@
       </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 @@
     </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.2/examples/offcanvas-navbar/index.html b/site/content/docs/5.2/examples/offcanvas-navbar/index.html
index e4cf355e54d6..9b1ac8c1dc0a 100644
--- a/site/content/docs/5.2/examples/offcanvas-navbar/index.html
+++ b/site/content/docs/5.2/examples/offcanvas-navbar/index.html
@@ -5,7 +5,7 @@
   - "offcanvas-navbar.css"
 extra_js:
   - src: "offcanvas-navbar.js"
-body_class: "bg-light"
+body_class: "bg-body-tertiary"
 aliases: "/docs/5.2/examples/offcanvas/"
 ---
 
diff --git a/site/content/docs/5.2/examples/product/index.html b/site/content/docs/5.2/examples/product/index.html
index c2eb0eb2aed2..46f2e4b190b9 100644
--- a/site/content/docs/5.2/examples/product/index.html
+++ b/site/content/docs/5.2/examples/product/index.html
@@ -21,7 +21,7 @@
 </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 @@ <h1 class="display-4 fw-normal">Punny headline</h1>
         <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 @@ <h2 class="display-5">Another headline</h2>
   </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 @@ <h2 class="display-5">Another headline</h2>
         <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 @@ <h2 class="display-5">Another headline</h2>
   </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.2/examples/sidebars/index.html b/site/content/docs/5.2/examples/sidebars/index.html
index 48889faccbec..6fe87eac7f41 100644
--- a/site/content/docs/5.2/examples/sidebars/index.html
+++ b/site/content/docs/5.2/examples/sidebars/index.html
@@ -126,7 +126,7 @@ <h1 class="visually-hidden">Sidebars examples</h1>
 
   <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 @@ <h1 class="visually-hidden">Sidebars examples</h1>
 
   <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 @@ <h1 class="visually-hidden">Sidebars examples</h1>
 
   <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.2/examples/sticky-footer-navbar/index.html b/site/content/docs/5.2/examples/sticky-footer-navbar/index.html
index 1f807a6dc15e..b34fc30f0573 100644
--- a/site/content/docs/5.2/examples/sticky-footer-navbar/index.html
+++ b/site/content/docs/5.2/examples/sticky-footer-navbar/index.html
@@ -45,7 +45,7 @@ <h1 class="mt-5">Sticky footer with fixed navbar</h1>
   </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.2/examples/sticky-footer/index.html b/site/content/docs/5.2/examples/sticky-footer/index.html
index 7a6e127cd621..c596950c978c 100644
--- a/site/content/docs/5.2/examples/sticky-footer/index.html
+++ b/site/content/docs/5.2/examples/sticky-footer/index.html
@@ -17,7 +17,7 @@ <h1 class="mt-5">Sticky footer</h1>
   </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.2/helpers/stretched-link.md b/site/content/docs/5.2/helpers/stretched-link.md
index 8a13ff41ca6d..21a11c03008c 100644
--- a/site/content/docs/5.2/helpers/stretched-link.md
+++ b/site/content/docs/5.2/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 f70f859a6f2c..3e3610616962 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 := resources.Get "js/color-modes/index.js" }}
+    <script src="{{ $colorModeJS.Permalink | relURL }}"></script>
+
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">