Saltar al contenido principal

nativeTheme

Lee y respondo a los cambios en el tema de color nativo de Chromium.

Proceso: principal

Eventos​

El módulo nativo nativeTheme emite los siguientes eventos:

Evento: "updated"​

Emitido cuando algo en el NativeTheme subyacente ha cambiado. Esto normalmente significa que le valor de shouldUseDarkColors, shouldUseHighContrastColors o shouldUseInvertedColorScheme ha cambiado. Tendrás que comprobarlos para determinar cual ha cambiado.

Propiedades​

El módulo nativeTheme tiene las siguientes propiedades:

nativeTheme.shouldUseDarkColors SoloLectura​

Un boolean para si el OS / Chromium actualmente tiene un modo oscuro activado o está siendo instruido para mostrar una UI de estilo oscuro. Si quieres modificar este valor debes utilizar themeSource acontinuación.

nativeTheme.themeSource​

Una propiedad string que puede ser system, light o dark. It is used to override and supersede the value that Chromium has chosen to use internally.

Estableciendo esta propiedad a system eliminará la sobreescritura y todo será restablecido a los valores predeterminados del sistema operativo. Por defecto themeSource es system.

Estableciendo esta propiedad a dark tendrá los siguientes efectos:

  • nativeTheme.shouldUseDarkColors será true cuando se accede
  • Any UI Electron renders on Linux and Windows including context menus, devtools, etc. will use the dark UI.
  • Any UI the OS renders on macOS including menus, window frames, etc. will use the dark UI.
  • La consulta CSS prefers-color-scheme coincidirá con el modo dark.
  • El evento updated será emitido

Estableciendo esta propiedad a light tendrá los siguientes efectos:

  • nativeTheme.shouldUseDarkColors será false cuando se acceda
  • Any UI Electron renders on Linux and Windows including context menus, devtools, etc. will use the light UI.
  • Any UI the OS renders on macOS including menus, window frames, etc. will use the light UI.
  • La consulta CSS prefers-color-scheme coincidirá con el modo light.
  • El evento updated será emitido

El uso de esta propiedad debe alinearse con una máquina de estado clásica de "modo oscuro" en su aplicación, donde el usuario tiene tres opciones.

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

Su aplicación debe usar siempre shouldUseDarkColors para determinar que CSS aplicar.

nativeTheme.shouldUseHighContrastColors macOS Windows SoloLectura​

A boolean for if the OS / Chromium currently has high-contrast mode enabled or is being instructed to show a high-contrast UI.

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 SoloLectura​

A boolean for if the OS / Chromium currently has an inverted color scheme or is being instructed to use an inverted color scheme.

nativeTheme.inForcedColorsMode Windows Readonly​

A boolean indicating whether Chromium is in forced colors mode, controlled by system accessibility settings. Currently, Windows high contrast is the only system setting that triggers forced colors mode.

nativeTheme.prefersReducedTransparency SoloLectura​

A boolean that indicates the whether the user has chosen via system accessibility settings to reduce transparency at the OS level.