fix(playground): change shiki theme on colorMode change

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · May 2, 2024 · f15f84e · f15f84e
1 parent d9121d0
commit f15f84e
Showing 1 changed file with 7 additions and 8 deletions.
diff --git 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>