fix(theme): enhance theme handling and appearance synchronization (#1414)

* fix(theme): enhance theme handling and appearance synchronization

* chore: fmt

Author: zhangmo8

src/renderer/src/App.vue

@@ -12,7 +12,7 @@ import { DEEPLINK_EVENTS, NOTIFICATION_EVENTS, SHORTCUT_EVENTS } from './events'
 import { Toaster } from '@shadcn/components/ui/sonner'
 import { useToast } from '@/components/use-toast'
 import { useUiSettingsStore } from '@/stores/uiSettingsStore'
-import { useThemeStore } from '@/stores/theme'
+import { useThemeStore, type ThemeMode } from '@/stores/theme'
 import { useLanguageStore } from '@/stores/language'
 import { useI18n } from 'vue-i18n'
 import TranslatePopup from '@/components/popup/TranslatePopup.vue'
@@ -56,25 +56,32 @@ const currentErrorId = ref<string | null>(null)
 const errorDisplayTimer = ref<number | null>(null)
 
 const { setup: setupMcpDeeplink, cleanup: cleanupMcpDeeplink } = useMcpInstallDeeplinkHandler()
-// Watch theme and font size changes, update body class directly
+
+const resolveThemeName = (themeMode: ThemeMode, isDark: boolean) => {
+  return themeMode === 'system' ? (isDark ? 'dark' : 'light') : themeMode
+}
+
+const syncAppearanceClasses = (themeName: string, fontSizeClass: string) => {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  for (const target of [document.documentElement, document.body]) {
+    target.classList.remove('light', 'dark', 'system')
+    target.classList.add(themeName)
+    target.classList.remove('text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl')
+    target.classList.add(fontSizeClass)
+  }
+}
+
 watch(
-  [() => themeStore.themeMode, () => uiSettingsStore.fontSizeClass],
-  ([newTheme, newFontSizeClass], [oldTheme, oldFontSizeClass]) => {
-    let newThemeName = newTheme
-    if (newTheme === 'system') {
-      newThemeName = themeStore.isDark ? 'dark' : 'light'
-    }
-    if (oldTheme) {
-      document.documentElement.classList.remove(oldTheme)
-    }
-    if (oldFontSizeClass) {
-      document.documentElement.classList.remove(oldFontSizeClass)
-    }
-    document.documentElement.classList.add(newThemeName)
-    document.documentElement.classList.add(newFontSizeClass)
-    console.log('newTheme', newThemeName)
+  [() => themeStore.themeMode, () => themeStore.isDark, () => uiSettingsStore.fontSizeClass],
+  ([themeMode, isDark, fontSizeClass]) => {
+    const nextThemeName = resolveThemeName(themeMode, isDark)
+    syncAppearanceClasses(nextThemeName, fontSizeClass)
+    console.log('newTheme', nextThemeName)
   },
-  { immediate: false } // Initialization is handled in onMounted
+  { immediate: true }
 )
 
 // Handle error notifications
@@ -304,10 +311,6 @@ watch(
 )
 
 onMounted(() => {
-  // Set initial body class
-  document.body.classList.add(themeStore.themeMode)
-  document.body.classList.add(uiSettingsStore.fontSizeClass)
-
   window.addEventListener('keydown', handleEscKey)
 
   // initialize store data

src/renderer/src/components/markdown/MarkdownRenderer.vue

@@ -3,6 +3,8 @@
     <NodeRenderer
       :content="debouncedContent"
       :isDark="themeStore.isDark"
+      :codeBlockDarkTheme="codeBlockDarkTheme"
+      :codeBlockLightTheme="codeBlockLightTheme"
       :codeBlockMonacoOptions="codeBlockMonacoOption"
       @copy="$emit('copy', $event)"
     />
@@ -44,6 +46,9 @@ const referenceNode = ref<HTMLElement | null>(null)
 const debouncedContent = ref(props.content)
 const effectiveMessageId = computed(() => props.messageId ?? fallbackMessageId)
 const effectiveThreadId = computed(() => props.threadId ?? fallbackThreadId)
+const codeBlockThemes = ['vitesse-dark', 'vitesse-light'] as const
+const codeBlockDarkTheme = codeBlockThemes[0]
+const codeBlockLightTheme = codeBlockThemes[1]
 const codeBlockMonacoOption = computed(() => ({
   fontFamily: uiSettingsStore.formattedCodeFontFamily
 }))
@@ -114,6 +119,11 @@ setCustomComponents({
     }
     return h(CodeBlockNode, {
       ..._props,
+      isDark: themeStore.isDark,
+      darkTheme: codeBlockDarkTheme,
+      lightTheme: codeBlockLightTheme,
+      themes: [...codeBlockThemes],
+      monacoOptions: codeBlockMonacoOption.value,
       onPreviewCode(v) {
         artifactStore.showArtifact(
           {

src/renderer/src/components/sidepanel/viewer/WorkspaceCodePane.vue

@@ -10,8 +10,9 @@
 </template>
 
 <script setup lang="ts">
-import * as monaco from 'monaco-editor'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { useMonaco } from 'stream-monaco'
+import { useThemeStore } from '@/stores/theme'
 import { useUiSettingsStore } from '@/stores/uiSettingsStore'
 
 type WorkspaceCodeSource = {
@@ -26,13 +27,31 @@ const props = defineProps<{
 }>()
 
 const uiSettingsStore = useUiSettingsStore()
+const themeStore = useThemeStore()
 const editorRef = ref<HTMLElement | null>(null)
-const editor = shallowRef<monaco.editor.IStandaloneCodeEditor | null>(null)
-const model = shallowRef<monaco.editor.ITextModel | null>(null)
-
-let resizeObserver: ResizeObserver | null = null
-let themeObserver: MutationObserver | null = null
-let currentSourceId: string | null = null
+const editorInitialized = ref(false)
+let createEditorTask: Promise<void> | null = null
+const resolvedTheme = computed(() => (themeStore.isDark ? 'vitesse-dark' : 'vitesse-light'))
+
+const { createEditor, updateCode, cleanupEditor, getEditorView, getEditor } = useMonaco({
+  readOnly: true,
+  domReadOnly: true,
+  automaticLayout: true,
+  wordWrap: 'on',
+  wrappingIndent: 'same',
+  scrollBeyondLastLine: false,
+  minimap: { enabled: false },
+  lineNumbers: 'on',
+  renderLineHighlight: 'none',
+  contextmenu: false,
+  themes: ['vitesse-dark', 'vitesse-light'],
+  theme: resolvedTheme.value,
+  fontFamily: uiSettingsStore.formattedCodeFontFamily,
+  padding: {
+    top: 12,
+    bottom: 12
+  }
+})
 
 const LANGUAGE_ALIASES: Record<string, string> = {
   md: 'markdown',
@@ -117,105 +136,57 @@ const resolveLanguage = (source: WorkspaceCodeSource): string => {
 
 const resolvedLanguage = computed(() => resolveLanguage(props.source))
 
-const getThemeName = () => {
-  return document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs'
-}
-
-const applyTheme = () => {
-  monaco.editor.setTheme(getThemeName())
+const applyFontFamily = (fontFamily: string) => {
+  getEditorView()?.updateOptions({ fontFamily })
 }
 
-const layoutEditor = () => {
-  editor.value?.layout()
-}
-
-const disposeModel = () => {
-  model.value?.dispose()
-  model.value = null
-  currentSourceId = null
+const applyTheme = async () => {
+  try {
+    getEditor().setTheme(resolvedTheme.value)
+  } catch (error) {
+    console.warn('[WorkspaceCodePane] Failed to apply Monaco theme:', error)
+  }
 }
 
-const syncModel = () => {
-  if (!editor.value) {
+const syncEditor = async () => {
+  const editorElement = editorRef.value
+  if (!editorElement) {
     return
   }
 
-  const nextLanguage = resolvedLanguage.value
   const nextContent = props.source.content ?? ''
+  const nextLanguage = resolvedLanguage.value
+  const hasEditor = Boolean(editorElement.querySelector('.monaco-editor'))
 
-  if (!model.value || currentSourceId !== props.source.id) {
-    disposeModel()
-    model.value = monaco.editor.createModel(nextContent, nextLanguage)
-    currentSourceId = props.source.id
-    editor.value.setModel(model.value)
-    return
-  }
-
-  if (model.value.getLanguageId() !== nextLanguage) {
-    monaco.editor.setModelLanguage(model.value, nextLanguage)
-  }
-
-  if (model.value.getValue() !== nextContent) {
-    model.value.setValue(nextContent)
-  }
-}
+  if (!hasEditor || !editorInitialized.value) {
+    if (createEditorTask) {
+      await createEditorTask
+      return
+    }
 
-const ensureEditor = async () => {
-  if (editor.value || !editorRef.value) {
+    createEditorTask = (async () => {
+      await createEditor(editorElement, nextContent, nextLanguage)
+      editorInitialized.value = true
+      await applyTheme()
+      applyFontFamily(uiSettingsStore.formattedCodeFontFamily)
+    })()
+
+    try {
+      await createEditorTask
+    } finally {
+      createEditorTask = null
+    }
     return
   }
 
-  applyTheme()
-
-  editor.value = monaco.editor.create(editorRef.value, {
-    readOnly: true,
-    domReadOnly: true,
-    automaticLayout: false,
-    wordWrap: 'on',
-    wrappingIndent: 'same',
-    scrollBeyondLastLine: false,
-    minimap: { enabled: false },
-    lineNumbers: 'on',
-    renderLineHighlight: 'none',
-    contextmenu: false,
-    fontFamily: uiSettingsStore.formattedCodeFontFamily,
-    padding: {
-      top: 12,
-      bottom: 12
-    }
-  })
-
-  syncModel()
-  await nextTick()
-  layoutEditor()
+  updateCode(nextContent, nextLanguage)
 }
 
-onMounted(() => {
-  void ensureEditor()
-
-  if (typeof ResizeObserver !== 'undefined' && editorRef.value) {
-    resizeObserver = new ResizeObserver(() => {
-      layoutEditor()
-    })
-    resizeObserver.observe(editorRef.value)
-  }
-
-  themeObserver = new MutationObserver(() => {
-    applyTheme()
-  })
-  themeObserver.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['class']
-  })
-})
-
 watch(
-  () => [props.source.id, props.source.content, props.source.language, props.source.type] as const,
+  () => [editorRef.value, props.source.id, props.source.content, resolvedLanguage.value] as const,
   async () => {
-    await ensureEditor()
-    syncModel()
     await nextTick()
-    layoutEditor()
+    await syncEditor()
   },
   {
     immediate: true,
@@ -226,18 +197,37 @@ watch(
 watch(
   () => uiSettingsStore.formattedCodeFontFamily,
   (fontFamily) => {
-    editor.value?.updateOptions({ fontFamily })
-    layoutEditor()
+    applyFontFamily(fontFamily)
+  }
+)
+
+watch(
+  resolvedTheme,
+  () => {
+    if (!editorInitialized.value) {
+      return
+    }
+
+    void applyTheme()
+  },
+  {
+    flush: 'post'
   }
 )
 
+watch(editorRef, (value) => {
+  if (value) {
+    return
+  }
+
+  cleanupEditor()
+  editorInitialized.value = false
+  createEditorTask = null
+})
+
 onBeforeUnmount(() => {
-  resizeObserver?.disconnect()
-  resizeObserver = null
-  themeObserver?.disconnect()
-  themeObserver = null
-  editor.value?.dispose()
-  editor.value = null
-  disposeModel()
+  cleanupEditor()
+  editorInitialized.value = false
+  createEditorTask = null
 })
 </script>