fix: 解决跟随系统主题编辑器未监听的问题

Author: codexu

src/app/core/article/md-editor.tsx

@@ -25,7 +25,7 @@ import { open } from '@tauri-apps/plugin-shell'
 export function MdEditor() {
   const [editor, setEditor] = useState<Vditor>();
   const { currentArticle, saveCurrentArticle, loading, activeFilePath, matchPosition, setMatchPosition } = useArticleStore()
-  const { theme, setTheme } = useTheme()
+  const { theme } = useTheme()
   const t = useTranslations('article.editor')
   const { currentLocale } = useI18n()
   const [localMode, setLocalMode] = useLocalStorage<'ir' | 'sv' | 'wysiwyg'>('useLocalMode', 'ir')
@@ -330,6 +330,15 @@ export function MdEditor() {
     }
   }
 
+  function setTheme(theme: string) {
+    if (editor) {
+      const editorTheme = theme === 'dark' ? 'dark' : 'light'
+      const contentTheme = theme === 'dark' ? 'dark' : 'light'
+      const codeTheme = theme === 'dark' ? 'github-dark' : 'github-light'
+      editor.setTheme(editorTheme === 'dark' ? 'dark' : 'classic', contentTheme, codeTheme)
+    }
+  }
+
   useEffect(() => {
     if (!activeFilePath) {
       editor?.destroy()
@@ -359,20 +368,31 @@ export function MdEditor() {
   }, [loading])
 
   useEffect(() => {
+    let editorTheme: string | undefined
     if (theme === 'system') {
       if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        setTheme('dark')  
-      } else {
-        setTheme('light')
+        editorTheme = 'dark'
       }
     } else {
-      if (editor) {
-        const editorTheme = theme === 'dark' ? 'dark' : 'light'
-        const contentTheme = theme === 'dark' ? 'dark' : 'light'
-        const codeTheme = theme === 'dark' ? 'github-dark' : 'github-light'
-        editor.setTheme(editorTheme === 'dark' ? 'dark' : 'classic', contentTheme, codeTheme)
+      editorTheme = theme
+    }
+    if (editor) {
+      setTheme(editorTheme || 'light')
+    }
+  }, [theme, editor])
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = () => {
+      if (editor && theme === 'system') {
+        const editorTheme = matchMedia.matches ? 'dark' : 'light'
+        setTheme(editorTheme)
       }
     }
+    matchMedia.addEventListener('change', handler)
+    return () => {
+      matchMedia.removeEventListener('change', handler)
+    }
   }, [theme, editor])
 
   useEffect(() => {

src/app/core/record/chat/chat-preview.tsx

@@ -44,6 +44,20 @@ export default function ChatPreview({text}: {text: string}) {
       setMdTheme(theme as Themes)
     }
   }, [theme])
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = () => {
+      if (theme === 'system') {
+        const mdTheme = matchMedia.matches ? 'dark' : 'light'
+        setMdTheme(mdTheme)
+      }
+    }
+    matchMedia.addEventListener('change', handler)
+    return () => {
+      matchMedia.removeEventListener('change', handler)
+    }
+  }, [theme])
 
   return <div>
     <MdPreview

src/components/mode-toggle.tsx

@@ -1,76 +1,71 @@
 "use client"
 
 import * as React from "react"
-import { Laptop, Moon, Sun } from "lucide-react"
+import { Moon, Sun, SunMoon } from "lucide-react"
 import { useTheme } from "next-themes"
 import { useTranslations } from 'next-intl'
-
-import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { SidebarMenuButton } from "./ui/sidebar"
+import { SidebarMenuButton } from "@/components/ui/sidebar";
+import { Button } from "@/components/ui/button";
 
-function Toggle() {
+export function ModeToggle() {
   const t = useTranslations();
   const { theme, setTheme } = useTheme()
   const [open, setOpen] = React.useState(false)
 
-  // 循环切换主题：light -> dark -> system -> light
-  const cycleTheme = () => {
-    if (theme === "light") setTheme("dark")
-    else if (theme === "dark") setTheme("system")
-    else setTheme("light")
-  }
-
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={cycleTheme}
+        <SidebarMenuButton asChild className="md:h-8 md:p-0"  
+          tooltip={{
+            children: t('common.theme'),
+            hidden: false,
+          }}
         >
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">{t('common.theme')}</span>
-        </Button>
+          <a href="#">
+            <div className="flex size-8 items-center justify-center rounded-lg">
+              <Button
+                variant="ghost"
+                size="sm" 
+              >
+                <ThemeIcon theme={theme} />
+              </Button>
+            </div>
+          </a>
+        </SidebarMenuButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent align="end" side="right">
         <DropdownMenuItem onClick={() => setTheme("light")}>
           <Sun className="mr-2 h-4 w-4" />
-          <span>{t('common.light')}</span>
+          <span>{t('common.light')} {theme === "light" && "✓"}</span>
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("dark")}>
           <Moon className="mr-2 h-4 w-4" />
-          <span>{t('common.dark')}</span>
+          <span>{t('common.dark')} {theme === "dark" && "✓"}</span>
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Laptop className="mr-2 h-4 w-4" />
-          <span>{t('common.system')}</span>
+          <SunMoon className="mr-2 h-4 w-4" />
+          <span>{t('common.system')} {theme === "system" && "✓"}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )
 }
 
-export function ModeToggle() {
-  const t = useTranslations();
-  return (
-    <SidebarMenuButton asChild className="md:h-8 md:p-0"
-      tooltip={{
-        children: t('common.theme'),
-        hidden: false,
-      }}
-    >
-      <a href="#">
-        <div className="flex size-8 items-center justify-center rounded-lg">
-          <Toggle />
-        </div>
-      </a>
-    </SidebarMenuButton>
-  )
-}
+function ThemeIcon({ theme }: { theme?: string }) {
+  switch (theme) {
+    case "light":
+      return <Sun />
+    case "dark":
+      return <Moon />
+    case "system":
+      return <SunMoon />
+    default:
+      return <SunMoon />
+  }
+}