Theming

Flows should look like they belong in your app, not like a widget bolted on top. The theme editor lets you match Tracya's components to your own design, colour by colour, for each type of step.

You reach it from the Projects tab: open a project and click Customize theme. A preview on the side shows your changes as you make them, so you can see a tooltip take on your colours before you save.

A theme per component

The four step types are styled independently, each under its own tab in the editor: Tooltip, Modal, Highlight, Banner. This is deliberate. A tooltip and a full-width banner rarely want the same treatment, so you set each one to suit its role.

Because the components differ, they do not all expose the same options. A highlight shows no text, so it has nothing to colour but its accent and corners. A banner has no card behind it, so it has no background or radius to set. You will only see the fields that make sense for the component you are editing:

Option	Tooltip	Modal	Highlight	Banner
Primary color	yes	yes	yes	yes
Primary text color	yes	yes	-	yes
Background color	yes	yes	-	-
Text color	yes	yes	-	-
Border radius	yes	yes	yes	-
Font family	yes	yes	-	yes

The options

Primary color is the component's accent: the tooltip's Next button, the ring around a highlighted element, the banner's action. It is the one colour every component shares, and usually the first you set to your brand.

Primary text color is the colour of text and icons that sit on top of the primary colour, like the label on a button. Set it to whatever stays readable against your primary, typically a light tone on a dark accent or the reverse.

Background color is the surface of the tooltip or modal card, behind your title and content.

Text color is your title and body text, the words the user reads.

Border radius controls how rounded the corners are. A larger value gives softer, friendlier cards; zero gives sharp corners.

Font family lets the component inherit your app's typography. Left as inherit, it picks up whatever font the surrounding page uses, which is usually what you want. Set a specific family if you need the component to differ from its host page.

Custom CSS

For anything the fields do not cover, the Custom CSS box lets you write your own rules. Whatever you put there is injected after the generated theme, so it can override any widget style. Use it for finer adjustments: a shadow, a specific spacing, an animation. If you know the class you want to target, you can reach it here.

Treat this as the escape hatch, not the main road. Most themes never need it, and the per-component fields are easier to keep consistent.

Saving

Click Save theme to apply your changes. The theme is stored on the project and takes effect for every flow it runs, on your users' next load. There is no separate publish step for themes: saving is applying.

A project with no custom theme uses Tracya's defaults, which are neutral enough to sit quietly on most interfaces until you make them yours.