Themes

A theme is a full set of CSS variables: colors, radii, fonts and shadows. There are 6, and you can make your own in the editor.

#View a theme

Click any theme in the list to open the theme viewer: colors, type, radii, common controls and a sample dashboard, all rendered with that set of variables. The new-tab icon in the top right opens the theme’s full page.

#Copy CSS

Copy CSS on the theme page copies a block of :root variables, including background, foreground, primary, secondary, muted, destructive, border, ring, chart colors, radius and fonts. Drop it into your global stylesheet.

#Editing and saving

Click Open in editor, or Create theme in the sidebar, to open the editor: adjust colors, fonts, shadows and radii on the left with a live preview on the right, with undo and redo. Saved themes live in your account under My themes and follow you across devices.