跳到主要内容

nativeTheme

读取并响应 Chromium 原生颜色主题的更改。

进程: 主进程

事件​

nativeTheme 模块发出以下事件

事件: 'updated'​

当底层 NativeTheme 中的某些内容发生更改时发出。 这通常意味着 shouldUseDarkColors、shouldUseHighContrastColors 或 shouldUseInvertedColorScheme 的值已更改。 您将需要检查它们以确定哪个已更改。

属性​

nativeTheme 模块具有以下属性

nativeTheme.shouldUseDarkColors 只读​

一个 boolean 值，表示操作系统 / Chromium 当前是否启用了深色模式，或者是否被指示显示深色风格的 UI。 如果您想修改此值，您应该使用下面的 themeSource。

nativeTheme.themeSource​

一个 string 属性，可以是 system、light 或 dark。 它用于覆盖和取代 Chromium 内部选择使用的值。

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

将此属性设置为 dark 将具有以下效果

  • 访问时 nativeTheme.shouldUseDarkColors 将为 true
  • Electron 在 Linux 和 Windows 上渲染的任何 UI，包括上下文菜单、开发者工具等，都将使用深色 UI。
  • 操作系统在 macOS 上渲染的任何 UI，包括菜单、窗口框架等，都将使用深色 UI。
  • prefers-color-scheme CSS 查询将匹配 dark 模式。
  • 将发出 updated 事件

将此属性设置为 light 将具有以下效果

  • 访问时 nativeTheme.shouldUseDarkColors 将为 false
  • Electron 在 Linux 和 Windows 上渲染的任何 UI，包括上下文菜单、开发者工具等，都将使用浅色 UI。
  • 操作系统在 macOS 上渲染的任何 UI，包括菜单、窗口框架等，都将使用浅色 UI。
  • prefers-color-scheme CSS 查询将匹配 light 模式。
  • 将发出 updated 事件

此属性的用法应与应用程序中的经典“深色模式”状态机对齐，用户有三个选项。

  • 跟随操作系统 --> themeSource = 'system'
  • 深色模式 --> themeSource = 'dark'
  • 浅色模式 --> themeSource = 'light'

然后您的应用程序应始终使用 shouldUseDarkColors 来确定要应用什么 CSS。

nativeTheme.shouldUseHighContrastColors macOS Windows 只读​

一个 boolean 值，表示操作系统 / Chromium 当前是否启用了高对比度模式，或者是否被指示显示高对比度 UI。

nativeTheme.shouldUseInvertedColorScheme macOS Windows 只读​

一个 boolean 值，表示操作系统 / Chromium 当前是否具有反转的配色方案，或者是否被指示使用反转的配色方案。

nativeTheme.inForcedColorsMode Windows 只读​

一个 boolean 值，指示 Chromium 是否处于强制颜色模式，该模式由系统辅助功能设置控制。 目前，Windows 高对比度是唯一触发强制颜色模式的系统设置。

nativeTheme.prefersReducedTransparency 只读​

一个 boolean 值，指示用户是否通过系统辅助功能设置选择了在操作系统级别降低透明度。