Chromatic Themes

Configure multi-theme visual testing using Chromatic's Modes API and @storybook/addon-themes.

This skill covers:

• Detecting the user's theme library and configuring the right decorator
• Defining theme modes in .storybook/modes.ts
• Applying modes at project, component, and story levels

Quick start

1. Scan the project for existing theme config: look for @storybook/addon-themes imports, a modes.ts file, or chromatic.modes.
2. Ask the user which theme library they use (see step 3 below).
3. Fetch the relevant docs from reference/docs-map.md.
4. Generate configuration files and output the checklist from reference/output-contract.md.

Required workflow

1) Detect existing configuration