Theme API

Theme-related exports from @widgemo/widgemo-core.

Exports

Export	Kind	Purpose
`WidgemoThemeProvider`	Component	Applies scoped theme variables to a subtree
`useWidgemoTheme`	Hook	Reads the resolved theme from context
`getTheme(name?)`	Function	Retrieves a theme from the named registry
`registerTheme(name, theme)`	Function	Registers a named theme in the runtime registry
`mergeZoneTheme(base, overrides)`	Function	Shallow-merges `ZoneTheme` overrides safely
`defaultWidgemoTheme`	Object (`WidgemoTheme`)	Public default light preset alias

`WidgemoThemeProvider`

Wrap a subtree to apply scoped theme variables and context.

Props

Prop	Type	Default	Behavior
`theme`	`'light' \| 'dark' \| 'auto' \| WidgemoTheme`	`'light'`	Selects preset or custom theme object
`className`	`string`	`''`	Added to the provider wrapper (`widgemo-theme-scope ...`)
`children`	`ReactNode`	required	Rendered inside provider scope

Behavior notes

theme="auto" evaluates once per render using window.matchMedia('(prefers-color-scheme: dark)').
auto does not subscribe to operating-system preference changes.
The provider injects CSS vars into a wrapper element, so theme scope is local to that subtree.

import { WidgemoThemeProvider } from '@widgemo/widgemo-core';

// Preset
<WidgemoThemeProvider theme="dark">…</WidgemoThemeProvider>

// System preference
<WidgemoThemeProvider theme="auto">…</WidgemoThemeProvider>

// Object
<WidgemoThemeProvider theme={{ colors: { actionButtonBg: '#0f172a' } }}>…</WidgemoThemeProvider>

`useWidgemoTheme`

Returns the resolved WidgemoTheme from context.

import { useWidgemoTheme } from '@widgemo/widgemo-core';

function MyHeader() {
  const theme = useWidgemoTheme();
  return <header style={{ background: theme.zone?.backgroundColor }} />;
}

Without a surrounding provider, it returns {}.

`registerTheme(name, theme)` and `getTheme(name?)`

Runtime theme registry helpers.

`registerTheme(name, theme)`

Registers a named WidgemoTheme for retrieval via getTheme.

`getTheme(name?)`

Retrieves a theme by name.

getTheme('my-theme') returns the registered theme if present.
getTheme() uses 'default'.
Unknown names fall back to the registry default.

import { registerTheme, getTheme } from '@widgemo/widgemo-core';

registerTheme('my-dark-theme', {
  colors: {
    actionButtonBg: '#0f172a',
    actionButtonColor: '#f8fafc',
  },
});

const theme = getTheme('my-dark-theme');

// then reference it in config:
const config = {
  theme: 'my-dark-theme',
  zones: { /* … */ },
};

config.theme participates in runtime theming at widget/config level. Use WidgemoThemeProvider for subtree-scoped CSS variable theming.

`mergeZoneTheme`

Safely merges zone-level overrides.

Override keys win.
Existing base keys are preserved.
Undefined base is handled by returning overrides.

import { mergeZoneTheme } from '@widgemo/widgemo-core';

const merged = mergeZoneTheme(baseTheme, overrides);

`defaultWidgemoTheme`

Public default light preset alias (from defaultLightTheme). Useful as a base for custom theme objects.

import { defaultWidgemoTheme } from '@widgemo/widgemo-core';

console.log(defaultWidgemoTheme);

Note: this export is the provider light preset alias. Registry getTheme('default') resolves the registry default object.

Types

`WidgemoTheme`

interface WidgemoTheme {
  colors?: {
    actionButtonBg?: string;
    actionButtonColor?: string;
    actionButtonBorder?: string;
    actionButtonHoverBg?: string;
    actionButtonHoverBorder?: string;
    actionMenuBg?: string;
    actionMenuColor?: string;
    actionMenuItemHoverBg?: string;
    actionMenuItemHoverColor?: string;
    [key: string]: string | undefined;
  };
  spacing?: Record<string, string>;
  zone?: ZoneTheme;
  action?: ActionTheme;
}

`ZoneTheme`

ZoneTheme controls zone-level inline style properties for header/footer rendering.

Field	Type
`titleFontSize`	`string`
`padding`	`string`
`backgroundColor`	`string`
`borderColor`	`string`
`borderWidth`	`string`
`borderStyle`	`string`
`borderRadius`	`string`
`titleColor`	`string`
`subtitleColor`	`string`
`iconColor`	`string`
`iconSize`	`number`

`ActionTheme`

ActionTheme controls action button and menu presentation.

Field	Type
`buttonBg`	`string`
`buttonColor`	`string`
`buttonBorder`	`string`
`buttonBorderRadius`	`string`
`buttonPadding`	`string`
`buttonHoverBg`	`string`
`menuBg`	`string`
`menuBorder`	`string`

Exports​

WidgemoThemeProvider​

Props​

Behavior notes​

useWidgemoTheme​

registerTheme(name, theme) and getTheme(name?)​

registerTheme(name, theme)​

getTheme(name?)​

mergeZoneTheme​

defaultWidgemoTheme​

Types​

WidgemoTheme​

ZoneTheme​

ActionTheme​

See Also​