跳到主要內容

nativeTheme

讀取並回應 Chromium 原生色彩主題的變更。

程序： 主要

事件​

nativeTheme 模組會發射下列事件

事件： 'updated'​

當底層 NativeTheme 中的某些內容變更時發射。這通常表示 shouldUseDarkColors、shouldUseHighContrastColors 或 shouldUseInvertedColorScheme 的值已變更。您必須檢查它們以判斷哪個已變更。

屬性​

nativeTheme 模組具有下列屬性

nativeTheme.shouldUseDarkColors 唯讀​

一個 boolean 值，表示 OS / Chromium 目前是否啟用深色模式，或是否被指示顯示深色風格 UI。如果您想修改此值，您應該使用下方的 themeSource。

nativeTheme.themeSource​

一個 string 屬性，可以是 system、light 或 dark。它用於覆寫和取代 Chromium 選擇在內部使用的值。

將此屬性設定為 system 將移除覆寫，並且所有內容都將重設為 OS 預設值。預設情況下，themeSource 為 system。

將此屬性設定為 dark 將具有以下效果

  • 存取時，nativeTheme.shouldUseDarkColors 將為 true
  • Electron 在 Linux 和 Windows 上渲染的任何 UI，包括上下文選單、開發者工具等，都將使用深色 UI。
  • OS 在 macOS 上渲染的任何 UI，包括選單、視窗框架等，都將使用深色 UI。
  • prefers-color-scheme CSS 查詢將匹配 dark 模式。
  • 將發射 updated 事件

將此屬性設定為 light 將具有以下效果

  • 存取時，nativeTheme.shouldUseDarkColors 將為 false
  • Electron 在 Linux 和 Windows 上渲染的任何 UI，包括上下文選單、開發者工具等，都將使用淺色 UI。
  • OS 在 macOS 上渲染的任何 UI，包括選單、視窗框架等，都將使用淺色 UI。
  • prefers-color-scheme CSS 查詢將匹配 light 模式。
  • 將發射 updated 事件

此屬性的使用應與應用程式中的經典「深色模式」狀態機對齊，使用者有三個選項。

  • 跟隨 OS --> themeSource = 'system'
  • 深色模式 --> themeSource = 'dark'
  • 淺色模式 --> themeSource = 'light'

您的應用程式應始終使用 shouldUseDarkColors 來判斷要套用哪些 CSS。

nativeTheme.shouldUseHighContrastColors macOS Windows 唯讀​

一個 boolean 值，表示 OS / Chromium 目前是否啟用高對比模式，或是否被指示顯示高對比 UI。

nativeTheme.shouldUseInvertedColorScheme macOS Windows 唯讀​

一個 boolean 值，表示 OS / Chromium 目前是否具有反轉色彩配置，或是否被指示使用反轉色彩配置。

nativeTheme.inForcedColorsMode Windows 唯讀​

一個 boolean 值，指示 Chromium 是否處於強制色彩模式，由系統輔助功能設定控制。目前，Windows 高對比是唯一觸發強制色彩模式的系統設定。

nativeTheme.prefersReducedTransparency 唯讀​

一個 boolean 值，指示使用者是否透過系統輔助功能設定選擇在 OS 層級降低透明度。