Skip to main content

nativeTheme

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

进程:主进程

🌐 Process: Main

事件

🌐 Events

nativeTheme 模块会触发以下事件:

🌐 The nativeTheme module emits the following events:

Event: 'updated'

当底层 NativeTheme 中的某些内容发生变化时,会触发此事件。这通常意味着 shouldUseDarkColorsshouldUseHighContrastColorsshouldUseInvertedColorScheme 的值已经改变。你需要检查它们以确定哪个发生了变化。

🌐 Emitted when something in the underlying NativeTheme has changed. This normally means that either the value of shouldUseDarkColors, shouldUseHighContrastColors or shouldUseInvertedColorScheme has changed. You will have to check them to determine which one has changed.

属性

🌐 Properties

nativeTheme 模块具有以下属性:

🌐 The nativeTheme module has the following properties:

nativeTheme.shouldUseDarkColors 只读

🌐 nativeTheme.shouldUseDarkColors Readonly

boolean 用于判断操作系统/Chromium 当前是否启用了夜间模式,或是否被指示显示深色风格的界面。如果你想修改此值,应使用下面的 themeSource

🌐 A boolean for if the OS / Chromium currently has a dark mode enabled or is being instructed to show a dark-style UI. If you want to modify this value you should use themeSource below.

nativeTheme.themeSource

string 属性可以是 systemlightdark。它用于覆盖并替代 Chromium 内部选择使用的值。

🌐 A string property that can be system, light or dark. It is used to override and supersede the value that Chromium has chosen to use internally.

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

🌐 Setting this property to system will remove the override and everything will be reset to the OS default. By default themeSource is system.

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

🌐 Settings this property to dark will have the following effects:

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

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

🌐 Settings this property to light will have the following effects:

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

这个属性的使用应与应用中的经典“夜间模式”状态机保持一致,用户有三种选择。

🌐 The usage of this property should align with a classic "dark mode" state machine in your application where the user has three options.

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

你的应用随后应始终使用 shouldUseDarkColors 来确定应应用的 CSS。

🌐 Your application should then always use shouldUseDarkColors to determine what CSS to apply.

nativeTheme.shouldUseHighContrastColors macOS Windows 只读

🌐 nativeTheme.shouldUseHighContrastColors macOS Windows Readonly

一个 boolean 用于判断操作系统 / Chromium 当前是否启用了高对比度模式,或是否被指示显示高对比度用户界面。

🌐 A boolean for if the OS / Chromium currently has high-contrast mode enabled or is being instructed to show a high-contrast UI.

nativeTheme.shouldUseDarkColorsForSystemIntegratedUI macOS Windows 只读

🌐 nativeTheme.shouldUseDarkColorsForSystemIntegratedUI macOS Windows Readonly

boolean 属性,用于指示系统主题是否已设置为深色或浅色。

🌐 A boolean property indicating whether or not the system theme has been set to dark or light.

在 Windows 上,该属性区分系统和应用的浅色/深色主题,如果系统主题设置为深色主题,则返回 true,否则返回 false。在 macOS 上,返回值将与 nativeTheme.shouldUseDarkColors 相同。

🌐 On Windows this property distinguishes between system and app light/dark theme, returning true if the system theme is set to dark theme and false otherwise. On macOS the return value will be the same as nativeTheme.shouldUseDarkColors.

nativeTheme.shouldUseInvertedColorScheme macOS Windows 只读

🌐 nativeTheme.shouldUseInvertedColorScheme macOS Windows Readonly

用于判断操作系统 / Chromium 当前是否使用了反色配色方案,或是否被指示使用反色配色方案的 boolean

🌐 A boolean for if the OS / Chromium currently has an inverted color scheme or is being instructed to use an inverted color scheme.

nativeTheme.inForcedColorsMode Windows 只读

🌐 nativeTheme.inForcedColorsMode Windows Readonly

boolean 指示 Chromium 是否处于强制颜色模式,由系统无障碍设置控制。目前,Windows 高对比度是触发强制颜色模式的唯一系统设置。

🌐 A boolean indicating whether Chromium is in forced colors mode, controlled by system accessibility settings. Currently, Windows high contrast is the only system setting that triggers forced colors mode.

nativeTheme.prefersReducedTransparency 只读

🌐 nativeTheme.prefersReducedTransparency Readonly

boolean 表示用户是否通过系统辅助功能设置选择在操作系统级别减少透明度。

🌐 A boolean that indicates whether the user has chosen via system accessibility settings to reduce transparency at the OS level.