diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index dde351b6a735..98572087fe50 100644
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -1381,16 +1381,16 @@ export const body_class = 'bg-body-tertiary'
           <div class="progress-bar">0%</div>
         </div>
         <div class="progress mb-3" role="progressbar" aria-label="Success example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-          <div class="progress-bar bg-success w-25">25%</div>
+          <div class="progress-bar theme-success w-25">25%</div>
         </div>
         <div class="progress mb-3" role="progressbar" aria-label="Info example with label" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
-          <div class="progress-bar text-bg-info w-50">50%</div>
+          <div class="progress-bar theme-info w-50">50%</div>
         </div>
         <div class="progress mb-3" role="progressbar" aria-label="Warning example with label" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-          <div class="progress-bar text-bg-warning w-75">75%</div>
+          <div class="progress-bar theme-warning w-75">75%</div>
         </div>
         <div class="progress" role="progressbar" aria-label="Danger example with label" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
-          <div class="progress-bar bg-danger w-100">100%</div>
+          <div class="progress-bar theme-danger w-100">100%</div>
         </div>
         `} />
 
diff --git a/site/src/assets/examples/features/index.astro b/site/src/assets/examples/features/index.astro
index 98709bb15022..6f99c63b0ec7 100644
--- a/site/src/assets/examples/features/index.astro
+++ b/site/src/assets/examples/features/index.astro
@@ -62,7 +62,7 @@ export const extra_css = ['features.css']
     <h2 class="pb-2 border-bottom">Columns with icons</h2>
     <div class="row g-4 py-5 row-cols-1 lg:row-cols-3">
       <div class="feature col">
-        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#collection"/></svg>
         </div>
         <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -73,7 +73,7 @@ export const extra_css = ['features.css']
         </a>
       </div>
       <div class="feature col">
-        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#people-circle"/></svg>
         </div>
         <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -84,7 +84,7 @@ export const extra_css = ['features.css']
         </a>
       </div>
       <div class="feature col">
-        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-2 mb-3">
           <svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
         </div>
         <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -292,7 +292,7 @@ export const extra_css = ['features.css']
       <div class="col">
         <div class="row row-cols-1 sm:row-cols-2 g-4">
           <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-4 rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
                 <use href="#collection" />
               </svg>
@@ -302,7 +302,7 @@ export const extra_css = ['features.css']
           </div>
 
           <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-4 rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
                 <use href="#gear-fill" />
               </svg>
@@ -312,7 +312,7 @@ export const extra_css = ['features.css']
           </div>
 
           <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-4 rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
                 <use href="#speedometer" />
               </svg>
@@ -322,7 +322,7 @@ export const extra_css = ['features.css']
           </div>
 
           <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-4 rounded-3">
               <svg class="bi" width="1em" height="1em" aria-hidden="true">
                 <use href="#table" />
               </svg>
diff --git a/site/src/assets/examples/masonry/index.astro b/site/src/assets/examples/masonry/index.astro
index 496c592563de..fcd8bde75932 100644
--- a/site/src/assets/examples/masonry/index.astro
+++ b/site/src/assets/examples/masonry/index.astro
@@ -55,7 +55,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </div>
     </div>
     <div class="sm:col-6 lg:col-4 mb-4">
-      <div class="card text-bg-primary text-center p-3">
+      <div class="card theme-primary theme-contrast text-center p-3">
         <figure class="mb-0">
           <blockquote class="blockquote">
             <p>A well-known quote, contained in a blockquote element.</p>
diff --git a/site/src/assets/examples/pricing/index.astro b/site/src/assets/examples/pricing/index.astro
index 9e8bcbf42fe9..cef2a12d54a2 100644
--- a/site/src/assets/examples/pricing/index.astro
+++ b/site/src/assets/examples/pricing/index.astro
@@ -72,7 +72,7 @@ export const extra_css = ['pricing.css']
       </div>
       <div class="col">
         <div class="card mb-4 rounded-3 shadow-sm border-primary">
-          <div class="card-header py-3 text-bg-primary border-primary">
+          <div class="card-header py-3 theme-primary border-primary">
             <h4 class="my-0 fw-normal">Enterprise</h4>
           </div>
           <div class="card-body">
diff --git a/site/src/assets/examples/product/index.astro b/site/src/assets/examples/product/index.astro
index 4eb5a858d354..e9fdd2a96064 100644
--- a/site/src/assets/examples/product/index.astro
+++ b/site/src/assets/examples/product/index.astro
@@ -95,7 +95,7 @@ export const extra_css = ['product.css']
       </div>
       <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
-    <div class="text-bg-primary md:me-3 pt-3 px-3 md:pt-5 md:px-5 text-center overflow-hidden">
+    <div class="theme-primary theme-contrast md:me-3 pt-3 px-3 md:pt-5 md:px-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/src/content/docs/utilities/display.mdx b/site/src/content/docs/utilities/display.mdx
index 531aac32b4b5..932448f234e6 100644
--- a/site/src/content/docs/utilities/display.mdx
+++ b/site/src/content/docs/utilities/display.mdx
@@ -47,11 +47,11 @@ There’s no more clearfix helper in Bootstrap 6 as it’s an outdated technique
 
 ## Examples
 
-<Example code={`<div class="d-inline p-2 text-bg-primary">d-inline</div>
-<div class="d-inline p-2 text-bg-dark">d-inline</div>`} />
+<Example code={`<div class="d-inline p-2 theme-primary theme-contrast">d-inline</div>
+<div class="d-inline p-2 theme-secondary theme-contrast">d-inline</div>`} />
 
-<Example code={`<span class="d-block p-2 text-bg-primary">d-block</span>
-<span class="d-block p-2 text-bg-dark">d-block</span>`} />
+<Example code={`<span class="d-block p-2 theme-primary theme-contrast">d-block</span>
+<span class="d-block p-2 theme-secondary theme-contrast">d-block</span>`} />
 
 ## Hiding elements