fix(interactive): hide opposite theme code blocks (#2073)

* feat: Add a list of loaded presets in summary

* fix(interactive): Codes in guides are shown in both light and dark theme

* fix(interactive):remove showing a list of presets in summary

* chore: refactor small things

* chore: update

Co-authored-by: Chris <1633711653@qq.com>

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>

interactive/markdown.css

@@ -895,4 +895,16 @@
   s {
     opacity: 0.6;
   }
+
+  &.light {
+    .shiki.Vitesse.Dark {
+      display: none;
+    }
+  }
+
+  &.dark {
+    .shiki.Vitesse.Light {
+      display: none;
+    }
+  }
 }