メインコンテンツへ飛ぶ

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.shouldUseInvertedColorScheme macOS Windows 読み出し専用​

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

nativeTheme.inForcedColorsMode Windows 読み出し専用​

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

nativeTheme.prefersReducedTransparency 読み出し専用​

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