Use data-bs-theme='dark' and modernize dark styles (#42423)

Replace legacy 'navbar-dark' classes with the newer data-bs-theme='dark' attribute across example pages and adjust related dark-mode styling. Other updates: remove redundant 'btn-close-white', change 'text-muted' to 'text-body-secondary', replace 'border-right' with 'border-end' for logical edge utilities, and apply data-bs-theme to offcanvas/dropdown elements where appropriate. These changes standardize dark theme handling and update utilities in multiple site examples.

diff --git a/site/src/assets/examples/album-rtl/index.astro b/site/src/assets/examples/album-rtl/index.astro
index d02e9f4044b59ec0c5a47e3d996305fb223a29dd..517685a737cbd1473eaffd863beb96df658f3778 100644 (file)
--- a/site/src/assets/examples/album-rtl/index.astro
+++ b/site/src/assets/examples/album-rtl/index.astro
@@ -25,7 +25,7 @@ export const direction = 'rtl'
       </div>
     </div>
   </div>
-  <div class="navbar navbar-dark bg-dark shadow-sm">
+  <div class="navbar bg-dark shadow-sm">
     <div class="container">
       <a href="#" class="navbar-brand d-flex align-items-center">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>

diff --git a/site/src/assets/examples/album/index.astro b/site/src/assets/examples/album/index.astro
index 9b5279302a8e0bc09b8ac84f3e14fc0804f72ded..59dd8ecdfb6079d1035ccb6fcd39192005d1fc70 100644 (file)
--- a/site/src/assets/examples/album/index.astro
+++ b/site/src/assets/examples/album/index.astro
@@ -24,7 +24,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </div>
     </div>
   </div>
-  <div class="navbar navbar-dark bg-dark shadow-sm">
+  <div class="navbar bg-dark shadow-sm">
     <div class="container">
       <a href="#" class="navbar-brand d-flex align-items-center">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>

diff --git a/site/src/assets/examples/carousel-rtl/index.astro b/site/src/assets/examples/carousel-rtl/index.astro
index fced29dd01efa35bafc8eb08431c7a1e3a085ebe..a68e037d480b0b2e8b1e0ab93eae1541a54712b2 100644 (file)
--- a/site/src/assets/examples/carousel-rtl/index.astro
+++ b/site/src/assets/examples/carousel-rtl/index.astro
@@ -6,7 +6,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
 <header data-bs-theme="dark">
-  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+  <nav class="navbar navbar-expand-md fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">شرائح العرض</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">

diff --git a/site/src/assets/examples/carousel/index.astro b/site/src/assets/examples/carousel/index.astro
index 2ca4339be0288903b133e273109312bcde999222..f77e87a2ce34db78973bc02e5270ef0b795b9885 100644 (file)
--- a/site/src/assets/examples/carousel/index.astro
+++ b/site/src/assets/examples/carousel/index.astro
@@ -5,7 +5,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
 <header data-bs-theme="dark">
-  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+  <nav class="navbar navbar-expand-md fixed-top bg-dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Carousel</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/site/src/assets/examples/cheatsheet-rtl/index.astro b/site/src/assets/examples/cheatsheet-rtl/index.astro
index ce954a0a66ace54302330c365436e0eb4a27d637..113ad7e9d5fba515f55c6b71d79c6d8ecc0ba1dd 100644 (file)
--- a/site/src/assets/examples/cheatsheet-rtl/index.astro
+++ b/site/src/assets/examples/cheatsheet-rtl/index.astro
@@ -1245,7 +1245,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           </div>
         </nav>
 
-        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
+        <nav class="navbar navbar-expand-lg bg-primary mt-5" data-bs-theme="dark">
           <div class="container-fluid">
             <a class="navbar-brand" href="#">
               <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">

diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 08b18bb6a91357c036d02aa07e09b1e15aca7594..341a4d90ab6ab887b581f59501dcc0029539dd30 100644 (file)
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -1223,7 +1223,7 @@ export const body_class = 'bg-body-tertiary'
             </div>
           </nav>
 
-          <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
+          <nav class="navbar navbar-expand-lg bg-primary mt-5" data-bs-theme="dark">
             <div class="container-fluid">
               <a class="navbar-brand" href="#">
                 <img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">

diff --git a/site/src/assets/examples/dashboard-rtl/index.astro b/site/src/assets/examples/dashboard-rtl/index.astro
index c5758e95c3836206017da29fc10dc5fa9399580a..d94c71b15cd0fcb519e5b98e9de954aaa4d21c84 100644 (file)
--- a/site/src/assets/examples/dashboard-rtl/index.astro
+++ b/site/src/assets/examples/dashboard-rtl/index.astro
@@ -81,7 +81,7 @@ export const extra_js = [
 
 <div class="container-fluid">
   <div class="row">
-    <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
+    <div class="sidebar border border-end col-md-3 col-lg-2 p-0 bg-body-tertiary">
       <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>

diff --git a/site/src/assets/examples/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro
index 4d33c7fb83db8c00c9fb9e47771a4e71db550529..73b47aa5ff9274e18256a678d1a685767db8e243 100644 (file)
--- a/site/src/assets/examples/dashboard/index.astro
+++ b/site/src/assets/examples/dashboard/index.astro
@@ -80,7 +80,7 @@ export const extra_js = [
 
 <div class="container-fluid">
   <div class="row">
-    <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
+    <div class="sidebar border border-end col-md-3 col-lg-2 p-0 bg-body-tertiary">
       <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>

diff --git a/site/src/assets/examples/jumbotrons/index.astro b/site/src/assets/examples/jumbotrons/index.astro
index 587e793024c3359795a690eb924a7357ac22cabd..fb9058fc0c4d45b5257baae9a70dde2e6ded41ed 100644 (file)
--- a/site/src/assets/examples/jumbotrons/index.astro
+++ b/site/src/assets/examples/jumbotrons/index.astro
@@ -21,7 +21,7 @@ export const extra_css = ['jumbotrons.css']
   <div class="p-5 text-center bg-body-tertiary rounded-3">
     <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
     <h1 class="text-body-emphasis">Jumbotron with icon</h1>
-    <p class="col-lg-8 mx-auto fs-5 text-muted">
+    <p class="col-lg-8 mx-auto fs-5 text-body-secondary">
       This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
     </p>
     <div class="d-inline-flex gap-2 mb-5">
@@ -39,7 +39,7 @@ export const extra_css = ['jumbotrons.css']
 <div class="b-example-divider"></div>
 
 <div class="container my-5">
-  <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
+  <div class="position-relative p-5 text-center text-body-secondary bg-body border border-dashed rounded-5">
     <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
     <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
     <h1 class="text-body-emphasis">Placeholder jumbotron</h1>

diff --git a/site/src/assets/examples/navbar-bottom/index.astro b/site/src/assets/examples/navbar-bottom/index.astro
index 35aa348c69b25e68670fb28d1b255f647331c46a..6b3c796d58ac8a56d358d74de2c5539c297b4d60 100644 (file)
--- a/site/src/assets/examples/navbar-bottom/index.astro
+++ b/site/src/assets/examples/navbar-bottom/index.astro
@@ -11,7 +11,7 @@ export const title = 'Bottom navbar example'
     <a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
   </div>
 </main>
-<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
+<nav class="navbar fixed-bottom navbar-expand-sm bg-dark" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Bottom navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/site/src/assets/examples/navbar-fixed/index.astro b/site/src/assets/examples/navbar-fixed/index.astro
index 3524255c2f5fc929effb64c5defdd5f6e382c498..a3263fac58900e1dddf010f6b4077b2b15660a01 100644 (file)
--- a/site/src/assets/examples/navbar-fixed/index.astro
+++ b/site/src/assets/examples/navbar-fixed/index.astro
@@ -5,7 +5,7 @@ export const title = 'Fixed top navbar example'
 export const extra_css = ['navbar-fixed.css']
 ---
 
-<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+<nav class="navbar navbar-expand-md fixed-top bg-dark" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/site/src/assets/examples/navbar-static/index.astro b/site/src/assets/examples/navbar-static/index.astro
index 600b313ec5c1e0e882b9386ff593125c353d55bd..f35c6f8cd1864d070745be15eb1a0fa29b44601b 100644 (file)
--- a/site/src/assets/examples/navbar-static/index.astro
+++ b/site/src/assets/examples/navbar-static/index.astro
@@ -5,7 +5,7 @@ export const title = 'Top navbar example'
 export const extra_css = ['navbar-static.css']
 ---
 
-<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
+<nav class="navbar navbar-expand-md bg-dark mb-4" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Top navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/site/src/assets/examples/navbars-offcanvas/index.astro b/site/src/assets/examples/navbars-offcanvas/index.astro
index ec6b03f76d9284d7e8b749240681c1ad43fa60b4..da6783cededabf64ec14f97fe32bf059815aae29 100644 (file)
--- a/site/src/assets/examples/navbars-offcanvas/index.astro
+++ b/site/src/assets/examples/navbars-offcanvas/index.astro
@@ -6,16 +6,16 @@ export const extra_css = ['navbars-offcanvas.css']
 ---
 
 <main>
-  <nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar">
+  <nav class="navbar bg-dark" data-bs-theme="dark" aria-label="Dark offcanvas navbar">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Dark offcanvas navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
+      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel" data-bs-theme="dark">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -90,16 +90,16 @@ export const extra_css = ['navbars-offcanvas.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Offcanvas navbar large">
+  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark" aria-label="Offcanvas navbar large">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Responsive offcanvas navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
+      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label" data-bs-theme="dark">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">

diff --git a/site/src/assets/examples/navbars/index.astro b/site/src/assets/examples/navbars/index.astro
index 63d65ffb4c50b234ba39571b8b34ee0ec7d73cd9..9dad682027e87b9bb3f7129fc106f020aba751c9 100644 (file)
--- a/site/src/assets/examples/navbars/index.astro
+++ b/site/src/assets/examples/navbars/index.astro
@@ -6,7 +6,7 @@ export const extra_css = ['navbars.css']
 ---
 
 <main>
-  <nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
+  <nav class="navbar bg-dark" data-bs-theme="dark" aria-label="First navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Never expand</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
@@ -40,7 +40,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
+  <nav class="navbar navbar-expand bg-dark" data-bs-theme="dark" aria-label="Second navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Always expand</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
@@ -63,7 +63,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-sm navbar-dark bg-dark" aria-label="Third navbar example">
+  <nav class="navbar navbar-expand-sm bg-dark" data-bs-theme="dark" aria-label="Third navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at sm</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
@@ -97,7 +97,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example">
+  <nav class="navbar navbar-expand-md bg-dark" data-bs-theme="dark" aria-label="Fourth navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at md</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
@@ -131,7 +131,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example">
+  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark" aria-label="Fifth navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at lg</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
@@ -165,7 +165,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-xl navbar-dark bg-dark" aria-label="Sixth navbar example">
+  <nav class="navbar navbar-expand-xl bg-dark" data-bs-theme="dark" aria-label="Sixth navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at xl</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
@@ -199,7 +199,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
+  <nav class="navbar navbar-expand-xxl bg-dark" data-bs-theme="dark" aria-label="Seventh navbar example">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at xxl</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
@@ -233,7 +233,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
+  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark" aria-label="Eighth navbar example">
     <div class="container">
       <a class="navbar-brand" href="#">Container</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
@@ -267,7 +267,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Ninth navbar example">
+  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark" aria-label="Ninth navbar example">
     <div class="container-xl">
       <a class="navbar-brand" href="#">Container XL</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
@@ -305,7 +305,7 @@ export const extra_css = ['navbars.css']
     <p>Matching .container-xl...</p>
   </div>
 
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Tenth navbar example">
+  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark" aria-label="Tenth navbar example">
     <div class="container-fluid">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

diff --git a/site/src/assets/examples/offcanvas-navbar/index.astro b/site/src/assets/examples/offcanvas-navbar/index.astro
index ac94ca882af69587c2099dd155c74c5fd32bdfad..c13af384b0f443d5c0ea0febb38f04b57eb25575 100644 (file)
--- a/site/src/assets/examples/offcanvas-navbar/index.astro
+++ b/site/src/assets/examples/offcanvas-navbar/index.astro
@@ -9,7 +9,7 @@ export const aliases = '/docs/[[config:docs_version]]/examples/offcanvas/'
 import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
-<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
+<nav class="navbar navbar-expand-lg fixed-top bg-dark" data-bs-theme="dark" aria-label="Main navigation">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Offcanvas navbar</a>
     <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">

diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro
index 7c98d11a18c2c79a96df2345a4ee2885abf79501..d7d3479b47b94f74c68f5c7a28e469f57826cf21 100644 (file)
--- a/site/src/assets/examples/product/index.astro
+++ b/site/src/assets/examples/product/index.astro
@@ -54,7 +54,7 @@ export const extra_css = ['product.css']
   <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary">
     <div class="col-md-6 p-lg-5 mx-auto my-5">
       <h1 class="display-3 fw-bold">Designed for engineers</h1>
-      <h3 class="fw-normal text-muted mb-3">Build anything you want with Aperture</h3>
+      <h3 class="fw-normal text-body-secondary mb-3">Build anything you want with Aperture</h3>
       <div class="d-flex gap-3 justify-content-center lead fw-normal">
         <a class="icon-link" href="#">
           Learn more

diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index de67a80b68d062e07aa8e709b86b620098d6818e..058cb372b48b4f88a2913b6dfcdf4058368fae55 100644 (file)
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -75,7 +75,7 @@ export const extra_js = [{src: 'sidebars.js'}]
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
-      <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
+      <ul class="dropdown-menu text-small shadow" data-bs-theme="dark">
         <li><a class="dropdown-item" href="#">New project...</a></li>
         <li><a class="dropdown-item" href="#">Settings</a></li>
         <li><a class="dropdown-item" href="#">Profile</a></li>

diff --git a/site/src/assets/examples/sticky-footer-navbar/index.astro b/site/src/assets/examples/sticky-footer-navbar/index.astro
index 9b9b5ebb98939e4abce38296cff88bd162c5d8c0..a3fd03b57bf7df8b144b3811439c64a758d6f8d0 100644 (file)
--- a/site/src/assets/examples/sticky-footer-navbar/index.astro
+++ b/site/src/assets/examples/sticky-footer-navbar/index.astro
@@ -9,7 +9,7 @@ export const body_class = 'd-flex flex-column h-100'
 
 <header>
   <!-- Fixed navbar -->
-  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+  <nav class="navbar navbar-expand-md fixed-top bg-dark" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">