# 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

```html
<!-- 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](/reference/colors/) 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.