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

elliot-zzh · zyyv · web-flow · commit 61d913fcc8bf · 2023-01-12T19:23:00.000+08:00
* 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 &lt;1633711653@qq.com&gt;
diff --git 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
@@ -895,4 +895,16 @@
   s {
     opacity: 0.6;
   }
+
+  &.light {
+    .shiki.Vitesse.Dark {
+      display: none;
+    }
+  }
+
+  &.dark {
+    .shiki.Vitesse.Light {
+      display: none;
+    }
+  }
 }
