Chat on WhatsApp

How does Claude Code handle dark mode and multi-brand theming?

Token-driven, semantic-named. We write tokens with semantic names (--color-bg-surface, --color-text-default, --color-action-primary) not literal names (--gray-100). Claude Code emits CSS variables on :root for light, :root[data-theme="dark"] for dark, and additional brand themes via data-brand attributes. Every component reads from semantic tokens only — so flipping data-theme instantly re-themes the entire UI. Storybook ships with a theme switcher addon so designers approve all variants before merge.

Was this helpful?