当前位置:网站首页>Electron入门教程4 —— 切换应用的主题
Electron入门教程4 —— 切换应用的主题
2022-04-23 19:41:00 【害恶细君】
从这一期开始,我会陆续地总结桌面应用常用的一些功能案例,之后有类似需求举一反三即可。这节学习一下如何切换应用的主题。
如果您想要手动在亮/暗模式之间切换,您可以通过在nativeTheme
模块的themeSource
属性中设置所需的模式来做到这一点。此属性的值将传播到您的渲染进程。任何与prefers-color-scheme
相关的CSS规则都将相应地更新。
先上代码,之后再分析:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主题切换</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<p>当前主题为:<strong id="theme-source">系统主题</strong></p>
<button id="toggle">切换为深色模式</button>
<button id="reset-to-system">切换系统主题</button>
<script src='./index.js'></script>
</body>
</html>
preload.js
const {
contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('darkMode', {
toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
system: () => ipcRenderer.invoke('dark-mode:system')
})
index.js
document.getElementById('toggle').addEventListener('click', async () => {
const isDarkMode = await window.darkMode.toggle()
document.getElementById('theme-source').innerHTML = isDarkMode ? '深色主题' : '浅色主题'
document.getElementById('toggle').innerHTML= isDarkMode ? '切换为浅色主题' : '切换为深色主题'
})
document.getElementById('reset-to-system').addEventListener('click', async () => {
await window.darkMode.system()
document.getElementById('theme-source').innerHTML = '系统主题'
})
style.css
@media (prefers-color-scheme: dark) {
body {
background: #333; color: white; }
}
@media (prefers-color-scheme: light) {
body {
background: #ddd; color: black; }
}
main.js
const {
app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
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'
})
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
运行效果如下(这个GIF有点慢,别介意):
CSS文件使用@media
媒体查询的prefers-color-scheme
来设置< body >
元素背景和文本颜色。然后就是用到了上一节教程用到的进程通信的知识。在main.js主进程里面通过nativeTheme.themeSource
来设置主题。nativeTheme.shouldUseDarkColors
返回一个布尔值,表示操作系统/Chromium当前是否启用了暗模式 , 如果你想修改这个值,你应该使用themeSource
。 nativeTheme.themeSource
可以有三个属性值:system
, light
和dark
。它用于覆盖和取代Chromium选择在内部主题使用的值。
版权声明
本文为[害恶细君]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_50216991/article/details/124264658
边栏推荐
- Redis core technology and practice 1 - start with building a simple key value database simplekv
- MySQL数据库 - 连接查询
- 如何在BNB鏈上創建BEP-20通證
- C6748 software simulation and hardware test - with detailed FFT hardware measurement time
- IIS data conversion problem: 16bit to 24bit
- 深度分析数据恢复原理——那些数据可以恢复那些不可以数据恢复软件
- kibana 报错 server is not ready yet 可能的原因
- 5 minutes to achieve wechat cloud applet payment function (including source code)
- Build intelligent garbage classification applet based on Zero
- How to select the third-party package of golang
猜你喜欢
【数值预测案例】(3) LSTM 时间序列电量预测,附Tensorflow完整代码
[webrtc] add x264 encoder for CEF / Chromium
Zero cost, zero foundation, build profitable film and television applet
White screen processing method of fulter startup page
Kubernetes entry to mastery - bare metal loadbalance 80 443 port exposure precautions
深度分析数据恢复原理——那些数据可以恢复那些不可以数据恢复软件
如何在BNB鏈上創建BEP-20通證
山东大学软件学院项目实训-创新实训-网络安全靶场实验平台(六)
An algorithm problem was encountered during the interview_ Find the mirrored word pairs in the dictionary
MFCC: Mel频率倒谱系数计算感知频率和实际频率转换
随机推荐
Is meituan, a profit-making company with zero foundation, hungry? Coupon CPS applet (with source code)
Pit encountered using camera x_ When onpause, the camera is not released, resulting in a black screen when it comes back
Go modules daily use
SRS 的部署
[report] Microsoft: application of deep learning methods in speech enhancement
Kubernetes entry to mastery - bare metal loadbalance 80 443 port exposure precautions
Possible root causes include a too low setting for -Xss and illegal cyclic inheritance dependencies
An example of using JNI to directly access surface data
FFT物理意义: 1024点FFT就是1024个实数,实际进入fft的输入是1024个复数(虚部为0),输出也是1024个复数,有效的数据是前512个复数
Kubernetes入门到精通-裸机LoadBalence 80 443 端口暴露注意事项
How to select the third-party package of golang
[report] Microsoft: application of deep learning methods in speech enhancement
An idea of rendering pipeline based on FBO
@Mapperscan and @ mapper
山东大学软件学院项目实训-创新实训-网络安全靶场实验平台(七)
Common SQL commands
HTTP cache - HTTP authoritative guide Chapter VII
【webrtc】Add x264 encoder for CEF/Chromium
A brief explanation of golang's keyword "competence"
MySQL数据库 - 单表查询(二)