当前位置：网站首页>Introduction to electron Tutorial 4 - switching application topics

Introduction to electron Tutorial 4 - switching application topics

2022-04-23 19:45:00 【Harm the evil king】

From this issue on , I will continue to summarize some common function cases of desktop applications , Then there are similar needs, just draw inferences from one instance . In this section, learn how to switch the theme of the application .

If you want to manually turn on / Switching between dark modes , You can use the nativeTheme Modular themeSource Property to do this . The value of this attribute is propagated to your rendering process . Anything to do with prefers-color-scheme dependent CSS The rules will be updated accordingly .

On the first code , And we'll analyze it later ：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Topic switching </title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<p> The current topic is :<strong id="theme-source"> System theme </strong></p>

<button id="toggle"> Switch to dark mode </button>
<button id="reset-to-system"> Switch system theme </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 ? ' Dark theme ' : ' Light color theme '
  document.getElementById('toggle').innerHTML= isDarkMode ? ' Switch to light theme ' : ' Switch to dark theme '
})

document.getElementById('reset-to-system').addEventListener('click', async () => {
    
  await window.darkMode.system()
  document.getElementById('theme-source').innerHTML = ' System theme '
})

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()
    }
})

The operation effect is as follows （ This GIF It's a little slow , Don't you mind? ）：
Insert picture description here
CSS Files use @media The media inquires about prefers-color-scheme To set up < body > Element background and text color . Then we use the knowledge of process communication used in the previous tutorial . stay main.js In the main process nativeTheme.themeSource To set the theme .nativeTheme.shouldUseDarkColors Returns a Boolean value , Represents the operating system /Chromium Whether dark mode is currently enabled , If you want to change this value , You should use themeSource. nativeTheme.themeSource You can have three attribute values ：system, light and dark . It is used to cover and replace Chromium Select the value to use in the internal theme .

版权声明
本文为[Harm the evil king]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204231940533324.html

边栏推荐

猜你喜欢

随机推荐