diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index efb5127b5a..22b3d163a3 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -13,7 +13,7 @@
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
       <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 541028478d..620f93648a 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -10,7 +10,7 @@
     </style>
   </head>
   <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+    <nav class="navbar navbar-expand-md bg-dark fixed-top" data-bs-theme="dark">
       <a class="navbar-brand" href="#">Scrollspy test</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md
index 422f0aaecd..7f30ec4ea0 100644
--- a/site/content/docs/5.3/components/carousel.md
+++ b/site/content/docs/5.3/components/carousel.md
@@ -303,7 +303,7 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
 {{< callout-deprecated-dark-variants "carousel" >}}
 
 {{< example >}}
-<div id="carouselExampleDark" class="carousel carousel-dark slide">
+<div id="carouselExampleDark" class="carousel slide" data-bs-theme="dark">
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
     <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
index 6e3811f1f1..86f97125ed 100644
--- a/site/content/docs/5.3/components/dropdowns.md
+++ b/site/content/docs/5.3/components/dropdowns.md
@@ -356,11 +356,11 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
 {{< callout-deprecated-dark-variants "dropdown-menu" >}}
 
 {{< example >}}
-<div class="dropdown">
+<div class="dropdown" data-bs-theme="dark">
   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     Dropdown button
   </button>
-  <ul class="dropdown-menu dropdown-menu-dark">
+  <ul class="dropdown-menu">
     <li><a class="dropdown-item active" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
     <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -373,7 +373,7 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
 And putting it to use in a navbar:
 
 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -385,7 +385,7 @@ And putting it to use in a navbar:
           <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown
           </button>
-          <ul class="dropdown-menu dropdown-menu-dark">
+          <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index ab6c2305ce..7e13a87ecf 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -17,6 +17,7 @@ Here's what you need to know before getting started with the navbar:
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 - Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
 - **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
+- **New in v5.3.0:** `.navbar-dark` has been deprecated.
 
 {{< callout info >}}
 {{< partial "callouts/info-prefersreducedmotion.md" >}}
@@ -661,7 +662,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for
     <span class="text-body-secondary">Toggleable via the navbar brand.</span>
   </div>
 </div>
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark" data-bs-theme="dark">
   <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -738,17 +739,21 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
 
 When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas.
 
+{{< callout warning >}}
+**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
+{{< /callout >}}
+
 {{< example >}}
-<nav class="navbar navbar-dark bg-dark fixed-top">
+<nav class="navbar bg-dark fixed-top" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark 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">
@@ -762,7 +767,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
             <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown
             </a>
-            <ul class="dropdown-menu dropdown-menu-dark">
+            <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
               <li>
diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
index 6a16b3e612..a2b393c7ee 100644
--- a/site/content/docs/5.3/components/offcanvas.md
+++ b/site/content/docs/5.3/components/offcanvas.md
@@ -148,10 +148,10 @@ Change the appearance of offcanvases with utilities to better match them to diff
 {{< /callout >}}
 
 {{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
-<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
+<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel" data-bs-theme="dark">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
-    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
     <p>Place offcanvas content here.</p>
diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md
index a7d1cb7130..d081a67a6a 100644
--- a/site/content/docs/5.3/components/toasts.md
+++ b/site/content/docs/5.3/components/toasts.md
@@ -172,13 +172,17 @@ Alternatively, you can also add additional controls and components to toasts.
 
 Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
 
+{{< callout warning >}}
+**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
+{{< /callout >}}
+
 {{< example >}}
-<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
   <div class="d-flex">
     <div class="toast-body">
       Hello, world! This is a toast message.
     </div>
-    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
 </div>
 {{< /example >}}
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 bae47373aa..1a7606d091 100644
--- a/site/content/docs/5.3/examples/album-rtl/index.html
+++ b/site/content/docs/5.3/examples/album-rtl/index.html
@@ -23,7 +23,7 @@ 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/content/docs/5.3/examples/album/index.html b/site/content/docs/5.3/examples/album/index.html
index 54b2c5bde1..8c7bd56942 100644
--- a/site/content/docs/5.3/examples/album/index.html
+++ b/site/content/docs/5.3/examples/album/index.html
@@ -22,7 +22,7 @@ title: Album example
       </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/content/docs/5.3/examples/carousel-rtl/index.html b/site/content/docs/5.3/examples/carousel-rtl/index.html
index 37d844e6f6..9adcd2589a 100644
--- a/site/content/docs/5.3/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.3/examples/carousel-rtl/index.html
@@ -7,7 +7,7 @@ extra_css:
 ---
 
 <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="تبديل التنقل">
@@ -27,7 +27,7 @@ extra_css:
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
-          <button class="btn btn-outline-success" type="submit">بحث</button>
+          <button class="btn btn-success" type="submit">بحث</button>
         </form>
       </div>
     </div>
diff --git a/site/content/docs/5.3/examples/carousel/index.html b/site/content/docs/5.3/examples/carousel/index.html
index c76fec2207..5a89fa2823 100644
--- a/site/content/docs/5.3/examples/carousel/index.html
+++ b/site/content/docs/5.3/examples/carousel/index.html
@@ -6,7 +6,7 @@ extra_css:
 ---
 
 <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">
@@ -26,7 +26,7 @@ extra_css:
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-success" type="submit">Search</button>
+          <button class="btn btn-success" type="submit">Search</button>
         </form>
       </div>
     </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 9fd24e2e0b..b1aa4a4f9a 100644
--- a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
@@ -1261,7 +1261,7 @@ direction: rtl
           </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="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html
index 4c96bc0ae6..90fafc091c 100644
--- a/site/content/docs/5.3/examples/cheatsheet/index.html
+++ b/site/content/docs/5.3/examples/cheatsheet/index.html
@@ -1260,7 +1260,7 @@ 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="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
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 123cd0bf35..c1b38e5c66 100644
--- a/site/content/docs/5.3/examples/navbar-bottom/index.html
+++ b/site/content/docs/5.3/examples/navbar-bottom/index.html
@@ -10,7 +10,7 @@ title: Bottom navbar example
     <a class="btn btn-lg btn-primary" href="{{< docsref "/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/content/docs/5.3/examples/navbar-fixed/index.html b/site/content/docs/5.3/examples/navbar-fixed/index.html
index b8dd5dac42..7db62951ac 100644
--- a/site/content/docs/5.3/examples/navbar-fixed/index.html
+++ b/site/content/docs/5.3/examples/navbar-fixed/index.html
@@ -5,7 +5,7 @@ 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">
@@ -25,7 +25,7 @@ extra_css:
       </ul>
       <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>
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 5624404d6c..0a8da3f86a 100644
--- a/site/content/docs/5.3/examples/navbar-static/index.html
+++ b/site/content/docs/5.3/examples/navbar-static/index.html
@@ -5,7 +5,7 @@ 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">
@@ -25,7 +25,7 @@ extra_css:
       </ul>
       <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>
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 858998fb6a..07c787b2e1 100644
--- a/site/content/docs/5.3/examples/navbars-offcanvas/index.html
+++ b/site/content/docs/5.3/examples/navbars-offcanvas/index.html
@@ -6,16 +6,16 @@ extra_css:
 ---
 
 <main>
-  <nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar">
+  <nav class="navbar bg-dark" aria-label="Dark offcanvas navbar" data-bs-theme="dark">
     <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" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
         <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">
@@ -41,7 +41,7 @@ extra_css:
           </ul>
           <form class="d-flex mt-3" role="search">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <button class="btn btn-success" type="submit">Search</button>
           </form>
         </div>
       </div>
@@ -90,7 +90,7 @@ extra_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" aria-label="Offcanvas navbar large" data-bs-theme="dark">
     <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">
@@ -99,7 +99,7 @@ extra_css:
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
         <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">
@@ -125,7 +125,7 @@ extra_css:
           </ul>
           <form class="d-flex mt-3 mt-lg-0" role="search">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-            <button class="btn btn-outline-success" type="submit">Search</button>
+            <button class="btn btn-success" type="submit">Search</button>
           </form>
         </div>
       </div>
diff --git a/site/content/docs/5.3/examples/navbars/index.html b/site/content/docs/5.3/examples/navbars/index.html
index 6ccfab850c..57c1367f31 100644
--- a/site/content/docs/5.3/examples/navbars/index.html
+++ b/site/content/docs/5.3/examples/navbars/index.html
@@ -6,7 +6,7 @@ extra_css:
 ---
 
 <main>
-  <nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
+  <nav class="navbar bg-dark" aria-label="First navbar example" data-bs-theme="dark">
     <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 @@ extra_css:
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
+  <nav class="navbar navbar-expand bg-dark" aria-label="Second navbar example" data-bs-theme="dark">
     <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 @@ extra_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" aria-label="Third navbar example" data-bs-theme="dark">
     <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 @@ extra_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" aria-label="Fourth navbar example" data-bs-theme="dark">
     <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 @@ extra_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" aria-label="Fifth navbar example" data-bs-theme="dark">
     <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 @@ extra_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" aria-label="Sixth navbar example" data-bs-theme="dark">
     <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 @@ extra_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" aria-label="Seventh navbar example" data-bs-theme="dark">
     <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 @@ extra_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" aria-label="Eighth navbar example" data-bs-theme="dark">
     <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 @@ extra_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" aria-label="Ninth navbar example" data-bs-theme="dark">
     <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 @@ extra_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" aria-label="Tenth navbar example" data-bs-theme="dark">
     <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/content/docs/5.3/examples/offcanvas-navbar/index.html b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
index f72583f9b1..0d2275b046 100644
--- a/site/content/docs/5.3/examples/offcanvas-navbar/index.html
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
@@ -9,7 +9,7 @@ body_class: "bg-body-tertiary"
 aliases: "/docs/5.3/examples/offcanvas/"
 ---
 
-<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" aria-label="Main navigation" data-bs-theme="dark">
   <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">
@@ -41,7 +41,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
       </ul>
       <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
+        <button class="btn btn-success" type="submit">Search</button>
       </form>
     </div>
   </div>
diff --git a/site/content/docs/5.3/examples/sidebars/index.html b/site/content/docs/5.3/examples/sidebars/index.html
index 02a9456cc8..0738324b2e 100644
--- a/site/content/docs/5.3/examples/sidebars/index.html
+++ b/site/content/docs/5.3/examples/sidebars/index.html
@@ -74,12 +74,12 @@ body_class: ""
       </li>
     </ul>
     <hr>
-    <div class="dropdown">
+    <div class="dropdown" data-bs-theme="dark">
       <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
         <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">
         <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/content/docs/5.3/examples/sticky-footer-navbar/index.html b/site/content/docs/5.3/examples/sticky-footer-navbar/index.html
index 36bbff50e8..3f4cac92b8 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
@@ -9,7 +9,7 @@ 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">
@@ -29,7 +29,7 @@ body_class: "d-flex flex-column h-100"
         </ul>
         <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-          <button class="btn btn-outline-success" type="submit">Search</button>
+          <button class="btn btn-success" type="submit">Search</button>
         </form>
       </div>
     </div>
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index a69fb2d707..ac967b983e 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -24,9 +24,9 @@
     </div>
 
     <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
-      <div class="offcanvas-header px-4 pb-0">
+      <div class="offcanvas-header px-4 pb-0" data-bs-theme="dark">
         <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
-        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
       </div>
 
       <div class="offcanvas-body p-4 pt-0 p-lg-0">
