跳至主要內容

nativeTheme

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

程序:主程序

事件

nativeTheme 模組會發出以下事件

事件:'updated'

當底層的 NativeTheme 有任何變更時發出。這通常表示 shouldUseDarkColorsshouldUseHighContrastColorsshouldUseInvertedColorScheme 的值已變更。您必須檢查它們以確定哪個已變更。

屬性

nativeTheme 模組具有以下屬性

nativeTheme.shouldUseDarkColors 唯讀

一個 boolean 值,表示作業系統/Chromium 目前是否已啟用深色模式,或是否被指示顯示深色樣式的 UI。如果您想要修改此值,您應該使用下面的 themeSource

nativeTheme.themeSource

一個 string 屬性,可以是 systemlightdark。它用於覆寫和取代 Chromium 內部選擇使用的值。

將此屬性設定為 system 將會移除覆寫,並且所有內容都將重設為作業系統預設值。依預設,themeSourcesystem

將此屬性設定為 dark 將會產生以下效果

  • 存取時,nativeTheme.shouldUseDarkColors 將為 true
  • Electron 在 Linux 和 Windows 上渲染的任何 UI,包括上下文選單、開發人員工具等,都將使用深色 UI。
  • 作業系統在 macOS 上渲染的任何 UI,包括選單、視窗框架等,都將使用深色 UI。
  • prefers-color-scheme CSS 查詢將會比對 dark 模式。
  • 將會發出 updated 事件

將此屬性設定為 light 將會產生以下效果

  • 存取時,nativeTheme.shouldUseDarkColors 將為 false
  • Electron 在 Linux 和 Windows 上渲染的任何 UI,包括上下文選單、開發人員工具等,都將使用淺色 UI。
  • 作業系統在 macOS 上渲染的任何 UI,包括選單、視窗框架等,都將使用淺色 UI。
  • prefers-color-scheme CSS 查詢將會比對 light 模式。
  • 將會發出 updated 事件

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

  • 跟隨作業系統 --> themeSource = 'system'
  • 深色模式 --> themeSource = 'dark'
  • 淺色模式 --> themeSource = 'light'

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

nativeTheme.shouldUseHighContrastColors macOS Windows 唯讀

一個 boolean 值,表示作業系統/Chromium 目前是否已啟用高對比模式,或是否被指示顯示高對比 UI。

nativeTheme.shouldUseInvertedColorScheme macOS Windows 唯讀

一個 boolean 值,表示作業系統/Chromium 目前是否具有反轉色彩配置,或是否被指示使用反轉色彩配置。

nativeTheme.inForcedColorsMode Windows 唯讀

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

nativeTheme.prefersReducedTransparency 唯讀

一個 boolean 值,指示使用者是否已透過系統協助工具設定選擇在作業系統層級降低透明度。