From 61d913fcc8bf8f07d91de366ece22fa03ad185d7 Mon Sep 17 00:00:00 2001
From: Zheheng Zhang <76390451+zhangzheheng12345@users.noreply.github.com>
Date: Thu, 12 Jan 2023 19:23:00 +0800
Subject: [PATCH] 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 |  3 ++-
 interactive/markdown.css                 | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

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;
+    }
+  }
 }