Electron 菜单切换主题与css替换 ts编写

时间:2019-11-18 LiuGeng 人气:10

////目标css
<link rel="stylesheet" id="theme_css" href="路径">

////ts
 
//参数 可以去 electron api 了解
import { Menu, MenuItemConstructorOptions, BrowserWindow, nativeTheme } from "electron";

export class MainMenu {
    public static Setup(): void {
        const template: MenuItemConstructorOptions[] =
            [
                {
                    label: '主题转换', submenu: [
                        {
                            label: 'dark',
                            click: () => {
                                let allWins = BrowserWindow.getAllWindows();
                                if(allWins != null && allWins.length > 0)
                                {
　　　　　　　　　　//切换 菜单色 黑
                                    nativeTheme.themeSource = 'dark';
                                    allWins.forEach( win => win.webContents.send('change_theme' , 'dark') );
                                }
                            }
                        },
                        {
                            label: 'white',
                            click: () => {
                                let allWins = BrowserWindow.getAllWindows();
                                if(allWins != null && allWins.length > 0)
                                {
　　　　　　　　　　//切换菜单色 白
                                    nativeTheme.themeSource = 'light';
                                    allWins.forEach( win => win.webContents.send('change_theme' , 'white') );
                                }
                            }
                        }
                    ]
                }
            ];
        const menu = Menu.buildFromTemplate(template)
        Menu.setApplicationMenu(menu)
    }
}

///主进程

import { MainMenu(设定的名字) } from "路径";

function createWindow() {

//菜单颜色

nativeTheme.themeSource = 'dark';

MainMenu.Setup();

}

app.on("ready", createWindow);

加载全部内容