How to use Themer

A quick overview of the Themer tool — a visual theme editor for customizing your Kaida-based project's look and feel.

Themer is a visual theme editor that lets you customize the look and feel of your Kaida-based project. You can adjust radius, typography, and colors in real time and preview changes instantly on UI components and layouts.

Quick Start

1. Open the Themer.
2. Use the settings panel on the left to adjust theme properties.
3. Preview changes in the live preview area on the right.
4. When you're happy with the result, use the Export button to get the theme params for you project!

Note: Make sure you have read the installation guide to get Kaida set up in your project.

Mode

The Mode toggle at the top of the settings panel switches between light and dark modes. Use it to preview how your theme looks in both color schemes.

Radius

The Radius setting controls the border-radius applied to UI elements such as buttons, inputs, cards, and other components.

Adjust the radius using the range slider in the settings panel. The preview updates in real time so you can see how the rounded corners look on different components.

Typography

The Typography setting lets you choose a font family for your project. The default font is Inter, but you can switch to other popular Google Fonts directly from the dropdown:

• Inter — default, clean and modern
• Roboto — geometric, widely used
• Open Sans — friendly and neutral
• Lato — semi-rounded, warm feel
• Montserrat — stylish, geometric

Tip:
After selecting a font, you can download it for self-hosting or use the Google Fonts CDN link provided on the theme page.

Colors

Themer uses a two-tier color system:

Base colors

Base colors are Kaida's curated palette — a refined set of neutral tones that goes beyond what Tailwind provides out of the box. In practice, they are rarely used directly in components; most components rely on black, white, accent, and secondary instead.

Theme colors

Theme colors are the customizable accent colors that you can tweak to match your brand. Themer exposes two key theme color variables:

• Accent — the primary color used throughout all Kaida components.
• Secondary — used for secondary variants of components (e.g., secondary buttons, alternative states).

Each theme color has built-in tools:

• Info — click the Info button to see detailed color information: all 10 shades of the color (50–900), contrast ratios (APCA) against four backgrounds (white, black, and two color-based tones), plus HEX, RGB, and HSL values.
• Contrast matrix — click Contrast matrix to preview all 10 shades (50–900) of a single color at once. Each cell renders a shade as both text and background color, so you can instantly see which combinations have poor contrast — they appear as blank white squares.

Tip:
Adjust your accent and secondary colors to ensure sufficient contrast against your background. The contrast matrix helps you stay within accessibility guidelines.

LLM

Click the LLM button at the bottom of the settings panel to open a ready-made prompt for your AI assistant. Use it to generate or update your project's theme instructions.

How to use:
Copy the entire file as AGENTS.md (or CLAUDE.md, or .cursorrules) for a new project, or insert specific sections marked with <!-- KAIDA_SECTION: ... --> into your existing instructions. For team projects, update the @theme block in the theme section when your design system changes — all team members will sync via git. Beginners can skip file setup entirely: just copy your theme from the Export popup and paste it directly into the chat with your query.

Export

When you're satisfied with your theme, click the Export button to get the generated code. Themer offers three export formats:

Format	Description
Tailwind v4	Full theme configuration with Tailwind v4. Recommended — Kaida components are built specifically for Tailwind v4 and require its CSS-first architecture to work correctly.
CSS	Exports only CSS custom properties (CSS variables). Useful if you need to integrate theme values into a non-Tailwind project.
SCSS	Exports only SCSS variables. Same as CSS, but in SCSS syntax.

Note:
The CSS and SCSS exports contain only the theme variables (colors, radius, etc.). They do not include the full Tailwind theme configuration, since Kaida components are built on Tailwind v4 and rely on its CSS-first architecture to function correctly.