跳至主要内容

nativeTheme

读取并响应 Chromium 原生颜色主题的变化。

进程:主进程

事件

nativeTheme 模块发出以下事件

事件:'updated'

当底层 NativeTheme 中的内容发生变化时发出。这通常意味着shouldUseDarkColorsshouldUseHighContrastColorsshouldUseInvertedColorScheme 的值发生了变化。您需要检查它们以确定哪个值发生了变化。

属性

nativeTheme 模块具有以下属性

nativeTheme.shouldUseDarkColors 只读

一个布尔值,表示操作系统/Chromium 当前是否启用了暗模式或正在被指示显示暗色风格的 UI。如果您想要修改此值,请在下方使用themeSource

nativeTheme.themeSource

一个字符串属性,可以是systemlightdark。它用于覆盖和取代 Chromium 在内部选择使用的值。

将此属性设置为system 将移除覆盖,并将所有内容重置为操作系统的默认值。默认情况下,themeSourcesystem

将此属性设置为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 只读

一个布尔值,表示操作系统/Chromium 当前是否启用了高对比度模式或正在被指示显示高对比度 UI。

nativeTheme.shouldUseInvertedColorScheme macOS Windows 只读

一个布尔值,表示操作系统/Chromium 当前是否具有反转的颜色方案或正在被指示使用反转的颜色方案。

nativeTheme.inForcedColorsMode Windows 只读

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

nativeTheme.prefersReducedTransparency 只读

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