メインコンテンツへ飛ぶ

nativeTheme

Chromium のネイティブカラーテーマの変更を読み取って対応します。

Process: Main

イベント​

nativeTheme モジュールには以下のイベントがあります。

イベント: 'updated'​

基になる NativeTheme の何かが変更されたときに発行されます。 これは通常、shouldUseDarkColors、shouldUseHighContrastColors または shouldUseInvertedColorScheme のいずれかの値が変更されたことを意味します。 それらを確認して、どれが変更されたかを判断する必要があります。

プロパティ​

nativeTheme モジュールには以下のプロパティがあります。

nativeTheme.shouldUseDarkColors 読み出し専用​

OS / Chromium で現在ダークモードが有効になっている、またはダークスタイルの UI を表示するように指示されているかどうかの boolean。 この値を変更する場合は、以下の themeSource を使用する必要があります。

nativeTheme.themeSource​

string 型のプロパティです。system、light か dark にできます。 Chromium が内部で使用することを選択した値をオーバーライドして置き換えるために使用されます。

このプロパティを system に設定するとオーバーライドが削除され、すべてが OS のデフォルトにリセットされます。 既定の themeSource は system です。

このプロパティを dark に設定すると、以下の効果があります。

  • nativeTheme.shouldUseDarkColors はアクセス時に true になります
  • 右クリックメニューやデベロッパー ツールなど、Linux や Windows 上で Electron がレンダリングするすべての UI は、ダーク UI を使用します。
  • メニューやウィンドウフレームなどの OS が macOS 上でレンダリングする UI は、すべてダーク UI を使用します。
  • prefers-color-scheme CSS が dark モードに親和します。
  • updated イベントが発生します。

このプロパティを light に設定すると、以下の効果があります。

  • nativeTheme.shouldUseDarkColors はアクセス時に false になります
  • 右クリックメニューやデベロッパー ツールなど、Linux や Windows 上で Electron がレンダリングするすべての UI は、ライト UI を使用します。
  • メニューやウィンドウフレームなどの OS が macOS 上でレンダリングする UI は、すべてライト UI を使用します。
  • prefers-color-scheme CSS が light モードに親和します。
  • updated イベントが発生します。

このプロパティを使用するにあたって、ユーザーに以下のような 3 つの選択肢がある、古典的なアプリケーションの "ダークモード" ステートマシンに合わせるべきです。

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

アプリケーションは、shouldUseDarkColors を使用して、適用する CSS を常に決定する必要があります。

nativeTheme.shouldUseHighContrastColors macOS Windows 読み出し専用​

OS / Chromium で現在ハイコントラストモードが有効になっている、またはハイコントラスト UI を表示するように指示されているかどうかの boolean。

nativeTheme.shouldUseDarkColorsForSystemIntegratedUI macOS Windows Readonly​

A boolean property indicating whether or not the system theme has been set to dark or light.

On Windows this property distinguishes between system and app light/dark theme, returning true if the system theme is set to dark theme and false otherwise. On macOS the return value will be the same as nativeTheme.shouldUseDarkColors.

nativeTheme.shouldUseInvertedColorScheme macOS Windows 読み出し専用​

OS / Chromium が現在反転カラースキームを持っている、または反転カラースキームを使用するように指示されているかどうかの boolean。

nativeTheme.inForcedColorsMode Windows 読み出し専用​

boolean 型で Chromium が強制カラーモードであるかどうかを示します。これはシステムアクセシビリティの設定によって制御されます。 現在、Windows の高コントラストは強制カラーモードである唯一のシステム設定です。

nativeTheme.prefersReducedTransparency 読み出し専用​

boolean 型で、ユーザーがシステムのアクセシビリティ設定を通じて OS レベルで透過度を下げるとを選択したかどうかを示します。