electron (二) 暗黑模式

首先，让我们编辑我们的接口，以便可以在光线和暗色的模式之间切换。这个基本的界面包含更改 原生主题 设置的按钮，并且包含一个文本元素，指明了哪些主题值被选中

将以下内容添加到 index.html 文件：

<!doctype html>
<html lang="cn">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>electron</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <h1>hello world</h1>
    <p>当前主题: <strong id="theme-source">系统默认</strong></p>

    <button id="toggle-dark-mode">切换暗黑模式</button>
    <button id="reset-to-system">重置为系统默认</button>

    <script src="renderer.js"></script>
  </body>
</html>

接下来，添加renderer.js文件，设置按钮点击方法：


const { ipcRenderer } = require('electron')


document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
  const isDarkMode = await ipcRenderer.invoke('dark-mode:toggle')
  document.getElementById('theme-source').innerHTML = isDarkMode ? '暗色' : '明亮'

})

document.getElementById('reset-to-system').addEventListener('click', async () => {
  await ipcRenderer.invoke('dark-mode:system')
  document.getElementById('theme-source').innerHTML = '系统默认'
})

然后在创建窗口里将点击事件注册到渲染进程中，这里是main.js

const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')

function createWindow() {
  //创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

  //为应用加载index.html
  win.loadFile('index.html')

  ipcMain.handle('dark-mode:toggle', () => {
    if (nativeTheme.shouldUseDarkColors) {
      nativeTheme.themeSource = 'light'
    } else {
      nativeTheme.themeSource = 'dark'
    }
    return nativeTheme.shouldUseDarkColors
  })

  ipcMain.handle('dark-mode:system', () => {
    nativeTheme.themeSource = 'system'
  })


  //打开开发者工具
  win.webContents.openDevTools()

}

最后创建style.css文件，自定义背景色和字体颜色

@media(prefers-color-scheme:dark){
  body{background:#333;color:white}
}

@media(prefers-color-scheme:light){
  body{background:#fff;color:black}
}

启动 Electron 应用程序后，你可以通过点击相应按钮更改模式或将主题重置为系统默认值。

おすすめ