Electron DevTools Theme dark 设置暗黑主题

最新推荐文章于 2024-07-20 09:00:00 发布

_JackSparrow

最新推荐文章于 2024-07-20 09:00:00 发布

阅读量1.6k

点赞数 1

文章标签： electron javascript 前端 chrome devtools

本文链接：https://blog.csdn.net/qq_42709514/article/details/122686645

版权

Electron 中的DevTools设置暗黑主题

main.js 文件

// 模块来控制应用程序的生命周期并创建本地浏览器窗口
const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
const path = require('path')


// 定义一个窗口对象
var mainWindow = null;
app.on("ready", ()=>{
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration:true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  //然后加载应用的index.html。
  mainWindow.loadFile('index.html');

   //暗黑主题设置
   ipcMain.handle('dark-mode:toggle', () => {
        if (nativeTheme.shouldUseDarkColors) {
            nativeTheme.themeSource = 'light'
        } else {
            nativeTheme.themeSource = 'dark'
        }
        return nativeTheme.shouldUseDarkColors
    })
    
  //打开独立的浏览器调试窗口
  // mainWindow.webContents.openDevTools({mode:'detach'})
  // 当窗口关闭时处理掉窗口对象
  mainWindow.on('closed', ()=>{
    mainWindow = null
  })
});

preload.js 文件

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('darkMode', {
    toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
    system: () => ipcRenderer.invoke('dark-mode:system')
})

index.html 文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  <link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>Current theme source: <strong id="theme-source">System</strong></p>

<button id="toggle-dark-mode">Toggle Dark Mode</button>

<script>
  //更换主题事件
  document.getElementById('toggle-dark-mode').addEventListener('click',  () => {
    window.darkMode.toggle()
  })
</script>
</body>
</body>
</html>