Native theme (window.Electron.nativeTheme)
Reads and controls Electron's OS-level dark/light theme state. Source: src/main/native-theme.ts, channel prefix nativeTheme:*. Always on, no config needed. The @devioarts/electron/react useNativeTheme() hook wraps this module's onUpdated() for you — see Usage: React hooks.
Methods
| Method | Returns | Notes |
|---|---|---|
get() |
Promise<NativeThemeSnapshot> |
Current snapshot. |
setThemeSource(source: 'system' | 'light' | 'dark') |
Promise<NativeThemeSnapshot> |
Throws VALIDATION for any other value. Resolves the new snapshot. |
onUpdated(callback: (data: NativeThemeSnapshot) => void) |
() => void (unsubscribe) |
Fires on every window whenever the OS theme changes. |
NativeThemeSnapshot
{ shouldUseDarkColors: boolean; themeSource: 'system' | 'light' | 'dark'; shouldUseHighContrastColors: boolean; shouldUseInvertedColorScheme: boolean }
Example
import { useNativeTheme } from '@devioarts/electron/react';
function ThemeLabel() {
const theme = useNativeTheme();
return <span>{theme?.shouldUseDarkColors ? 'dark' : 'light'}</span>;
}
Without the hook:
const unsubscribe = window.Electron.nativeTheme.onUpdated((snapshot) => {
document.documentElement.dataset.theme = snapshot.shouldUseDarkColors ? 'dark' : 'light';
});
.safe
Partial. get() and setThemeSource() are wrapped — window.Electron.safe.nativeTheme.* resolves { ok: true, data } / { ok: false, error } instead of throwing. onUpdated() is the same function on both surfaces (event subscription, never throws).