feat(#159): 主题跟随系统

Author: rainnoon

messages/en.json

@@ -10,6 +10,9 @@
     "edit": "Edit",
     "create": "Create",
     "theme": "Theme",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System",
     "pin": "Pin",
     "unpin": "Unpin",
     "settings": "Settings",
@@ -136,6 +139,7 @@
     },
     "theme": {
       "title": "Appearance",
+      "appTheme": "Application theme",
       "previewTheme": "Preview content theme",
       "codeTheme": "Code block highlight theme",
       "selectTheme": "Select Theme"

messages/ja.json

@@ -11,8 +11,11 @@
     "edit": "編集",
     "create": "作成",
     "theme": "テーマ",
+    "light": "ライトモード",
+    "dark": "ダークモード",
+    "system": "システム設定に従う",
     "pin": "ピン留め",
-    "unpin": "キャンセルピン留め",
+    "unpin": "ピン留めを解除",
     "settings": "設定",
     "sync": "同期",
     "language": "言語",
@@ -134,6 +137,7 @@
     },
     "theme": {
       "title": "外観",
+      "appTheme": "アプリテーマ",
       "previewTheme": "プレビュー用テーマ",
       "codeTheme": "コードブロックのハイライトテーマ",
       "selectTheme": "テーマを選択"

messages/zh.json

@@ -11,6 +11,9 @@
     "edit": "编辑",
     "create": "创建",
     "theme": "主题",
+    "light": "亮色",
+    "dark": "暗色",
+    "system": "跟随系统",
     "pin": "置顶",
     "unpin": "取消置顶",
     "settings": "设置",
@@ -134,6 +137,7 @@
     },
     "theme": {
       "title": "外观",
+      "appTheme": "应用配色",
       "previewTheme": "预览内容主题",
       "codeTheme": "代码块高亮主题",
       "selectTheme": "选择主题"

src/app/core/setting/theme/setting-theme.tsx

@@ -4,6 +4,7 @@ import useSettingStore from "@/stores/setting";
 import { Store } from "@tauri-apps/plugin-store";
 import { useTranslations } from 'next-intl';
 import { useEffect } from "react";
+import { useTheme } from "next-themes";
 
 export function PreviewThemeSelect() {
   const t = useTranslations();
@@ -46,10 +47,37 @@ export function PreviewThemeSelect() {
   )
 }
 
+export function AppThemeSelect() {
+  const t = useTranslations();
+  const { theme, setTheme } = useTheme()
+
+  const themes = [
+    { value: 'light', label: '亮色' },
+    { value: 'dark', label: '暗色' },
+    { value: 'system', label: '跟随系统' }
+  ]
+
+  return (
+    <Select onValueChange={setTheme} value={theme}>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder={t('settings.theme.selectTheme')} />
+      </SelectTrigger>
+      <SelectContent>
+        {
+          themes.map((theme) => (
+            <SelectItem key={theme.value} value={theme.value}>{theme.label}</SelectItem>
+          ))
+        }
+      </SelectContent>
+    </Select>
+  )
+}
+
 export function CodeThemeSelect() {
   const t = useTranslations();
   const { codeTheme, setCodeTheme } = useSettingStore()
-  const themes = ['github', 'atom', 'a11y', 'gradient', 'kimbie', 'paraiso', 'qtcreator', 'stackoverflow']
+
+  const themes = ['github', 'github-dark', 'material-darker', 'material-palenight', 'one-dark']
 
   async function changeHandler(e: string) {
     setCodeTheme(e)
@@ -91,6 +119,10 @@ export function SettingTheme({id, icon}: {id: string, icon?: React.ReactNode}) {
 
   return (
     <SettingType id={id} icon={icon} title={t('settings.theme.title')}>
+      <SettingRow border>
+        <span>{t('settings.theme.appTheme') || '应用配色'}。</span>
+        <AppThemeSelect />
+      </SettingRow>
       <SettingRow border>
         <span>{t('settings.theme.previewTheme')}。</span>
         <PreviewThemeSelect />

src/components/mode-toggle.tsx

@@ -1,25 +1,59 @@
 "use client"
 
 import * as React from "react"
-import { Moon, Sun } from "lucide-react"
+import { Laptop, Moon, Sun } 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"
 
 function Toggle() {
+  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 (
-    <Button
-      variant="ghost"
-      size="sm"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-    >
-      <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" />
-    </Button>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={cycleTheme}
+        >
+          <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>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>{t('common.light')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Moon className="mr-2 h-4 w-4" />
+          <span>{t('common.dark')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Laptop className="mr-2 h-4 w-4" />
+          <span>{t('common.system')}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }