DocsTheming
Theming
Installed components use your Tailwind theme tokens. Toggle a dark class on the document and both themes follow the same roles.
Color tokens
Components only use semantic roles, never raw colors. Change a role and every component follows, in both themes. The swatches below show the current values.
TokenUse it for
--backgroundThe page behind everything.
--cardCards, inputs, and panels on the page.
--popoverMenus, popovers, and dialogs that float.
--mutedQuiet fills: hover states, wells, code.
--foregroundPrimary text and icons.
--secondary-foregroundSupporting text and descriptions.
--muted-foregroundHints, placeholders, and metadata.
--borderDefault one pixel separators.
--inputDividers inside a surface.
--ringHovered, pressed, or focused edges.
--primarySelected navigation, progress, and strong emphasis.
--accentHover fills and helpful context.
--destructiveDestructive actions and errors.