Chapter 04無料公開

ダークモードの導入 (nativeTheme)

Kei Touge

2021.09.18に更新

このチャプターの目次

ダークモードを適用する
1. メインプロセス
2. レンダラープロセス (CSS)
レンダラープロセスのイベントからダークモードをトグルする

ダークモードを適用する

メインプロセス

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;
  }
}

fig03

nativeTheme.themeSource を指定しなければ、システム設定にしたがって自動的にトグルされます。

レンダラープロセスのイベントからダークモードをトグルする

メインプロセス

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);