titlebar switching

src/main/features/core/settings/index.ts

@@ -1,4 +1,4 @@
-import { ipcMain, safeStorage } from 'electron';
+import { ipcMain, nativeTheme, safeStorage } from 'electron';
 import Store from 'electron-store';
 
 export const store = new Store();
@@ -48,3 +48,8 @@ ipcMain.handle('password-set', (_event, password: string, server: string) => {
     }
     return false;
 });
+
+ipcMain.on('theme-set', (_event, theme: 'dark' | 'light' | 'system') => {
+    store.set('theme', theme);
+    nativeTheme.themeSource = theme;
+});

src/main/main.ts

@@ -20,6 +20,7 @@ import {
     Tray,
     Menu,
     nativeImage,
+    nativeTheme,
     BrowserWindowConstructorOptions,
     protocol,
     net,
@@ -414,6 +415,11 @@ const createWindow = async () => {
         // eslint-disable-next-line
         new AppUpdater();
     }
+
+    const theme = store.get('theme') as 'dark' | 'light' | 'system' | undefined;
+    if (theme) {
+        nativeTheme.themeSource = theme;
+    }
 };
 
 app.commandLine.appendSwitch('disable-features', 'HardwareMediaKeyHandling,MediaSessionService');

src/main/preload/local-settings.ts

@@ -43,6 +43,10 @@ const fontError = (cb: (event: IpcRendererEvent, file: string) => void) => {
     ipcRenderer.on('custom-font-error', cb);
 };
 
+const themeSet = (theme: 'dark' | 'light' | 'system'): void => {
+    ipcRenderer.send('theme-set', theme);
+};
+
 export const localSettings = {
     disableMediaKeys,
     enableMediaKeys,
@@ -54,6 +58,7 @@ export const localSettings = {
     restart,
     set,
     setZoomFactor,
+    themeSet,
 };
 
 export type LocalSettings = typeof localSettings;

src/renderer/features/settings/components/general/theme-settings.tsx

@@ -7,8 +7,11 @@ import {
 import { THEME_DATA } from '/@/renderer/hooks';
 import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
 import { AppTheme } from '/@/renderer/themes/types';
+import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
 export const ThemeSettings = () => {
     const { t } = useTranslation();
     const settings = useGeneralSettings();
@@ -26,6 +29,15 @@ export const ThemeSettings = () => {
                                 followSystemTheme: e.currentTarget.checked,
                             },
                         });
+                        if (localSettings) {
+                            localSettings.themeSet(
+                                e.currentTarget.checked
+                                    ? 'system'
+                                    : settings.theme === AppTheme.DEFAULT_DARK
+                                    ? 'dark'
+                                    : 'light',
+                            );
+                        }
                     }}
                 />
             ),
@@ -42,12 +54,19 @@ export const ThemeSettings = () => {
                     data={THEME_DATA}
                     defaultValue={settings.theme}
                     onChange={(e) => {
+                        const theme = e as AppTheme;
                         setSettings({
                             general: {
                                 ...settings,
-                                theme: e as AppTheme,
+                                theme,
                             },
                         });
+                        if (localSettings) {
+                            console.log(theme);
+                            localSettings.themeSet(
+                                theme === AppTheme.DEFAULT_DARK ? 'dark' : 'light',
+                            );
+                        }
                     }}
                 />
             ),