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 3408056bc0caac6344ff2c444e7ee46e0eb1c040..6ce7a244b9b7599a88b9d05fe7f157e81417dc2c 100644 (file)
--- 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 2d25d726aeb30d9011695b712bcc1bdc065b17b7..21b038763626e7c89b9283424c0219fe412d6874 100644 (file)
--- 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 05af925eb12c650831899b07a59e075be9cc0243..939c297fd6cc0194bec7b4c7bed9334592913d7f 100644 (file)
--- 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 6b60ea069f2c44ba0557766ca462de91ff91036f..f600a6540f79527fc767f83d7e700bcdac38c08c 100644 (file)
--- 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 e699f20383ac534af060c21f3c0092b7d42df0ef..c42da6c681512b08a958f35145c8be76e7ebf099 100644 (file)
--- 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 f167fc070112f56b745f7e389638bdd2268dbe9d..89053958429abaa4516a538d0fe1b5170ef1ee4d 100644 (file)
--- 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 e2a7971c1a19b0459c8034a78bc5ca3021472526..0f06815f9e14800d39d6019c0c79af0370ef2213 100644 (file)
--- 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 ba415f0d9f7a9ae71f1abb2ba7d1d283822f1e2f..850ceca96540ac443ee58249c4a51069464a16bf 100644 (file)
--- 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 bc41cc6043435df492e9612d08d1ba2833c6410f..1c3281fff0e93e8ed8433b65ae4d0758bc2a7c27 100644 (file)
--- 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 b3b40c266ce106145c98590691408f3283b36493..e3d518b671f4d081470dce6c0b7ba2c7947bad45 100644 (file)
--- 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 5ff614563704c147a692ab731d94c757bb7b35c8..90d41c490d615ff1d09b0bf0da4c28f7811cceda 100644 (file)
--- 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 b8fc8b27b80f400a7574c8d3d784db9c7e3b7879..b14e7def4571a3601e776a60ac3115b44dcf89e7 100644 (file)
--- 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 ef621fd500b7dbb8913b97bf8544711e564d47de..819434bf8140847739cc295e091c22eae9733863 100644 (file)
--- 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 8131d1903dfae0f935ae29ea3f7c85785a6615d5..8d3c6f169a5bd54f45c3902e60dd2df7607b6591 100644 (file)
--- 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 9599913c027ca3b3433591a6d1e1a42d7967a534..7163b183589a4128fe2e0b5f5f6a39bec851d0c4 100644 (file)
--- 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 c0e859ad0cb34eeb5039aaa0558463ba0a4bff04..92eed643a7db5f5e355d58f119d9e00d301ae70f 100644 (file)
--- 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 3e2cc108561d5dd172e59b122e941d1bd601c51c..a2a1c751ec8bbcdcc53f8915ac2c700084e1cf89 100644 (file)
--- 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 04065767809a4b18325e5cbcac38a6ce94a7c24e..2b1b308a07d5f71fcdc2c78bd2846ff05c8a5f00 100644 (file)
--- 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 cbbaf8673f079973c57840a37e9791743778e05c..4ee8c0c65a6342487b17138b01566897d6dc41ce 100644 (file)
--- 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 c4d0d89e4018c25d1309aae50b46c6fe3dc92972..4c903bbb90f1646bd95ab2d60085f06a93807f18 100644 (file)
--- 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 07b18d681c3f5957460672410f6041dbd14de4c3..cc3188b67731c628dedaf682a2699261d8425df8 100644 (file)
--- 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 c2eb0eb2aed2b92386c83e36f58df1a3e6ea9374..46f2e4b190b90dead50d6f33f68c26c7edbe0bf3 100644 (file)
--- 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 48889faccbecd92e8610a08076d2c54b932b8e0d..6fe87eac7f415eee967a3f46143f42d5e0035fb4 100644 (file)
--- 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 1f807a6dc15e438241a2c78888496b8268cf09cd..b34fc30f05730e7415c53edcec34e10d6a47ab9f 100644 (file)
--- 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 7a6e127cd6219c1a6e496879aeda0aac75e570bd..c596950c978ce9bbabcbe9c2af5286d710a7cd5b 100644 (file)
--- 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 8a13ff41ca6d36a4a4e5dba37443637e039fa988..21a11c03008c331c73247bbb9ce20fde36b3a662 100644 (file)
--- 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 f70f859a6f2cd2a39c452042981dc8a46e49ffe4..2700bcc0cf7f22b62f60f58a06de49a022436c6c 100644 (file)
--- 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="">