Components / Customize / Theme studio
Loading example…
Change the look of this showcase. Colors, borders and corners update live and stay with you as you browse in this browser.
Brand colors update both appearances. Your individual background and text colors stay in place. Presets start a fresh palette; Undo restores the previous look.
Shadows apply to menus and dialogs. Cards stay flat. Focus outlines stay visible at every border strength.
Configure IconsProvider in your app to use these icons. Theme exports do not include icon settings.
Type, tab through, or open the menu to inspect borders and focus.
Status colours retain their meaning when your brand colours change.
Text and selected control colours are measured in both modes. This is not a full accessibility audit.
JSON and TypeScript include both palettes. CSS follows Appearance; System includes both modes. Apply the CSS to a wrapper with data-ai-theme="brand", or pass the imported theme to AITheme. Icons are configured separately.