Live theme workspace

One theme system
everyone will love.

Define it once, and color, type, shape, depth, and motion move together across the interface — consistent in React, Vue, and the plain web.

Open the theme editor Read the docs

Official presets

One tap to re-theme.

44 preset themes in a continuous flow. Pick any of them and color, type, shape, and texture move together across the whole site — including the page you are looking at.

Capabilities

One theme drives the whole interface.

OriaTheme treats a theme as validated, resolved, atomically applied data — not scattered CSS variables.

A complete design language

Color, typography, shape, depth, material, and motion expressed as semantic tokens that move with the theme.

Explore tokens

React, Vue, and plain DOM

One runtime state machine drives three adapters, so behavior stays identical in every framework.

See integrations

A visual theme editor

Fork any preset, edit light and dark tokens, and preview, validate, and export in real time.

Open the editor

Quick start

Up and running in minutes.

Install the runtime and presets, wrap your app in a provider, and get light, dark, and system modes with the full preset catalog.

pnpm add @oriatheme/presets @oriatheme/runtime-dom @oriatheme/react

Read the quick start Try the editor online