diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro
index 3a38cb777e52..849f8f0237f9 100644
--- a/site/src/assets/examples/blog/index.astro
+++ b/site/src/assets/examples/blog/index.astro
@@ -37,18 +37,18 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 
   <div class="nav-scroller py-1 mb-3 border-bottom">
     <nav class="nav nav-underline justify-content-between">
-      <a class="nav-item nav-link link-body-emphasis active" href="#">World</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Technology</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
-      <a class="nav-item nav-link link-body-emphasis" href="#">Travel</a>
+      <a class="nav-item nav-link theme-inverse active" href="#">World</a>
+      <a class="nav-item nav-link theme-inverse" href="#">U.S.</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Technology</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Design</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Culture</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Business</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Politics</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Opinion</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Science</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Health</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Style</a>
+      <a class="nav-item nav-link theme-inverse" href="#">Travel</a>
     </nav>
   </div>
 </div>
@@ -106,7 +106,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </h3>
 
       <article class="blog-post">
-        <h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
+        <h2 class="display-5 fg-emphasis-inverse mb-1">Sample blog post</h2>
         <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
 
         <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
@@ -160,7 +160,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </article>
 
       <article class="blog-post">
-        <h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2>
+        <h2 class="display-5 fg-emphasis-inverse mb-1">Another blog post</h2>
         <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
 
         <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -208,7 +208,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </article>
 
       <article class="blog-post">
-        <h2 class="display-5 link-body-emphasis mb-1">New feature</h2>
+        <h2 class="display-5 fg-emphasis-inverse mb-1">New feature</h2>
         <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
 
         <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -238,7 +238,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <h4 class="fst-italic">Recent posts</h4>
           <ul class="list-unstyled">
             <li>
-              <a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+              <a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 theme-inverse text-decoration-none border-top" href="#">
                 <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="lg:col-8">
                   <h6 class="mb-0">Example blog post title</h6>
@@ -247,7 +247,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
               </a>
             </li>
             <li>
-              <a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+              <a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 theme-inverse text-decoration-none border-top" href="#">
                 <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="lg:col-8">
                   <h6 class="mb-0">This is another blog post title</h6>
@@ -256,7 +256,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
               </a>
             </li>
             <li>
-              <a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
+              <a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 theme-inverse text-decoration-none border-top" href="#">
                 <Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
                 <div class="lg:col-8">
                   <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
diff --git a/site/src/assets/examples/breadcrumbs/index.astro b/site/src/assets/examples/breadcrumbs/index.astro
index 3978e8fdbf7f..f98a02ff2474 100644
--- a/site/src/assets/examples/breadcrumbs/index.astro
+++ b/site/src/assets/examples/breadcrumbs/index.astro
@@ -25,13 +25,13 @@ export const extra_css = ['breadcrumbs.css']
   <nav aria-label="breadcrumb">
     <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
       <li class="breadcrumb-item">
-        <a class="link-body-emphasis" href="#">
+        <a class="theme-inverse" href="#">
           <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
           <span class="visually-hidden">Home</span>
         </a>
       </li>
       <li class="breadcrumb-item">
-        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+        <a class="theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
       </li>
       <li class="breadcrumb-item active" aria-current="page">
         Data
@@ -46,13 +46,13 @@ export const extra_css = ['breadcrumbs.css']
   <nav aria-label="breadcrumb">
     <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
       <li class="breadcrumb-item">
-        <a class="link-body-emphasis" href="#">
+        <a class="theme-inverse" href="#">
           <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
           <span class="visually-hidden">Home</span>
         </a>
       </li>
       <li class="breadcrumb-item">
-        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+        <a class="theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
       </li>
       <li class="breadcrumb-item active" aria-current="page">
         Data
@@ -67,13 +67,13 @@ export const extra_css = ['breadcrumbs.css']
   <nav aria-label="breadcrumb">
     <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
       <li class="breadcrumb-item">
-        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
+        <a class="theme-inverse fw-semibold text-decoration-none" href="#">
           <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
           Home
         </a>
       </li>
       <li class="breadcrumb-item">
-        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+        <a class="theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
       </li>
       <li class="breadcrumb-item active" aria-current="page">
         Data
diff --git a/site/src/assets/examples/footers/index.astro b/site/src/assets/examples/footers/index.astro
index f9dc9b70178b..cb487b750709 100644
--- a/site/src/assets/examples/footers/index.astro
+++ b/site/src/assets/examples/footers/index.astro
@@ -19,7 +19,7 @@ export const title = 'Footers'
   <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
     <p class="md:col-4 mb-0 fg-2">&copy; {new Date().getFullYear()} Company, Inc</p>
 
-    <a href="/" class="md:col-4 d-flex align-items-center justify-content-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
+    <a href="/" class="md:col-4 d-flex align-items-center justify-content-center mb-3 md:mb-0 md:me-auto theme-inverse text-decoration-none" aria-label="Bootstrap">
       <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
     </a>
 
@@ -71,7 +71,7 @@ export const title = 'Footers'
 <div class="container">
   <footer class="row row-cols-1 sm:row-cols-2 md:row-cols-5 py-5 my-5 border-top">
     <div class="col mb-3">
-      <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
+      <a href="/" class="d-flex align-items-center mb-3 theme-inverse text-decoration-none" aria-label="Bootstrap">
         <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       </a>
       <p class="fg-2">&copy; {new Date().getFullYear()}</p>
@@ -171,8 +171,8 @@ export const title = 'Footers'
     <div class="d-flex flex-column sm:flex-row justify-content-between py-4 my-4 border-top">
       <p>&copy; {new Date().getFullYear()} Company, Inc. All rights reserved.</p>
       <ul class="list-unstyled d-flex">
-        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use href="#instagram"/></svg></a></li>
-        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#facebook"/></svg></a></li>
+        <li class="ms-3"><a class="theme-inverse" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use href="#instagram"/></svg></a></li>
+        <li class="ms-3"><a class="theme-inverse" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#facebook"/></svg></a></li>
       </ul>
     </div>
   </footer>
diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro
index ebf5b3a06cc6..2583f882eac1 100644
--- a/site/src/assets/examples/headers/index.astro
+++ b/site/src/assets/examples/headers/index.astro
@@ -32,7 +32,7 @@ export const extra_css = ['headers.css']
 
   <div class="container">
     <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none">
+      <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto theme-inverse text-decoration-none">
         <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
         <span class="fs-xl">Simple header</span>
       </a>
@@ -66,7 +66,7 @@ export const extra_css = ['headers.css']
   <div class="container">
     <header class="d-flex flex-wrap align-items-center justify-content-center md:justify-content-between py-3 mb-4 border-bottom">
       <div class="md:col-3 mb-2 md:mb-0">
-        <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
+        <a href="/" class="d-inline-flex theme-inverse text-decoration-none">
           <svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
         </a>
       </div>
@@ -120,15 +120,15 @@ export const extra_css = ['headers.css']
   <header class="p-3 mb-3 border-bottom">
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center lg:justify-content-start">
-        <a href="/" class="d-flex align-items-center mb-2 lg:mb-0 link-body-emphasis text-decoration-none">
+        <a href="/" class="d-flex align-items-center mb-2 lg:mb-0 theme-inverse text-decoration-none">
           <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
         </a>
 
         <ul class="nav col-12 lg:col-auto lg:me-auto mb-2 justify-content-center md:mb-0">
           <li><a href="#" class="nav-link px-2 theme-secondary">Overview</a></li>
-          <li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
-          <li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
-          <li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>
+          <li><a href="#" class="nav-link px-2 theme-inverse">Inventory</a></li>
+          <li><a href="#" class="nav-link px-2 theme-inverse">Customers</a></li>
+          <li><a href="#" class="nav-link px-2 theme-inverse">Products</a></li>
         </ul>
 
         <form class="col-12 lg:col-auto mb-3 lg:mb-0 lg:me-3" role="search">
@@ -136,7 +136,7 @@ export const extra_css = ['headers.css']
         </form>
 
         <div class="text-end">
-          <a class="d-block link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+          <a class="d-block theme-inverse text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
           <div class="menu">
@@ -156,7 +156,7 @@ export const extra_css = ['headers.css']
   <header class="py-3 mb-3 border-bottom">
     <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
       <div>
-        <a class="d-flex align-items-center lg:col-4 mb-2 lg:mb-0 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false" aria-label="Bootstrap menu">
+        <a class="d-flex align-items-center lg:col-4 mb-2 lg:mb-0 theme-inverse text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false" aria-label="Bootstrap menu">
           <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
         </a>
         <div class="menu shadow">
@@ -176,7 +176,7 @@ export const extra_css = ['headers.css']
         </form>
 
         <div class="flex-shrink-0">
-          <a class="d-block link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+          <a class="d-block theme-inverse text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
           <div class="menu shadow">
@@ -207,21 +207,21 @@ export const extra_css = ['headers.css']
   <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-body-emphasis px-2 active" aria-current="page">Home</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li>
+        <li class="nav-item"><a href="#" class="nav-link theme-inverse px-2 active" aria-current="page">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">Features</a></li>
+        <li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">Pricing</a></li>
+        <li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">FAQs</a></li>
+        <li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">About</a></li>
       </ul>
       <ul class="nav">
-        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Login</a></li>
-        <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>
+        <li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">Login</a></li>
+        <li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">Sign up</a></li>
       </ul>
     </div>
   </nav>
   <header class="py-3 mb-4 border-bottom">
     <div class="container d-flex flex-wrap justify-content-center">
-      <a href="/" class="d-flex align-items-center mb-3 lg:mb-0 lg:me-auto link-body-emphasis text-decoration-none">
+      <a href="/" class="d-flex align-items-center mb-3 lg:mb-0 lg:me-auto theme-inverse text-decoration-none">
         <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
         <span class="fs-xl">Double header</span>
       </a>
diff --git a/site/src/assets/examples/pricing/index.astro b/site/src/assets/examples/pricing/index.astro
index 6a1c8b064d71..ad9c6c3675e4 100644
--- a/site/src/assets/examples/pricing/index.astro
+++ b/site/src/assets/examples/pricing/index.astro
@@ -15,16 +15,16 @@ export const extra_css = ['pricing.css']
 <div class="container py-3">
   <header>
     <div class="d-flex flex-column md:flex-row align-items-center pb-3 mb-4 border-bottom">
-      <a href="/" class="d-flex align-items-center link-body-emphasis text-decoration-none">
+      <a href="/" class="d-flex align-items-center theme-inverse text-decoration-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
         <span class="fs-xl">Pricing example</span>
       </a>
 
       <nav class="d-inline-flex mt-2 md:mt-0 md:ms-auto">
-        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Features</a>
-        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Enterprise</a>
-        <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Support</a>
-        <a class="py-2 link-body-emphasis text-decoration-none" href="#">Pricing</a>
+        <a class="me-3 py-2 theme-inverse text-decoration-none" href="#">Features</a>
+        <a class="me-3 py-2 theme-inverse text-decoration-none" href="#">Enterprise</a>
+        <a class="me-3 py-2 theme-inverse text-decoration-none" href="#">Support</a>
+        <a class="py-2 theme-inverse text-decoration-none" href="#">Pricing</a>
       </nav>
     </div>
 
diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index 01fe0d310d61..b4fd8845dd62 100644
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -88,7 +88,7 @@ export const extra_js = [{src: 'sidebars.js'}]
   <div class="b-example-divider b-example-vr"></div>
 
   <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 md:mb-0 md:me-auto link-body-emphasis text-decoration-none">
+    <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto theme-inverse text-decoration-none">
       <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-xl">Sidebar</span>
     </a>
@@ -101,25 +101,25 @@ export const extra_js = [{src: 'sidebars.js'}]
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-body-emphasis">
+        <a href="#" class="nav-link theme-inverse">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#speedometer2"/></svg>
           Dashboard
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-body-emphasis">
+        <a href="#" class="nav-link theme-inverse">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#table"/></svg>
           Orders
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-body-emphasis">
+        <a href="#" class="nav-link theme-inverse">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#grid"/></svg>
           Products
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-body-emphasis">
+        <a href="#" class="nav-link theme-inverse">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#people-circle"/></svg>
           Customers
         </a>
@@ -144,7 +144,7 @@ export const extra_js = [{src: 'sidebars.js'}]
   <div class="b-example-divider b-example-vr"></div>
 
   <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
-    <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
+    <a href="/" class="d-block p-3 theme-inverse text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
       <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="visually-hidden">Icon-only</span>
     </a>
@@ -176,7 +176,7 @@ export const extra_js = [{src: 'sidebars.js'}]
       </li>
     </ul>
     <div class="border-top">
-      <a class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
+      <a class="d-flex align-items-center justify-content-center p-3 theme-inverse text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
       </a>
       <div class="menu shadow">
@@ -192,7 +192,7 @@ export const extra_js = [{src: 'sidebars.js'}]
   <div class="b-example-divider b-example-vr"></div>
 
   <div class="flex-shrink-0 p-3" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
+    <a href="/" class="d-flex align-items-center pb-3 mb-3 theme-inverse text-decoration-none border-bottom">
       <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-lg fw-semibold">Collapsible</span>
     </a>
@@ -203,9 +203,9 @@ export const extra_js = [{src: 'sidebars.js'}]
         </button>
         <div class="collapse show" id="home-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Reports</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Overview</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Updates</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Reports</a></li>
           </ul>
         </div>
       </li>
@@ -215,10 +215,10 @@ export const extra_js = [{src: 'sidebars.js'}]
         </button>
         <div class="collapse" id="dashboard-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Weekly</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Monthly</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Overview</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Weekly</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Monthly</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Annually</a></li>
           </ul>
         </div>
       </li>
@@ -228,10 +228,10 @@ export const extra_js = [{src: 'sidebars.js'}]
         </button>
         <div class="collapse" id="orders-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Processed</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">New</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Processed</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Shipped</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Returned</a></li>
           </ul>
         </div>
       </li>
@@ -242,10 +242,10 @@ export const extra_js = [{src: 'sidebars.js'}]
         </button>
         <div class="collapse" id="account-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New...</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Profile</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Settings</a></li>
-            <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Sign out</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">New...</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Profile</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Settings</a></li>
+            <li><a href="#" class="theme-inverse d-inline-flex text-decoration-none rounded">Sign out</a></li>
           </ul>
         </div>
       </li>
@@ -255,7 +255,7 @@ export const extra_js = [{src: 'sidebars.js'}]
   <div class="b-example-divider b-example-vr"></div>
 
   <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-body-emphasis text-decoration-none border-bottom">
+    <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 theme-inverse text-decoration-none border-bottom">
       <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-lg fw-semibold">List group</span>
     </a>