Foundations

Theming

Ten presets, or a hue and two multipliers of your own.

Every colour in omaris is OKLCH, expressed in terms of three knobs: an accent hue, a chroma multiplier and a tint. Both themes are derived from them, so changing one value re-skins the whole app — components, charts and syntax highlighting together.

Presets

Ten of them: indigo, ocean, teal, forest, amber, sunset, rose, violet, coffee, graphite. Out of the box you get ocean with sm corners — set your product's own in OmarisProvider.

import { theme } from 'omaris';theme.preset = 'ocean';

Or your own

Setting a hue switches to the custom preset automatically.

theme.hue = 210; // degreestheme.chroma = 0.7; // 0 is monochrome, 1 as designed, up to 1.6theme.tint = 1.4; // how far the greys lean toward the accent

Everything the store holds

Setting	Values
`mode`	`light` · `dark` · `system`
`preset`	a preset name, or `custom`
`hue`	degrees, when `preset` is `custom`
`chroma`	`0`–`1.6`
`tint`	`0` is pure grey
`contrast`	`normal` · `high`
`radius`	`none` · `sm` · `md` · `lg` · `xl` · `full`
`density`	`compact` · `comfortable` · `spacious`
`scale`	`0.8`–`1.25`, whole-UI zoom
`fontSize`	`sm` · `md` · `lg` · `xl`, independent of `scale`
`font`	`system` · `sans` · `rounded` · `serif` · `mono`, or any stack
`motion`	`full` · `reduced` · `none`
`translucent`	`false` (default) · `true` — frosted popovers, menus, dropdowns, toasts

Every one is a property, so bind: works:

<Slider bind:value={theme.scale} min={0.8} max={1.25} step={0.05} />

Or set several at once, and go back:

theme.set({ preset: 'forest', radius: 'md', density: 'compact' });theme.reset();

Translucency

Off by default. Turn it on and every floating surface — popover, menu, select and combobox dropdowns, toasts — becomes frosted glass: a see-through fill with the page blurred behind it. High contrast switches it back off.

theme.translucent = true;

Your own floating surface opts in with the translucent: variant and the frosted utility, which apply only while the setting is on:

<div class="border bg-popover shadow-3 translucent:frosted">…</div>

Light and dark

mode is what the user asked for; resolvedMode is what is actually on screen once system has been worked out.

theme.toggleMode();theme.isDark; // boolean

The provider resolves this before first paint, so there is no flash of the wrong theme.

A ready-made settings screen

ThemeSettings is the whole appearance panel, already bound to the store. Drop it in a dialog and you have a themable app.

<Dialog bind:open title="Appearance">	<ThemeSettings /></Dialog>

Adding a preset

<OmarisProvider	presets={{		brand: { label: 'Brand', primary: 268, tertiary: 320, neutral: 280, chroma: 1.1, tint: 1 }	}}	theme={{ preset: 'brand' }}>	{@render children()}</OmarisProvider>