From fb462e4ed49ce9902194c9e3430d97fc35996648 Mon Sep 17 00:00:00 2001
From: czhlin <2324133088@qq.com>
Date: Tue, 23 Dec 2025 16:27:47 +0800
Subject: [PATCH] fix(vscode-extension): fix vscode theme issue

fix #132
---
 .changeset/fresh-regions-divide.md            |  5 ++++
 .../src/components/AppProvider.vue            | 23 +++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/fresh-regions-divide.md

diff --git a/.changeset/fresh-regions-divide.md b/.changeset/fresh-regions-divide.md
new file mode 100644
index 0000000..7f9aedb
--- /dev/null
+++ b/.changeset/fresh-regions-divide.md
@@ -0,0 +1,5 @@
+---
+"alova-vscode-extension": patch
+---
+
+fix vscode theme issue
diff --git a/packages/vscode-extension/src/components/AppProvider.vue b/packages/vscode-extension/src/components/AppProvider.vue
index 2363653..94b20c1 100644
--- a/packages/vscode-extension/src/components/AppProvider.vue
+++ b/packages/vscode-extension/src/components/AppProvider.vue
@@ -7,13 +7,10 @@ import hljs from '~/utils/hljs'
 import { normalizeLocale } from '~/utils/i18n'
 
 const handlers = useHandlers()
-
 const observer = new MutationObserver((mutations) => {
   mutations.forEach((mutation) => {
     if (mutation.attributeName === 'data-vscode-theme-kind') {
-      const target = mutation.target as HTMLHtmlElement
-      const themeKind = target.getAttribute('data-vscode-theme-kind')
-      toggleDark(!themeKind?.includes('light'))
+      hanldeThemeKind(mutation.target as HTMLElement)
     }
   })
 })
@@ -24,14 +21,26 @@ observer.observe(document.body, {
   attributeOldValue: true,
   subtree: true,
 })
+
 function handleLanguageChange(value: string) {
   const language = normalizeLocale(value)
-  availableLocales.includes(language) && loadLanguageAsync(language)
+  if (availableLocales.includes(language)) {
+    loadLanguageAsync(language)
+  }
+}
+
+function hanldeThemeKind(target: HTMLElement) {
+  const themeKind = target.getAttribute('data-vscode-theme-kind')
+  toggleDark(!themeKind?.includes('light'))
 }
+
 const theme = computed(() => isDark.value ? darkTheme : null)
+
 onMounted(async () => {
-  const language = await handlers.getLanguage()
-  handleLanguageChange(language)
+  // 设置初始化主题
+  hanldeThemeKind(document.body)
+  // 加载语言
+  handleLanguageChange(await handlers.getLanguage())
 })
 
 onUnmounted(() => {