Skip to main content

nativeTheme

Read and respond to changes in Chromium's native color theme.阅读并回应Chromium原生颜色主题的变化。

Process:进程：Main

Events事件​

The nativeTheme module emits the following events:nativeTheme模块会发出以下事件：

Event: 'updated'​

Emitted when something in the underlying NativeTheme has changed. 当基础NativeTheme中的某些内容发生更改时发出。This normally means that either the value of shouldUseDarkColors, shouldUseHighContrastColors or shouldUseInvertedColorScheme has changed. 这通常意味着shouldUseDarkColors、shouldUseHighContrastColors或shouldUseInvertedColorScheme的值已更改。You will have to check them to determine which one has changed.您必须检查它们以确定哪一个发生了更改。

Properties属性​

The nativeTheme module has the following properties:nativeTheme模块具有以下属性：

nativeTheme.shouldUseDarkColors Readonly​

A boolean for if the OS / Chromium currently has a dark mode enabled or is being instructed to show a dark-style UI. 一个boolean，用于说明OS/Chromium当前是否启用了暗模式，或者是否被指示显示暗样式UI。If you want to modify this value you should use themeSource below.如果你想修改这个值，你应该使用下面的themeSource。

nativeTheme.themeSource​

A string property that can be system, light or dark. string属性，可以是system、light或dark。It is used to override and supersede the value that Chromium has chosen to use internally.它用于覆盖和取代Chromium选择在内部使用的值。

Setting this property to system will remove the override and everything will be reset to the OS default. 将此属性设置为system将删除覆盖，所有内容都将重置为操作系统默认值。By default themeSource is system.默认情况下，themeSource是system。

Settings this property to dark will have the following effects:将此属性设置为dark将具有以下效果：

  • nativeTheme.shouldUseDarkColors will be true when accessed访问时将为true
  • Any UI Electron renders on Linux and Windows including context menus, devtools, etc. will use the dark UI.Linux和Windows上的任何UI Electron渲染，包括上下文菜单、开发工具等，都将使用深色UI。
  • Any UI the OS renders on macOS including menus, window frames, etc. will use the dark UI.操作系统在macOS上渲染的任何UI，包括菜单、窗口框架等，都将使用深色UI。
  • The prefers-color-scheme CSS query will match dark mode.首选配色方案CSS查询将匹配深色模式。
  • The updated event will be emitted将发出updated事件

Settings this property to light will have the following effects:将此属性设置为light将具有以下效果：

  • nativeTheme.shouldUseDarkColors will be false when accessed访问时将为false
  • Any UI Electron renders on Linux and Windows including context menus, devtools, etc. will use the light UI.Linux和Windows上的任何UI Electron渲染，包括上下文菜单、开发工具等，都将使用轻型UI。
  • Any UI the OS renders on macOS including menus, window frames, etc. will use the light UI.操作系统在macOS上渲染的任何UI，包括菜单、窗口框架等，都将使用浅色UI。
  • The prefers-color-scheme CSS query will match light mode.首选配色方案CSS查询将与灯光模式匹配。
  • The updated event will be emitted将发出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'

Your application should then always use shouldUseDarkColors to determine what CSS to apply.然后，您的应用程序应该始终使用shouldUseDarkColors来确定要应用的CSS。

nativeTheme.shouldUseHighContrastColors macOS Windows Readonly​

A boolean for if the OS / Chromium currently has high-contrast mode enabled or is being instructed to show a high-contrast UI.一个boolean，用于说明OS/Chromium当前是否启用了高对比度模式，或者是否被指示显示高对比度UI。

nativeTheme.shouldUseInvertedColorScheme macOS Windows Readonly​

A boolean for if the OS / Chromium currently has an inverted color scheme or is being instructed to use an inverted color scheme.一个boolean，用于表示OS/Chromium当前是否具有反转的配色方案或被指示使用反转的配色系统。

nativeTheme.inForcedColorsMode Windows Readonly​

A boolean indicating whether Chromium is in forced colors mode, controlled by system accessibility settings. 一个boolean，指示Chromium是否处于强制颜色模式，由系统可访问性设置控制。Currently, Windows high contrast is the only system setting that triggers forced colors mode.目前，Windows高对比度是唯一触发强制颜色模式的系统设置。