nativeTheme

读取并响应Chromium本地色彩主题中的变化。

进程：主进程

事件

nativeTheme模块包括以下事件：

事件名: ‘updated’

当以下NativeTheme属性发生变化时会触发此事件： shouldUseDarkColors, shouldUseHighContrastColors或shouldUseInvertedColorScheme 。 你需要自己检查到底是哪个属性发生了变化。

属性

nativeTheme 模块具备以下属性：

nativeTheme.shouldUseDarkColors 只读

此属性的值为一个 Boolean 类型的值，代表着当前OS / Chromium是否正处于dark模式。或者应用程序是否正被建议使用dark模式的皮肤 如果你希望修改此属性的值，你应该使用下面的 themeSource属性

nativeTheme.themeSource

一个类型为String的属性，此属性可能的值为：system, light or dark. 它被用来覆盖、重写Chromium内部的相应的值

将此属性设置为 system 将删除覆盖，并所有内容都将重置为操作系统默认值。 默认情况下 themeSource 是 system。

将此属性设置为 dark 将产生以下效果：

  • 当访问 nativeTheme.shouldUseDarkColors 时值为 true
  • 任何在 Linux 和 Windows 上的 UI Electron 渲染，包括 context menus、devtools 等等，都会使用暗色界面。
  • 在 MacOS 上打开的任何 UI 界面，包括 menus、window frames 等，渲染时都会使用暗色界面。
  • prefers-color-scheme CSS 查询将匹配 dark 模式
  • updated 事件将被触发

将此属性设置为 light 将产生以下效果：

  • 当访问 nativeTheme.shouldUseDarkColors 时值为 false
  • 任何在 Linux 和 Windows 上的 UI Electron 渲染，包括 context menus、devtools 等等，都会使用亮色界面。
  • 在 MacOS 上打开的任何 UI 界面，包括 menus、window frames 等，渲染时都会使用亮色界面。
  • prefers-color-scheme CSS 查询将匹配 light 模式
  • updated 事件将被触发

此属性的使用应与应用程序中的经典”黑暗模式”状态机相符，用户有三个选项：

  • Follow OS —> themeSource = 'system'
  • Dark Mode —> themeSource = 'dark'
  • Light Mode —> themeSource = 'light'

你的应用程序应该总是使用 shouldUseDarkColors 来确定要应用哪些 CSS

nativeTheme.shouldUseHighContrastColors macOS Windows Readonly

Boolean 代表如果操作系统/ Chromium 目前是否启用了高对比度模式或正在被指示显示高对比度UI。

nativeTheme.shouldUseInvertedColorScheme macOS Windows Readonly

Boolean 代表操作系统/ Chromium 目前是否有使用一个反转配色方案 或正在被指示使用一个反转的颜色方案。