diff --git a/templates/docs/examples/patterns/tabs/content-dark.html b/templates/docs/examples/patterns/tabs/content-dark.html
index 1e524dcbe..262e54def 100644
--- a/templates/docs/examples/patterns/tabs/content-dark.html
+++ b/templates/docs/examples/patterns/tabs/content-dark.html
@@ -3,55 +3,55 @@
 
 {% block standalone_css %}patterns_tabs{% endblock %}
 
+{% set is_dark = true %}
 {% block content %}
-<div class="p-strip--dark" style="background: #262626;">
-  <div class="p-tabs is-dark">
-    <div class="p-tabs__list" role="tablist" aria-label="Juju technology">
-      <div class="p-tabs__item">
-        <button
-          class="p-tabs__link"
-          role="tab"
-          aria-selected="true"
-          aria-controls="olm-tab"
-          id="olm"
-        >Charmed Operator Lifecycle Manager</button>
-      </div>
-      <div class="p-tabs__item">
-        <button
-          class="p-tabs__link"
-          role="tab"
-          aria-selected="false"
-          aria-controls="operator-tab"
-          id="operator"
-          tabindex="-1"
-        >Charmed Operator SDK</button>
-      </div>
-      <div class="p-tabs__item">
-        <button
-          class="p-tabs__link"
-          role="tab"
-          aria-selected="false"
-          aria-controls="charmhub-tab"
-          id="charmhub"
-          tabindex="-1"
-        >Charmhub</button>
-      </div>
+<div class="p-tabs">
+  <div class="p-tabs__list" role="tablist" aria-label="Juju technology">
+    <div class="p-tabs__item">
+      <button
+        class="p-tabs__link"
+        role="tab"
+        aria-selected="true"
+        aria-controls="olm-tab"
+        id="olm"
+      >Charmed Operator Lifecycle Manager</button>
     </div>
-  
-    <div tabindex="0" role="tabpanel" id="olm-tab" aria-labelledby="olm">
-      <p>A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.</p>
+    <div class="p-tabs__item">
+      <button
+        class="p-tabs__link"
+        role="tab"
+        aria-selected="false"
+        aria-controls="operator-tab"
+        id="operator"
+        tabindex="-1"
+      >Charmed Operator SDK</button>
     </div>
-  
-    <div tabindex="0" role="tabpanel" id="operator-tab" aria-labelledby="operator" hidden="hidden">
-      <p>A set of tools to help you write Charmed Operators and to package them as Charms.</p>
-    </div>
-  
-    <div tabindex="0" role="tabpanel" id="charmhub-tab" aria-labelledby="charmhub" hidden="hidden">
-      <p>A repository for charms - from Observability to Data to Identity and more.</p>
+    <div class="p-tabs__item">
+      <button
+        class="p-tabs__link"
+        role="tab"
+        aria-selected="false"
+        aria-controls="charmhub-tab"
+        id="charmhub"
+        tabindex="-1"
+      >Charmhub</button>
     </div>
   </div>
+
+  <div tabindex="0" role="tabpanel" id="olm-tab" aria-labelledby="olm">
+    <p>A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.</p>
+  </div>
+
+  <div tabindex="0" role="tabpanel" id="operator-tab" aria-labelledby="operator" hidden="hidden">
+    <p>A set of tools to help you write Charmed Operators and to package them as Charms.</p>
+  </div>
+
+  <div tabindex="0" role="tabpanel" id="charmhub-tab" aria-labelledby="charmhub" hidden="hidden">
+    <p>A repository for charms - from Observability to Data to Identity and more.</p>
+  </div>
 </div>
 
+
 <script>
   {% include 'docs/examples/patterns/tabs/_script.js' %}
 </script>