Skip to main content

nativeTheme

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

¥Read and respond to changes in Chromium's native color theme.

进程：主进程

¥Process: Main

事件​

¥Events

nativeTheme 模块发出以下事件：

¥The nativeTheme module emits the following events:

事件：'updated'​

¥Event: 'updated'

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

¥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 当前启用了夜间模式或被指示显示深色风格的 UI。如果你想修改这个值，你应该使用下面的 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 属性可以是 system、light 或 dark。它用于覆盖和取代 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

    ¥nativeTheme.shouldUseDarkColors will be true when accessed

  • 在 Linux 和 Windows 上渲染的任何 UI Electron 包括上下文菜单、开发工具等都将使用深色 UI。

    ¥Any UI Electron renders on Linux and Windows including context menus, devtools, etc. will use the dark UI.

  • 操作系统在 macOS 上渲染的任何 UI（包括菜单、窗口框架等）都将使用深色 UI。

    ¥Any UI the OS renders on macOS including menus, window frames, etc. will use the dark UI.

  • prefers-color-scheme CSS 查询将匹配 dark 模式。

    ¥The prefers-color-scheme CSS query will match dark mode.

  • 将发出 updated 事件

    ¥The updated event will be emitted

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

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

  • 访问时 nativeTheme.shouldUseDarkColors 将是 false

    ¥nativeTheme.shouldUseDarkColors will be false when accessed

  • 在 Linux 和 Windows 上渲染的任何 UI Electron 包括上下文菜单、开发工具等都将使用轻量级 UI。

    ¥Any UI Electron renders on Linux and Windows including context menus, devtools, etc. will use the light UI.

  • 操作系统在 macOS 上渲染的任何 UI（包括菜单、窗口框架等）都将使用 light UI。

    ¥Any UI the OS renders on macOS including menus, window frames, etc. will use the light UI.

  • prefers-color-scheme CSS 查询将匹配 light 模式。

    ¥The prefers-color-scheme CSS query will match light mode.

  • 将发出 updated 事件

    ¥The updated event will be emitted

此属性的使用应与应用中的经典 "夜间模式" 状态机一致，其中用户具有三个选项。

¥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 当前启用了高对比度模式或正在指示显示高对比度 UI。

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

nativeTheme.shouldUseInvertedColorScheme macOS Windows 只读​

¥nativeTheme.shouldUseInvertedColorScheme macOS Windows Readonly

boolean 表示操作系统/Chromium 当前具有反转配色方案或被指示使用反转配色方案。

¥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 the whether the user has chosen via system accessibility settings to reduce transparency at the OS level.