Dark mode

Every role token has a light value and a dark value. A component styled with bg-card text-card-foreground already looks right in both themes, with no extra classes.

Don’t add dark: to role tokens

<!-- Right -->
<div class="bg-surface-raised text-foreground">

<!-- Wrong: the role already changes in dark mode -->
<div class="bg-surface-raised dark:bg-neutral-900">

Only use dark: for values that aren’t tokens. Even then, adding a token is usually the better fix.

How the theme switches

Dark values apply when <html> has the dark class or data-theme="dark". You can also put either one on a single element, and everything inside it switches to dark. This is useful for a dark preview on a light page.

Check both themes

The Colors page shows the light and dark value of every role. Switch this site’s theme with the button at the bottom of the sidebar to see them change.

Raw colours stay the same

Raw colours like blue-500 have the same value in both themes. If a colour should change with the theme, use a role.