From f15f84e9787b4dd2189cf3e78605410ce393f0d7 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Fri, 3 May 2024 07:44:12 +0800
Subject: [PATCH] fix(playground): change shiki theme on colorMode change

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 playground/src/App.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/playground/src/App.vue b/playground/src/App.vue
index ff75999..03a20ba 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -192,19 +192,18 @@ async function getShiki(
   });
 }
 
-let highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
-
-watch([colorMode, mode, len, min, max, refreshKey], () =>
-  getShiki(highlighter),
-);
-onMounted(async () => {
+async function getShikiHighlighter() {
   highlighter = await getHighlighter({
     themes: [colorMode.value === 'light' ? 'min-light' : 'github-dark'],
     langs: ['typescript'],
   });
-
   await getShiki(highlighter);
-});
+}
+
+let highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
+watch([mode, len, min, max, refreshKey], () => getShiki(highlighter));
+watch(colorMode, getShikiHighlighter);
+onMounted(getShikiHighlighter);
 </script>
 
 <style>