themeSource
A string
property that can be system
, 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 betrue
when accessedAny 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
prefers-color-scheme
CSS query will matchdark
mode.The
updated
event will be emitted
Settings this property to light
will have the following effects:
nativeTheme.shouldUseDarkColors
will befalse
when accessedAny 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
prefers-color-scheme
CSS query will matchlight
mode.The
updated
event will be emitted
The usage of this property should align with a classic "dark mode" state machine in your application where the user has three options.
Follow OS
-->themeSource = 'system'
Dark Mode
-->themeSource = 'dark'
Light Mode
-->themeSource = 'light'
Your application should then always use shouldUseDarkColors
to determine what CSS to apply.