Electron案例解析——切换主题颜色的案例

效果图

核心

Electron的 nativeTheme.themeSource属性,值是string。有三个参数:system, light 和 dark,用来覆盖、重写Chromium内部的相应的值

Election的api 描述
nativeTheme.themeSource 被用来覆盖、重写Chromium内部的相应的值 system, light 和 dark

相关文档地址:https://www.electronjs.org/zh/docs/latest/api/native-theme#nativethemethemesource

目录结构

index.html

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />

<!-- 内容安全策略-->
    <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self'; script-src 'self'"
    />

    <meta
            http-equiv="X-Content-Security-Policy"
            content="default-src 'self'; script-src 'self'"
    />
    <!-- 样式表 -->
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <!--窗口标题-->
    <title>切换应用主题颜色的案例</title>
</head>
<body>

<h1>切换应用主题颜色</h1>

<p>当前主题颜色: <strong id="theme-source">system</strong>色</p>

<button id="toggle-dark-mode">切换颜色模式</button>
<button id="reset-to-system">重置为系统色</button>
</body>
<!-- 加载渲染进程的 renderer.js 文件 -->
<script src="./renderer.js"></script>
</html>

main.js

javascript 复制代码
//引入electron模块 app, BrowserWindow
const {app, BrowserWindow,ipcMain, nativeTheme} = require('electron/main') //引入electron模块, app
const path = require('node:path') //引入path模块
//创建窗口
const createWindow = () => {
  const win = new BrowserWindow({
    //设置窗口大小 宽度800 高度600
    width: 800,
    height: 600,
    webPreferences: {  //网页设置
      preload: path.join(__dirname, 'preload.js') //设置预加载脚本
    }
  })
//加载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'  //切换到系统主题
})

//当Electron完成初始化并且准备创建窗口时调用createWindow()
app.whenReady().then(() => {
  //在应用准备就绪时调用函数
  createWindow()

  //如果没有窗口打开则打开一个窗口 (macOS) 这个是必须处理的兼容性问题
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

/**
 * 关闭所有窗口时退出应用 (Windows & Linux) 这个是必须处理的兼容性问题。
 * 这段代码是用于Electron框架中的事件监听,具体是监听window-all-closed事件。这个事件会在所有窗口都被关闭时触发。
 * 代码中的逻辑是,如果当前操作系统平台不是macOS('darwin'),则在所有窗口关闭后退出应用程序。
 * */
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

preload.js

javascript 复制代码
/**
 * 预加载脚本在加载"index.html"之前运行在渲染器中。
 * 它可以访问Web API以及Electronic的渲染器处理模块和一些多边填充Node.Js功能。
 * https://www.electronjs.org/docs/latest/tutorial/sandbox
 */
// 引入electron模块,
const { contextBridge, ipcRenderer } = require('electron/renderer')
//contextBridge用于暴露接口到主进程
contextBridge.exposeInMainWorld('darkMode', {
    toggle: () => ipcRenderer.invoke('dark-mode:toggle'),  // 切换暗黑模式
    system: () => ipcRenderer.invoke('dark-mode:system')  // 切换系统默认模式
})

renderer.js

javascript 复制代码
/**
 * 当点击切换按钮"toggle-dark-mode"时,切换系统主题并更新主题状态
 */
document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
  const isDarkMode = await window.darkMode.toggle()  // 切换系统主题
  document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light' // 同时,更新主题状态
})
/**
 * 当点击切换按钮"reset-to-system"时,恢复系统默认主题并更新主题状态
 */
document.getElementById('reset-to-system').addEventListener('click', async () => {
  await window.darkMode.system()  // 设置为系统默认主题
  document.getElementById('theme-source').innerHTML = 'System' // 同时,更新主题状态
})

style.css

javascript 复制代码
:root {
    color-scheme: light dark;
}

/*这里是替换的样式代码 start*/
@media (prefers-color-scheme: dark) {
    body { background: #333; color: white; }
}

@media (prefers-color-scheme: light) {
    body { background: #ddd; color: black; }
}
/*这里是替换的样式代码 end*/

看效果,命令行,运行

javascript 复制代码
npm start
相关推荐
逐·風30 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨5 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js