[Electron] 内置模块nativeTheme实现主题功能

原创已于 2023-05-10 17:24:13 修改 · 607 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

于 2023-05-10 17:21:06 首次发布

Electron 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何在Electron中利用内置的nativeTheme模块切换应用主题，包括设置themeSource为light或dark，以及通过CSS媒体查询处理不同主题的样式。此外，还提到nativeTheme.themeSource的system选项在macOS中支持跟随系统主题变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内置模块nativeTheme.themeSource可以获取当前的应用主题，有‘light’,'dark','system'，其中‘system’仅在macos中支持；

一、通过修改nativeTheme.themeSource来实现主题切换；

const { nativeTheme } = require('electron');

// 白天主题
nativeTheme.themeSource = 'light';

// 黑夜主题
nativeTheme.themeSource = 'dark';

二、渲染进程中对应css编写

/* 对应的‘light’主题 */
@media (prefers-color-scheme: light) {
  body {
    background-color: rgb(255, 255, 255);
  }
}

/* 对应的‘dark’主题 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(0, 0, 0);
  }
}

当nativeTheme.themeSource设置为‘light’时，渲染进程的css文件会引用‘light’的配置样式，反之同理；

自此，Electron简单的两种主题就实现了；这里推荐官网文档更加详细的讲解：Dark Mode | Electron