fix: shiki code highlight toggle theme

src/assets/main.css

@@ -5,3 +5,21 @@
     @apply overflow-hidden tracking-wide;
   }
 }
+
+@layer shiki {
+  html.dark .shiki,
+  html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* 可选，如果你还希望同步字体样式 */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+    transition: background-color var(--default-transition-duration)
+      var(--default-transition-timing-function);
+  }
+  pre.shiki {
+    transition: background-color var(--default-transition-duration)
+      var(--default-transition-timing-function);
+  }
+}

src/views/about/index.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { NCard, NSplit, NButton, NScrollbar, NTag } from 'naive-ui'
-import { ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 
 import packageJson from '@/../package.json'
-import { usePersonalization } from '@/composable/usePersonalization'
 
 defineOptions({
   name: 'About',
@@ -13,8 +12,6 @@ let codeToHtml: any
 
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
-const { isDark } = usePersonalization()
-
 const { dependencies, devDependencies } = packageJson
 
 const directoryStructureHighlight = ref('')
@@ -146,31 +143,43 @@ const dir = `📂 lithe-admin
 ├── 📄 vite.config.ts
 └── 📄 vitest.config.ts`
 
-watch(
-  isDark,
-  async () => {
-    if (!codeToHtml) {
-      // @ts-ignore
-      const shiki = await import('https://cdn.jsdelivr.net/npm/shiki@3.7.0/+esm')
-      codeToHtml = shiki.codeToHtml
-    }
-
-    const theme = isDark.value ? 'dark-plus' : 'min-light'
+onMounted(async () => {
+  if (!codeToHtml) {
+    // @ts-ignore
+    const shiki = await import('https://cdn.jsdelivr.net/npm/shiki@3.7.0/+esm')
+    codeToHtml = shiki.codeToHtml
+  }
 
-    codeToHtml(dir, { lang: 'markdown', theme })
-      .then((result: string) => (directoryStructureHighlight.value = result))
-      .catch(() => (directoryStructureHighlight.value = dir))
+  codeToHtml(dir, {
+    lang: 'markdown',
+    themes: {
+      light: 'min-light',
+      dark: 'dark-plus',
+    },
+  })
+    .then((result: string) => (directoryStructureHighlight.value = result))
+    .catch(() => (directoryStructureHighlight.value = dir))
 
-    codeToHtml(JSON.stringify(dependencies, null, 2), { lang: 'json', theme })
-      .then((result: string) => (dependenciesCodeHighlight.value = result))
-      .catch(() => (dependenciesCodeHighlight.value = JSON.stringify(dependencies, null, 2)))
+  codeToHtml(JSON.stringify(dependencies, null, 2), {
+    lang: 'json',
+    themes: {
+      light: 'min-light',
+      dark: 'dark-plus',
+    },
+  })
+    .then((result: string) => (dependenciesCodeHighlight.value = result))
+    .catch(() => (dependenciesCodeHighlight.value = JSON.stringify(dependencies, null, 2)))
 
-    codeToHtml(JSON.stringify(devDependencies, null, 2), { lang: 'json', theme })
-      .then((result: string) => (devDependenciesCodeHighlight.value = result))
-      .catch(() => (devDependenciesCodeHighlight.value = JSON.stringify(devDependencies, null, 2)))
-  },
-  { immediate: true },
-)
+  codeToHtml(JSON.stringify(devDependencies, null, 2), {
+    lang: 'json',
+    themes: {
+      light: 'min-light',
+      dark: 'dark-plus',
+    },
+  })
+    .then((result: string) => (devDependenciesCodeHighlight.value = result))
+    .catch(() => (devDependenciesCodeHighlight.value = JSON.stringify(devDependencies, null, 2)))
+})
 </script>
 <template>
   <div class="flex flex-col gap-y-4 p-4">

src/views/data-show/data-form/index.vue

@@ -22,7 +22,6 @@ import {
 } from 'naive-ui'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
-import { usePersonalization } from '@/composable/usePersonalization'
 import { useResettableReactive } from '@/composable/useResettable'
 
 import type { FormRules } from 'naive-ui'
@@ -45,8 +44,6 @@ defineOptions({
 
 let codeToHtml: any
 
-const { isDark } = usePersonalization()
-
 const message = useMessage()
 
 const formRef = useTemplateRef<InstanceType<typeof NForm>>('formRef')
@@ -186,9 +183,9 @@ function removePhoneField(index: number) {
 }
 
 watch(
-  [form, isDark],
+  [form],
   async (newVal) => {
-    const [form, isDark] = newVal
+    const [form] = newVal
 
     if (!codeToHtml) {
       // @ts-ignore
@@ -196,13 +193,23 @@ watch(
       codeToHtml = shiki.codeToHtml
     }
 
-    const theme = isDark ? 'dark-plus' : 'min-light'
-
-    codeToHtml(JSON.stringify(form, null, 2), { lang: 'json', theme })
+    codeToHtml(JSON.stringify(form, null, 2), {
+      lang: 'json',
+      themes: {
+        dark: 'dark-plus',
+        light: 'min-light',
+      },
+    })
       .then((result: string) => (formCodeHighlight.value = result))
       .catch(() => (formCodeHighlight.value = JSON.stringify(form, null, 2)))
 
-    codeToHtml(JSON.stringify(rules, null, 2), { lang: 'json', theme })
+    codeToHtml(JSON.stringify(rules, null, 2), {
+      lang: 'json',
+      themes: {
+        dark: 'dark-plus',
+        light: 'min-light',
+      },
+    })
       .then((result: string) => (rulesCodeHighlight.value = result))
       .catch(() => (rulesCodeHighlight.value = JSON.stringify(rules, null, 2)))
   },

src/views/drag-drop/index.vue

@@ -4,7 +4,6 @@ import { ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
 import { EmptyPlaceholder } from '@/components'
-import { usePersonalization } from '@/composable/usePersonalization'
 
 import type { UseDraggableReturn } from 'vue-draggable-plus'
 
@@ -16,8 +15,6 @@ let codeToHtml: any
 
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
-const { isDark } = usePersonalization()
-
 const baseListCodeHighlight = ref()
 
 const gridListCodeHighlight = ref()
@@ -68,9 +65,9 @@ function removeTask(element: Record<'name' | 'id' | 'key', string>) {
 }
 
 watch(
-  [baseList, gridList, cloneTaskList, isDark],
+  [baseList, gridList, cloneTaskList],
   async (newVal) => {
-    const [baseList, gridList, cloneList2, isDark] = newVal
+    const [baseList, gridList, cloneList2] = newVal
 
     if (!codeToHtml) {
       // @ts-ignore
@@ -78,17 +75,33 @@ watch(
       codeToHtml = shiki.codeToHtml
     }
 
-    const theme = isDark ? 'dark-plus' : 'min-light'
-
-    codeToHtml(JSON.stringify(baseList, null, 2), { lang: 'json', theme })
+    codeToHtml(JSON.stringify(baseList, null, 2), {
+      lang: 'json',
+      themes: {
+        dark: 'dark-plus',
+        light: 'min-light',
+      },
+    })
       .then((result: string) => (baseListCodeHighlight.value = result))
       .catch(() => (baseListCodeHighlight.value = JSON.stringify(baseList, null, 2)))
 
-    codeToHtml(JSON.stringify(gridList, null, 2), { lang: 'json', theme })
+    codeToHtml(JSON.stringify(gridList, null, 2), {
+      lang: 'json',
+      themes: {
+        dark: 'dark-plus',
+        light: 'min-light',
+      },
+    })
       .then((result: string) => (gridListCodeHighlight.value = result))
       .catch(() => (gridListCodeHighlight.value = JSON.stringify(gridList, null, 2)))
 
-    codeToHtml(JSON.stringify(cloneList2, null, 2), { lang: 'json', theme })
+    codeToHtml(JSON.stringify(cloneList2, null, 2), {
+      lang: 'json',
+      themes: {
+        dark: 'dark-plus',
+        light: 'min-light',
+      },
+    })
       .then((result: string) => (cloneList2CodeHighlight.value = result))
       .catch(() => (cloneList2CodeHighlight.value = JSON.stringify(cloneList2, null, 2)))
   },