nativeTheme

优质
小牛编辑
136浏览
2023-12-01

读取并响应Chromium本地色彩主题中的变化。

进程:主进程

事件

nativeTheme模块包括以下事件:

事件名: 'updated'

当以下NativeTheme属性发生变化时会触发此事件: shouldUseDarkColors, shouldUseHighContrastColorsshouldUseInvertedColorScheme 。 你需要自己检查到底是哪个属性发生了变化。

属性

nativeTheme 模块具备以下属性:

nativeTheme.shouldUseDarkColors 只读

此属性的值为一个 Boolean 类型的值,代表着当前OS / Chromium是否正处于dark模式。或者应用程序是否正被建议使用dark模式的皮肤 如果你希望修改此属性的值,你应该使用下面的 themeSource属性

nativeTheme.themeSource

一个类型为String的属性,此属性可能的值为:system, light or dark. 它被用来覆盖、重写Chromium内部的相应的值

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

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

  • 当访问 nativeTheme.shouldUseDarkColors 时值为 true
  • 任何在 Linux 和 Windows 上的 UI Electron 渲染,包括 context menus、devtools 等等,都会使用暗色界面。
  • 在 MacOS 上打开的任何 UI 界面,包括 menus、window frames 等,渲染时都会使用暗色界面。
  • prefers-color-scheme CSS 查询将匹配 dark 模式
  • updated 事件将被触发

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

  • 当访问 nativeTheme.shouldUseDarkColors 时值为 false
  • 任何在 Linux 和 Windows 上的 UI Electron 渲染,包括 context menus、devtools 等等,都会使用亮色界面。
  • 在 MacOS 上打开的任何 UI 界面,包括 menus、window frames 等,渲染时都会使用亮色界面。
  • prefers-color-scheme CSS 查询将匹配 light 模式
  • updated 事件将被触发

此属性的使用应与应用程序中的经典"黑暗模式"状态机相符,用户有三个选项:

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

你的应用程序应该总是使用 shouldUseDarkColors 来确定要应用哪些 CSS

nativeTheme.shouldUseHighContrastColors macOS Windows Readonly

Boolean 代表如果操作系统/ Chromium 目前是否启用了高对比度模式或正在被指示显示高对比度UI。

nativeTheme.shouldUseInvertedColorScheme macOS Windows Readonly

Boolean 代表操作系统/ Chromium 目前是否有使用一个反转配色方案 或正在被指示使用一个反转的颜色方案。