nativeTheme
讀取並回應 Chromium 原生色彩主題的變更。
程序:主程序
事件
nativeTheme
模組會發出以下事件
事件:'updated'
當底層的 NativeTheme 有任何變更時發出。這通常表示 shouldUseDarkColors
、shouldUseHighContrastColors
或 shouldUseInvertedColorScheme
的值已變更。您必須檢查它們以確定哪個已變更。
屬性
nativeTheme
模組具有以下屬性
nativeTheme.shouldUseDarkColors
唯讀
一個 boolean
值,表示作業系統/Chromium 目前是否已啟用深色模式,或是否被指示顯示深色樣式的 UI。如果您想要修改此值,您應該使用下面的 themeSource
。
nativeTheme.themeSource
一個 string
屬性,可以是 system
、light
或 dark
。它用於覆寫和取代 Chromium 內部選擇使用的值。
將此屬性設定為 system
將會移除覆寫,並且所有內容都將重設為作業系統預設值。依預設,themeSource
為 system
。
將此屬性設定為 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
值,指示使用者是否已透過系統協助工具設定選擇在作業系統層級降低透明度。