ダークモードを適用する
メインプロセス
main.js
const { BrowserWindow, nativeTheme } = require('electron');
const createWindow = () => {
const mainWindow = new BrowserWindow();
// 'dark', 'light' or 'system'
nativeTheme.themeSource = 'dark';
mainWindow.loadFile('index.html');
};
レンダラープロセス (CSS)
styles.css
@media (prefers-color-scheme: dark) {
.container {
color: #dddddd;
background: #1e1e23;
}
}
@media (prefers-color-scheme: light) {
.container {
color: #1e1e23;
background: #ffffff;
}
}
レンダラープロセスのイベントからダークモードをトグルする
メインプロセス
main.js
const { BrowserWindow, nativeTheme, ipcMain } = require('electron');
const createWindow = () => {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
},
});
ipcMain.on('toggle-darkmode', () => {
nativeTheme.themeSource = nativeTheme.shouldUseDarkColors
? 'light'
: 'dark';
});
mainWindow.loadFile('index.html');
};
プリロードスクリプト
preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('myAPI', {
toggleDarkmode: () => ipcRenderer.send('toggle-darkmode'),
});
レンダラープロセス
app.js
const button = document.getElementById('button');
button.addEventListener('click', window.myAPI.toggleDarkmode);