Merge pull request #209 from jeffvli/fix/#202

Add frame to macOS native window bar

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

@@ -1,5 +1,6 @@
-import { ipcMain, safeStorage } from 'electron';
+import { ipcMain, nativeTheme, safeStorage } from 'electron';
 import Store from 'electron-store';
+import type { TitleTheme } from '/@/renderer/types';
 
 export const store = new Store();
 
@@ -48,3 +49,8 @@ ipcMain.handle('password-set', (_event, password: string, server: string) => {
     }
     return false;
 });
+
+ipcMain.on('theme-set', (_event, theme: TitleTheme) => {
+    store.set('theme', theme);
+    nativeTheme.themeSource = theme;
+});

src/main/main.ts

@@ -20,6 +20,7 @@ import {
     Tray,
     Menu,
     nativeImage,
+    nativeTheme,
     BrowserWindowConstructorOptions,
     protocol,
     net,
@@ -34,6 +35,7 @@ import { store } from './features/core/settings/index';
 import MenuBuilder from './menu';
 import { hotkeyToElectronAccelerator, isLinux, isMacOS, isWindows, resolveHtmlPath } from './utils';
 import './features';
+import type { TitleTheme } from '/@/renderer/types';
 
 declare module 'node-mpv';
 
@@ -194,8 +196,8 @@ const createWindow = async () => {
         },
         macOS: {
             autoHideMenuBar: true,
-            frame: false,
-            titleBarStyle: 'hidden',
+            frame: true,
+            titleBarStyle: 'default',
             trafficLightPosition: { x: 10, y: 10 },
         },
         windows: {
@@ -414,6 +416,9 @@ const createWindow = async () => {
         // eslint-disable-next-line
         new AppUpdater();
     }
+
+    const theme = store.get('theme') as TitleTheme | undefined;
+    nativeTheme.themeSource = theme || 'dark';
 };
 
 app.commandLine.appendSwitch('disable-features', 'HardwareMediaKeyHandling,MediaSessionService');

src/main/preload/local-settings.ts

@@ -1,5 +1,6 @@
 import { IpcRendererEvent, ipcRenderer, webFrame } from 'electron';
 import Store from 'electron-store';
+import type { TitleTheme } from '/@/renderer/types';
 
 const store = new Store();
 
@@ -43,6 +44,10 @@ const fontError = (cb: (event: IpcRendererEvent, file: string) => void) => {
     ipcRenderer.on('custom-font-error', cb);
 };
 
+const themeSet = (theme: TitleTheme): void => {
+    ipcRenderer.send('theme-set', theme);
+};
+
 export const localSettings = {
     disableMediaKeys,
     enableMediaKeys,
@@ -54,6 +59,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,18 @@ 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) {
+                            localSettings.themeSet(
+                                theme === AppTheme.DEFAULT_DARK ? 'dark' : 'light',
+                            );
+                        }
                     }}
                 />
             ),

src/renderer/types.ts

@@ -209,3 +209,5 @@ export enum FontType {
     CUSTOM = 'custom',
     SYSTEM = 'system',
 }
+
+export type TitleTheme = 'dark' | 'light' | 'system';