Aller au contenu principal

nativeTheme

Consulte et réagit aux changements du thème de couleur natif de Chromium.

Processus : Main

Événements​

Le module nativeTheme déclenche les événements suivants :

Événement 'updated'​

Émis lorsque quelque chose dans le NativeTheme sous-jacent a changé. Cela signifie normalement qu'une des valeur de shouldUseDarkColors, shouldUseHighContrastColors ou shouldUseInvertedColorScheme a changé. Vous devrez donc toutes les vérifier afin de déterminer laquel a changé.

Propriétés​

Le module nativeTheme dispose des propriétés suivantes :

nativeTheme.shouldUseDarkColors Lecture seule​

boolean qui indique si l'OS / Chromium a actuellement un mode sombre activé ou est en train d'être chargé de montrer une interface de style en mode sombre. Si vous souhaitez modifier cette valeur, vous devez utiliser la propriété themeSource ci-dessous.

nativeTheme.themeSource​

Une propriété de type string pouvant prendre comme valeur system, light ou dark. Elle est utilisée pour remplacer et se substituer à la valeur que Chromium a choisi d'utiliser en interne.

La valeur à system supprimera la substitution et tout sera réinitialisé à la valeur par défaut du système d'exploitation. Par défaut themeSource est à system.

La valeur dark aura les effets suivants :

  • nativeTheme.shouldUseDarkColors sera true quand il sera consulté
  • N'importe quel UI Electron affichée sous Linux et Windows, y compris les menus contextuels, devtools, etc. utilisera l'interface sombre.
  • N'importe quelle UI affichée sous macOS, y compris les menus, les images de fenêtres, etc. utilisera l'interface sombre.
  • La requête CSS prefers-color-scheme correspondra au mode dark.
  • L'événement updated sera émis

La valeur light aura les effets suivants :

  • nativeTheme.shouldUseDarkColors sera false quand il sera consulté
  • N'importe quel UI Electron rend sous Linux et Windows, y compris les menus contextuels, devtools, etc. utilisera l'interface clair.
  • N'importe quelle interface utilisateur que l'OS affiche sur macOS, y compris les menus, les images de fenêtres, etc. utilisera l'interface clair.
  • La requête CSS prefers-color-scheme correspondra au mode light.
  • L'événement updated sera émis

L'utilisation de cette propriété devrait s'accorder avec le "mode sombre" classique du système dans votre application où l'utilisateur a trois options.

  • Suivant OS --> themeSource = 'system'
  • Mode sombre --> themeSource = 'dark'
  • Mode clair --> themeSource = 'light'

Votre application devrait alors toujours utiliser shouldUseDarkColors pour déterminer quel CSS appliquer.

nativeTheme.shouldUseHighContrastColors macOS Windows Lecture seule​

Un boolean indiquant si le système d'exploitation / Chromium a actuellement un mode à contraste élevé activé ou est en train d'être chargé de montrer une interface à contraste élevé.

nativeTheme.shouldUseInvertedColorScheme macOS Windows Lecture seule​

Un boolean pour si le système d'exploitation / Chromium a actuellement un schéma de couleurs inversé ou devant utiliser un modèle de couleurs inversé.

nativeTheme.inForcedColorsMode Windows Lecture seule​

Un boolean indiquant si Chromium est en mode couleur forcée, contrôlé par les paramètres d'accessibilité du système. À l'heure actuelle, le contraste élevé de Windows est le seul réglage système qui déclenche le mode de couleurs forcé.