Theming

Design tokens are OKLCH CSS variables. Two palettes, dark and light, and RTL are switched with attributes on the root element. Use the controls in the header to try them on this page.

Attributes

html
<html data-theme="light" data-palette="tamam" dir="rtl">

Override tokens

css
/* override any token on :root or a wrapper */
:root {
  --zg-brand: oklch(0.72 0.12 70);
  --zg-r-card: 24px;
}

Tokens for other platforms

js
// tokens/tokens.json — for Flutter and native clients
import tokens from '@ziyarago/ui/tokens.json'

Palettes

gold

default

tamam

data-palette="tamam"