Create your own harmony.

Pick a base gray, a primary color, and a corner radius.

Base Primary Radius

Base

Primary

Radius

Your theme

Paste this into your app's CSS, next to HarmonyUI's import. That's the only step needed.

Buttons

Badges & avatar

Soft Solid Green Red NL

Alert

Saved

Your changes have been saved.

Upgrade your plan

Unlock advanced analytics and unlimited projects.

How does theming work?

Primary sets --color-accent (and its dark-mode variant), picked from Tailwind's own palette. Base gray works by reassigning Tailwind's --color-zinc-* variables, since every HarmonyUI component is hardcoded to zinc under the hood, so no component class ever changes. Radius drives the whole rounded-* scale from a single --radius variable.

Can I customize further?

Yes. Every token is a plain CSS custom property compiled by your own Tailwind build. Override any of them by hand for a fully custom look. This is unsupported: we won't triage GitHub issues about visual bugs caused by hand-edited tokens.