feat: expose nativeTheme.shouldUseDarkColorsForSystemIntegratedUI (#46599)

feat: expose shouldUseDarkColorsForSystemIntegratedUI

Closes https://github.com/electron/electron/issues/46429.
Refs https://github.com/electron/electron/pull/19735.

This PR adds a new API `shouldUseDarkColorsForSystemIntegratedUI` to the
`nativeTheme` module. This API returns a boolean indicating whether the
system is using dark colors for system integrated UI elements. This is
useful for applications that want to adapt their UI to match the system
theme, especially for those that use system integrated UI elements like
the shell theme or taskbar appearance.

Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com>
Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com>
This commit is contained in:
trop[bot] 2025-04-16 19:40:51 +02:00 committed by GitHub
parent 1d2107ebff
commit 592d0155f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 21 additions and 0 deletions

View file

@ -63,6 +63,14 @@ Your application should then always use `shouldUseDarkColors` to determine what
A `boolean` for if the OS / Chromium currently has high-contrast mode enabled A `boolean` for if the OS / Chromium currently has high-contrast mode enabled
or is being instructed to show a high-contrast UI. 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_ _Readonly_ ### `nativeTheme.shouldUseInvertedColorScheme` _macOS_ _Windows_ _Readonly_
A `boolean` for if the OS / Chromium currently has an inverted color scheme A `boolean` for if the OS / Chromium currently has an inverted color scheme

View file

@ -63,6 +63,10 @@ bool NativeTheme::ShouldUseHighContrastColors() {
return ui_theme_->UserHasContrastPreference(); return ui_theme_->UserHasContrastPreference();
} }
bool NativeTheme::ShouldUseDarkColorsForSystemIntegratedUI() {
return ui_theme_->ShouldUseDarkColorsForSystemIntegratedUI();
}
bool NativeTheme::InForcedColorsMode() { bool NativeTheme::InForcedColorsMode() {
return ui_theme_->InForcedColorsMode(); return ui_theme_->InForcedColorsMode();
} }
@ -109,6 +113,8 @@ gin::ObjectTemplateBuilder NativeTheme::GetObjectTemplateBuilder(
&NativeTheme::SetThemeSource) &NativeTheme::SetThemeSource)
.SetProperty("shouldUseHighContrastColors", .SetProperty("shouldUseHighContrastColors",
&NativeTheme::ShouldUseHighContrastColors) &NativeTheme::ShouldUseHighContrastColors)
.SetProperty("shouldUseDarkColorsForSystemIntegratedUI",
&NativeTheme::ShouldUseDarkColorsForSystemIntegratedUI)
.SetProperty("shouldUseInvertedColorScheme", .SetProperty("shouldUseInvertedColorScheme",
&NativeTheme::ShouldUseInvertedColorScheme) &NativeTheme::ShouldUseInvertedColorScheme)
.SetProperty("inForcedColorsMode", &NativeTheme::InForcedColorsMode) .SetProperty("inForcedColorsMode", &NativeTheme::InForcedColorsMode)

View file

@ -48,6 +48,7 @@ class NativeTheme final : public gin::Wrappable<NativeTheme>,
ui::NativeTheme::ThemeSource GetThemeSource() const; ui::NativeTheme::ThemeSource GetThemeSource() const;
bool ShouldUseDarkColors(); bool ShouldUseDarkColors();
bool ShouldUseHighContrastColors(); bool ShouldUseHighContrastColors();
bool ShouldUseDarkColorsForSystemIntegratedUI();
bool ShouldUseInvertedColorScheme(); bool ShouldUseInvertedColorScheme();
bool InForcedColorsMode(); bool InForcedColorsMode();
bool GetPrefersReducedTransparency(); bool GetPrefersReducedTransparency();

View file

@ -102,6 +102,12 @@ describe('nativeTheme module', () => {
}); });
}); });
describe('nativeTheme.shouldUseDarkColorsForSystemIntegratedUI', () => {
it('returns a boolean', () => {
expect(nativeTheme.shouldUseDarkColorsForSystemIntegratedUI).to.be.a('boolean');
});
});
describe('nativeTheme.inForcedColorsMode', () => { describe('nativeTheme.inForcedColorsMode', () => {
it('returns a boolean', () => { it('returns a boolean', () => {
expect(nativeTheme.inForcedColorsMode).to.be.a('boolean'); expect(nativeTheme.inForcedColorsMode).to.be.a('boolean');