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

人盡茶涼 提交于 2019-12-04 21:11:16
////目标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);

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!