# Theming (https://v2.s3.dimah.dev/docs/react/ui/customization/theming)

`@dimah-s3/ui` components read their colors from `--dimah-s3-*` CSS
variables. The tokens are unset by default, and each one falls back to the
matching shadcn variable where it is used, so the components follow your
theme, including a nested `.dark` or theme class. Override a token to change
the components without changing your app.

## Tokens [#tokens]

| Token                           | When unset                      |
| ------------------------------- | ------------------------------- |
| `--dimah-s3-background`         | `var(--background)`             |
| `--dimah-s3-foreground`         | `var(--foreground)`             |
| `--dimah-s3-card`               | `var(--card)`                   |
| `--dimah-s3-card-foreground`    | `var(--card-foreground)`        |
| `--dimah-s3-primary`            | `var(--primary)`                |
| `--dimah-s3-primary-foreground` | `var(--primary-foreground)`     |
| `--dimah-s3-muted`              | `var(--muted)`                  |
| `--dimah-s3-muted-foreground`   | `var(--muted-foreground)`       |
| `--dimah-s3-accent`             | `var(--accent)`                 |
| `--dimah-s3-border`             | `var(--border)`                 |
| `--dimah-s3-ring`               | `var(--ring)`                   |
| `--dimah-s3-destructive`        | `var(--destructive)`            |
| `--dimah-s3-success`            | `var(--success)`, else a green  |
| `--dimah-s3-warning`            | `var(--warning)`, else an amber |

shadcn has no `--success` or `--warning`. When your theme defines them, the
components use them; otherwise they fall back to
`--dimah-s3-success-default` and `--dimah-s3-warning-default`, a green and
an amber with lighter shades under `.dark`.

Each utility resolves the whole chain on the element that uses it:
`var(--dimah-s3-primary, var(--primary))`, and for success
`var(--dimah-s3-success, var(--success, var(--dimah-s3-success-default)))`.
`@dimah-s3/ui/styles.css` sets only the two `*-default` colors, on `:root`
and `.dark`, and the shadcn registry writes the same two into your CSS when
you add an item.

---

## Customizing colors [#customizing-colors]

Override tokens after the stylesheet import, on `:root`:

```css title="app/globals.css"
@import "@dimah-s3/ui/styles.css";

:root {
  --dimah-s3-primary: oklch(0.65 0.15 150); /* [!code ++] */
  --dimah-s3-destructive: oklch(0.55 0.2 25); /* [!code ++] */
}
```

Or on any container, to style one area differently:

```css
.avatar-panel {
  --dimah-s3-primary: oklch(0.6 0.14 250); /* [!code ++] */
  --dimah-s3-card: var(--muted); /* [!code ++] */
}
```

The components read the tokens through Tailwind utilities such as
`bg-dimah-s3-card` and `text-dimah-s3-primary`. Those utilities read the
variable where they are used, so an override on a container reaches every
component inside it. You can use the same utilities in your own parts.

Stock shadcn primitives the components render, such as `Button` and
`Attachment`, keep your app's `--primary` and `--card`.

## Frequently asked questions [#frequently-asked-questions]

<Accordions>

<Accordion title="I set --color-dimah-s3-primary and nothing changed.">

Override `--dimah-s3-primary` instead. The `--color-dimah-s3-*` variables are
the Tailwind mappings, and they read the `--dimah-s3-*` tokens.

</Accordion>

<Accordion title="How do I set different colors in dark mode?">

Override the tokens under your dark selector:

```css
.dark {
  --dimah-s3-primary: oklch(0.75 0.14 150);
}
```

</Accordion>

</Accordions>