nativeTheme

    Process: Main

    The nativeTheme module emits the following events:

    Emitted when something in the underlying NativeTheme has changed. This normally means that either the value of shouldUseDarkColors, shouldUseHighContrastColors or shouldUseInvertedColorScheme has changed. You will have to check them to determine which one has changed.

    Properties

    The nativeTheme module has the following properties:

    nativeTheme.shouldUseDarkColors Readonly

    A string property that can be , light or dark. It is used to override and supersede the value that Chromium has chosen to use internally.

    Setting this property to system will remove the override and everything will be reset to the OS default. By default themeSource is system.

    Settings this property to dark will have the following effects:

    • nativeTheme.shouldUseDarkColors will be true when accessed
    • 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.
    • The CSS query will match dark mode.
    • The updated event will be emitted

    Settings this property to light will have the following effects:

    • 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.
    • The CSS query will match light mode.
    • The updated event will be emitted
    • Follow OS —> themeSource = 'system'
    • Dark Mode —> themeSource = 'dark'

    Your application should then always use shouldUseDarkColors to determine what CSS to apply.

    nativeTheme.shouldUseHighContrastColors macOS Windows Readonly

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

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