API / theme / nativeTheme

theme / nativeTheme

Read and control the OS light/dark preference. nativeTheme is an alias of theme.

import { nativeTheme, theme } from '@owear/core'   // same object

API

interface ThemeInfo {
  dark: boolean
  source: 'system' | 'light' | 'dark'
  highContrast: boolean
  reducedTransparency: boolean
}

theme.get(): Promise<ThemeInfo>
theme.isDark(): Promise<boolean>
theme.setSource(source: 'system' | 'light' | 'dark'): Promise<ThemeInfo>
theme.watch(): Promise<void>
theme.unwatch(): Promise<void>

setSource forces the preference. It also applies the color scheme to the web content where the platform allows it (Windows: WebView2 PreferredColorScheme; Linux: the GTK prefer-dark setting).

Changes

watch() starts the native watcher, which emits theme.changed:

// main process (raw channel)
;(app as any).__channel.on('theme.changed', (info: ThemeInfo) => {})

// renderer
ow.on('theme.changed', (info) => {
  document.documentElement.dataset.theme = info.dark ? 'dark' : 'light'
})

Backends

  • Linux: GTK gtk-application-prefer-dark-theme, then GNOME 42+ org.gnome.desktop.interface color-scheme, then the GTK theme name.
  • Windows: registry.

highContrast and reducedTransparency are reported when the OS exposes them and default to false otherwise.

Edit this page on GitHub ↗