# ElectronTheme

**Repository Path**: scenario-samples/electron-theme

## Basic Information

- **Project Name**: ElectronTheme
- **Description**: Electron自定义主题是公共关键技术类应用的高频使用场景之一。 
本示例在主进程使用nativeTheme设置应用的主题，并使用ipcMain和ipcRenderer实现渲染进程和主进程交互设置页面主题。当应用主题为跟随系统时，渲染进程使用prefers-color-scheme检测系统主题。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-07
- **Last Updated**: 2026-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron自定义主题

## 介绍
Electron自定义主题是公共关键技术类应用的高频使用场景之一。

本示例在主进程使用[nativeTheme](https://www.electronjs.org/docs/latest/api/native-theme#events)设置应用的主题，并使用[ipcMain](https://www.electronjs.org/zh/docs/latest/api/ipc-main)和[ipcRenderer](https://www.electronjs.org/zh/docs/latest/api/ipc-renderer)实现渲染进程和主进程交互设置页面主题。当应用主题为跟随系统时，渲染进程使用prefers-color-scheme检测系统主题。
## 效果预览
<img src="screenshots/theme.gif" width="400">

## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

## 使用说明

1. 点击“浅色”按钮后，会将应用主题设置为浅色主题。
2. 点击“深色”按钮后，会将应用主题设置为深色主题。
3. 点击“跟随系统”按钮后，应用主题会根据系统主题而变化。

## 实现思路
- 在页面所有资源加载完成后，主进程向渲染进程发送应用初始化主题。渲染进程监听到主题信息后更新页面UI主题。

    ```
    // main.js
    // 初始化主题
    win.webContents.on('did-finish-load', () => {
        win.webContents.send('theme-update', {
            shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
            themeSource: nativeTheme.themeSource
        });
    });

    // index.html
    // 初始化主题
    ipcRenderer.on('theme-update', (event, themeInfo) => {
        updateUI(themeInfo);
    });
    ```
- 点击不同主题按钮时，渲染进程向主进程发送切换主题请求。主进程接收渲染进程请求，并设置nativeTheme.themeSource应用主题来源。
    ```
    // index.html
    // 切换按钮
    document.getElementById('lightBtn').addEventListener('click', () => {
        ipcRenderer.send('set-theme', 'light');
    });

    document.getElementById('darkBtn').addEventListener('click', () => {
        ipcRenderer.send('set-theme', 'dark');
    });

    document.getElementById('systemBtn').addEventListener('click', () => {
        ipcRenderer.send('set-theme', 'system');
    });

    // main.js
    // 接收渲染进程主题切换请求
    ipcMain.on('set-theme', (event, source) => {
        nativeTheme.themeSource = source;
    });
    ```
- 主进程nativeTheme监听主题变化时，会将主题信息发送给渲染进程，更新页面UI主题。
    ```
    // 监听主题变化
    nativeTheme.on('updated', () => {
        win.webContents.send('theme-update', {
            shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
            themeSource: nativeTheme.themeSource
        });
    });
    // index.html
    ipcRenderer.on('theme-update', (event, themeInfo) => {
        updateUI(themeInfo);
    });
    ```
- 渲染进程根据不同应用主题采用不同的样式效果。当应用采用浅色或深色主题时，页面将使用预设的样式。若应用主题是跟随系统时，渲染进程会利用prefers-color-scheme检测当前系统的主题（浅色或深色），从而调整样式以匹配系统主题。
  ```
  function updateUI(themeInfo) {
      const { shouldUseDarkColors, themeSource } = themeInfo;

      // 移除所有主题类
      document.body.classList.remove('light', 'dark', 'system');

      if (themeSource === 'system') {
      document.body.classList.add('system');
      document.getElementById('themeStatus').textContent = '跟随系统';
      } else if (themeSource === 'light') {
      document.body.classList.add('light');
      document.getElementById('themeStatus').textContent = '浅色模式';
      } else if (themeSource === 'dark') {
      document.body.classList.add('dark');
      document.getElementById('themeStatus').textContent = '深色模式';
      }
  }
  ```
  ```
  /* 强制浅色模式 */
  body.light {
      background-color: #fff;
      color: #222;
  }
  /* 强制深色模式 */
  body.dark {
      background-color: #222;
      color: #fff;
  }

  @media (prefers-color-scheme: dark) {
      body.system {
          background-color: #222;
          color: #fff;
      }
  }
  @media (prefers-color-scheme: light) {
      body.system {
          background-color: #fff;
          color: #222;
      }
  }
  ```

## 工程目录
```
app
├──renderer           // 渲染进程模块
│  └──index.html      // 主窗口加载的页面
├──main.js            // 主进程    
├──electron_white.png // 应用图标
└──package.json       // 配置程序入口
```

## 参考文档
[nativeTheme](https://www.electronjs.org/docs/latest/api/native-theme#events)

[ipcMain](https://www.electronjs.org/zh/docs/latest/api/ipc-main)

[ipcRenderer](https://www.electronjs.org/zh/docs/latest/api/ipc-renderer)