diff --git a/interactive/components/details/Guide.vue b/interactive/components/details/Guide.vue
index 063f88b393..12e9f07b54 100644
--- a/interactive/components/details/Guide.vue
+++ b/interactive/components/details/Guide.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isDark } from '#imports'
 import type { GuideItem } from '~/types'
 
 const { item } = defineProps<{
@@ -18,7 +19,7 @@ watch(
 
 <template>
   <DetailsBase v-if="component" :title="item.title">
-    <div class="markdown-body max-w-full mt4 text-left">
+    <div class="markdown-body max-w-full mt4 text-left" :class="isDark ? 'dark' : 'light'">
       <component :is="component" />
     </div>
   </DetailsBase>
diff --git a/interactive/markdown.css b/interactive/markdown.css
index fb58b94401..853a7ba85f 100644
--- a/interactive/markdown.css
+++ b/interactive/markdown.css
@@ -895,4 +895,16 @@
   s {
     opacity: 0.6;
   }
+
+  &.light {
+    .shiki.Vitesse.Dark {
+      display: none;
+    }
+  }
+
+  &.dark {
+    .shiki.Vitesse.Light {
+      display: none;
+    }
+  }
 }