nativeTheme (fable-electron-docs-api) | fable-electron-docs-api

fable-electron-docs-api

nativeTheme Type

Namespace: Fable.Electron
Assembly: Fable.Electron.dll
Parent Module: Main
Base Type: obj
All Interfaces: EventEmitter

⚠ Process Availability: Main ✔ | Renderer ❌ | Utility ❌ | Exported ✔

Read and respond to changes in Chromium's native color theme.Process: Main

Static members

Static member	Description
`nativeTheme.inForcedColorsMode` Full Usage: `nativeTheme.inForcedColorsMode` Returns: `bool`	⚠ OS Compatibility: WIN ✔ \| MAC ❌ \| LIN ❌ \| MAS ❌ 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. Returns: `bool`
`nativeTheme.offUpdated handler` Full Usage: `nativeTheme.offUpdated handler` Parameters: handler : `unit -> unit` Modifiers: inline	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. handler : `unit -> unit`
`nativeTheme.onUpdated handler` Full Usage: `nativeTheme.onUpdated handler` Parameters: handler : `unit -> unit` Modifiers: inline	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. handler : `unit -> unit`
`nativeTheme.onceUpdated handler` Full Usage: `nativeTheme.onceUpdated handler` Parameters: handler : `unit -> unit` Modifiers: inline	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. handler : `unit -> unit`
`nativeTheme.prefersReducedTransparency` Full Usage: `nativeTheme.prefersReducedTransparency` Returns: `bool`	A boolean that indicates the whether the user has chosen via system accessibility settings to reduce transparency at the OS level. Returns: `bool`
`nativeTheme.shouldUseDarkColors` Full Usage: `nativeTheme.shouldUseDarkColors` Returns: `bool`	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. Returns: `bool`
`nativeTheme.shouldUseDarkColorsForSystemIntegratedUI` Full Usage: `nativeTheme.shouldUseDarkColorsForSystemIntegratedUI` Returns: `bool`	⚠ OS Compatibility: WIN ✔ \| MAC ✔ \| LIN ❌ \| MAS ❌ 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. Returns: `bool`
`nativeTheme.shouldUseHighContrastColors` Full Usage: `nativeTheme.shouldUseHighContrastColors` Returns: `bool`	⚠ OS Compatibility: WIN ✔ \| MAC ✔ \| LIN ❌ \| MAS ❌ A boolean for if the OS / Chromium currently has high-contrast mode enabled or is being instructed to show a high-contrast UI. Returns: `bool`
`nativeTheme.shouldUseInvertedColorScheme` Full Usage: `nativeTheme.shouldUseInvertedColorScheme` Returns: `bool`	⚠ OS Compatibility: WIN ✔ \| MAC ✔ \| LIN ❌ \| MAS ❌ A boolean for if the OS / Chromium currently has an inverted color scheme or is being instructed to use an inverted color scheme. Returns: `bool`
`nativeTheme.themeSource` Full Usage: `nativeTheme.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 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 prefers-color-scheme CSS query will match dark mode.* The updated event will be emittedSettings this property to light will have the following effects:* nativeTheme.shouldUseDarkColors will be false when 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-scheme CSS query will match light mode.* The updated event will be emittedThe 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.