0a9b201c34
* feat: add nativeTheme.themeSource to allow apps to override Chromiums theme choice (#19960) * feat: add nativeTheme.shouldUseDarkColorsOverride to allow apps to override Chromiums theme choice * spec: add tests for shouldUseDarkColorsOverride * chore: add missing forward declarations * refactor: rename overrideShouldUseDarkColors to themeSource * chore: only run appLevelAppearance specs on Mojave and up * chore: update patch with more info and no define * Update spec-main/api-native-theme-spec.ts Co-Authored-By: Jeremy Apthorp <jeremya@chromium.org> * Update api-native-theme-spec.ts * Update api-native-theme-spec.ts * Update api-native-theme-spec.ts * fix: don't expose nativeTheme in the renderer process (#20139) Exposing these in the renderer didn't make sense as they weren't backed by the same instance / value store. This API should be browser only especially now that we have nativeTheme.themeSource. Exposing in //common was a mistake from the beginning. * fix: emit updated on NativeTheme on the UI thread to avoid DCHECK (#20137) * fix: emit updated on NativeTheme on the UI thread to avoid DCHECK * Update atom_api_native_theme.cc * spec: wait a few ticks for async events to emit so that test events do not leak into each other * chore: add SetGTKDarkThemeEnabled(enabled) internal helper to allow dynamic theme selection on linux (#19964) This is just a after-creation setter for the `darkTheme` constructor option. This is delibrately a method and not a property as there is no getter. * spec: remove leftover .only
2.9 KiB
nativeTheme
Read and respond to changes in Chromium's native color theme.
Process: Main
Events
The nativeTheme module emits the following events:
Event: 'updated'
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 Boolean for if the OS / Chromium currently has a dark mode enabled or is
being instructed to show a dark-style UI. If you want to modify this value you
should use themeSource below.
nativeTheme.themeSource
A String property that can be system, light or dark. It is used to override and supercede
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.shouldUseDarkColorswill betruewhen 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
prefers-color-schemeCSS query will matchdarkmode. - The
updatedevent will be emitted
Settings this property to light will have the following effects:
nativeTheme.shouldUseDarkColorswill befalsewhen accessed- 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
prefers-color-schemeCSS query will matchlightmode. - The
updatedevent 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.
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-constrast UI.
nativeTheme.shouldUseInvertedColorScheme macOS Windows Readonly
A Boolean for if the OS / Chromium currently has an inverted color scheme
or is being instructed to use an inverted color scheme.