unified title bar theme

changelog.md

@@ -1,6 +1,7 @@
 ### New Features
 
 - 支持一键复制环境变量
+- 同步标题栏深浅主题
 
 ### Bug Fixes
 

src/main/sys/misc.ts

@@ -1,5 +1,5 @@
 import { exec, execFile } from 'child_process'
-import { dialog } from 'electron'
+import { dialog, nativeTheme } from 'electron'
 import { readFile } from 'fs/promises'
 import path from 'path'
 import { promisify } from 'util'
@@ -41,3 +41,7 @@ export async function setupFirewall(): Promise<void> {
     await execPromise(createCommand, { shell: 'powershell' })
   }
 }
+
+export function setNativeTheme(theme: 'system' | 'light' | 'dark'): void {
+  nativeTheme.themeSource = theme
+}

src/main/utils/ipc.ts

@@ -48,7 +48,7 @@ import {
 import { isEncryptionAvailable, manualGrantCorePermition, restartCore } from '../core/manager'
 import { triggerSysProxy } from '../sys/sysproxy'
 import { checkUpdate, downloadAndInstallUpdate } from '../resolve/autoUpdater'
-import { getFilePath, openUWPTool, readTextFile, setupFirewall } from '../sys/misc'
+import { getFilePath, openUWPTool, readTextFile, setNativeTheme, setupFirewall } from '../sys/misc'
 import { getRuntimeConfig, getRuntimeConfigStr } from '../core/factory'
 import { isPortable, setPortable } from './dirs'
 import { listWebdavBackups, webdavBackup, webdavRestore } from '../resolve/backup'
@@ -149,6 +149,9 @@ export function registerIpcMainHandlers(): void {
   ipcMain.handle('webdavBackup', ipcErrorWrapper(webdavBackup))
   ipcMain.handle('webdavRestore', (_e, filename) => ipcErrorWrapper(webdavRestore)(filename))
   ipcMain.handle('listWebdavBackups', ipcErrorWrapper(listWebdavBackups))
+  ipcMain.handle('setNativeTheme', (_e, theme) => {
+    setNativeTheme(theme)
+  })
   ipcMain.handle('copyEnv', ipcErrorWrapper(copyEnv))
   ipcMain.handle('alert', (_e, msg) => {
     dialog.showErrorBox('Mihomo Party', msg)

src/renderer/src/App.tsx

@@ -28,6 +28,7 @@ import MihomoCoreCard from '@renderer/components/sider/mihomo-core-card'
 import ResourceCard from '@renderer/components/sider/resource-card'
 import UpdaterButton from '@renderer/components/updater/updater-button'
 import { useAppConfig } from './hooks/use-app-config'
+import { setNativeTheme } from './utils/ipc'
 
 const App: React.FC = () => {
   const { appConfig, patchAppConfig } = useAppConfig()
@@ -63,6 +64,14 @@ const App: React.FC = () => {
 
   useEffect(() => {
     setTheme(appTheme)
+    if (appTheme === 'system') {
+      setNativeTheme('system')
+    }
+    if (appTheme.includes('light')) {
+      setNativeTheme('light')
+    } else {
+      setNativeTheme('dark')
+    }
   }, [appTheme])
 
   const onDragEnd = async (event: DragEndEvent): Promise<void> => {

src/renderer/src/pages/settings.tsx

@@ -16,7 +16,8 @@ import {
   restartCore,
   webdavBackup,
   listWebdavBackups,
-  copyEnv
+  copyEnv,
+  setNativeTheme
 } from '@renderer/utils/ipc'
 import { BiCopy } from 'react-icons/bi'
 import { CgWebsite } from 'react-icons/cg'
@@ -82,6 +83,14 @@ const Settings: React.FC = () => {
         }
       }
       setTheme(themeStr)
+      if (themeStr === 'system') {
+        setNativeTheme('system')
+      }
+      if (themeStr.includes('light')) {
+        setNativeTheme('light')
+      } else {
+        setNativeTheme('dark')
+      }
       patchAppConfig({ appTheme: themeStr as AppTheme })
     } else {
       let themeStr = theme

src/renderer/src/utils/ipc.ts

@@ -283,6 +283,10 @@ export async function quitApp(): Promise<void> {
   return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('quitApp'))
 }
 
+export async function setNativeTheme(theme: 'system' | 'light' | 'dark'): Promise<void> {
+  return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('setNativeTheme', theme))
+}
+
 export async function copyEnv(): Promise<void> {
   return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('copyEnv'))
 }