Overview

globalTheme({ light, dark, … }) injects CSS custom properties for each theme: base on :root, explicit [data-theme] rules, and an OS dark media query when a second theme is present.

It returns { cssVars } — map token keys to "--name" strings. Switch themes with useUtils().themeAtom (see theme / title).

rootCSS({ … }) writes a flat map of tokens or plain CSS properties onto :root via the same global sheet as globalCSS.

Theme vs root tokens

API
What it sets
Notes
globalTheme Per-theme vars light/dark + data-theme + auto media
rootCSS :root only One-shot token / property overrides
themeAtom Runtime switch From useUtils() — not returned by globalTheme

globalTheme + themeAtom

cssVars drive inline styles; themeAtom toggles light / dark / auto.

import { html, renderApp, globalTheme, useUtils } from 'mates';

const { cssVars } = globalTheme({
light: { surface: '#f8fafc', text: '#0f172a', accent: '#0f766e' },
dark: { surface: '#0f172a', text: '#e2e8f0', accent: '#5eead4' },
});

const App = () => {
const { themeAtom } = useUtils();
return () => html`
<div class="m-col m-gap" style="
background: var(${cssVars.surface});
color: var(${cssVars.text});
padding: 16px;
border-radius: 8px;
">
<p style="color: var(${cssVars.accent}); margin: 0 0 8px">
theme = ${themeAtom()}
</p>
<div class="m-flex m-items-center m-justify-center m-gap-sm">
<button @click=${() => themeAtom.set('light')}>Light</button>
<button @click=${() => themeAtom.set('dark')}>Dark</button>
<button class="btn-primary" @click=${() => themeAtom.set('auto')}>Auto</button>
</div>
</div>
`;
};
renderApp(App, document.getElementById('app'));

rootCSS tokens

Inject custom properties on :root for local use.

import { html, renderApp, rootCSS } from 'mates';

rootCSS({
'--demo-radius': '12px',
'--demo-pad': '14px',
});

const App = () => () => html`
<div style="
border-radius: var(--demo-radius);
padding: var(--demo-pad);
background: var(--m-surface);
color: var(--m-fg);
border: 1px solid var(--m-border);
">rootCSS tokens on :root</div>
`;
renderApp(App, document.getElementById('app'));