Improve the dark mode switching method.

src/common/default_configs.ts

@@ -1,7 +1,7 @@
 import { LocaleName } from '@root/common/i18n'
 import { FolderModeType } from './data.d'
 
-export type ThemeType = 'light' | 'dark' | 'auto'
+export type ThemeType = 'light' | 'dark' | 'system'
 export type ProtocolType = 'http' | 'https'
 
 const configs = {
@@ -11,7 +11,7 @@ const configs = {
 
   // preferences
   history_limit: 50,
-  locale: 'zh' as LocaleName,
+  locale: 'en' as LocaleName,
   theme: 'light' as ThemeType,
   choice_mode: 2 as FolderModeType,
   show_title_on_tray: false,

src/main/main.ts

@@ -12,7 +12,7 @@ import Tracer from '@main/libs/tracer'
 import '@main/ui/tray'
 import * as find from '@main/ui/find'
 import version from '@root/version.json'
-import { app, BrowserWindow } from 'electron'
+import { app, BrowserWindow, ipcMain, nativeTheme } from 'electron'
 import windowStateKeeper from 'electron-window-state'
 import * as path from 'path'
 import { v4 as uuid4 } from 'uuid'
@@ -92,6 +92,27 @@ const createWindow = async () => {
   win.on('closed', () => {
     win = null
   })
+
+  ipcMain.handle('dark-mode:toggle', () => {
+    if (nativeTheme.shouldUseDarkColors) {
+      nativeTheme.themeSource = 'light'
+    } else {
+      nativeTheme.themeSource = 'dark'
+    }
+    return nativeTheme.shouldUseDarkColors
+  })
+
+  ipcMain.handle('dark-mode:dark', () => {
+    nativeTheme.themeSource = 'dark'
+  })
+
+  ipcMain.handle('dark-mode:light', () => {
+    nativeTheme.themeSource = 'light'
+  })
+
+  ipcMain.handle('dark-mode:system', () => {
+    nativeTheme.themeSource = 'system'
+  })
 }
 
 const gotTheLock = app.requestSingleInstanceLock()

src/main/preload.ts

@@ -87,6 +87,7 @@ const _agent = {
   off,
   popupMenu,
   platform: process.platform,
+  darkModeToggle: (theme?: 'dark' | 'light' | 'system') => ipcRenderer.invoke(`dark-mode:${theme ?? 'toggle'}`),
 }
 
 contextBridge.exposeInMainWorld('_agent', _agent)

src/renderer/components/SwitchButton.less

@@ -18,7 +18,8 @@
 
 .handler {
   position: absolute;
-  right: unset;
+  //right: unset;
+  right: @swh-btn-width - @swh-btn-height;
   width: @swh-btn-height;
   height: @swh-btn-height;
   border-radius: @swh-btn-height / 2;

src/renderer/pages/index.tsx

@@ -48,6 +48,7 @@ export default () => {
     let cls = document.body.className
     document.body.className = cls.replace(/\btheme-\w+/ig, '')
     document.body.classList.add(`platform-${agent.platform}`, `theme-${theme}`)
+    await agent.darkModeToggle(theme)
 
     let if_migrate = await actions.migrateCheck()
     if (if_migrate) {

src/renderer/theme.ts

@@ -12,8 +12,6 @@ const config = {
 }
 
 const colors = {
-  swh: {
-  }
 }
 
 // @ts-ignore

src/version.json

@@ -1 +1 @@
-[4, 0, 3, 6057]
+[4, 0, 3, 6059]