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.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.