# Theming (https://dimah-s3.vercel.app/docs/react/ui/customization/theming)



`@dimah-s3/ui` components use CSS variable-based tokens (`--color-dimah-s3-*`) that map directly to standard shadcn theme tokens by default.

## Token mapping [#token-mapping]

| Token                                 | Default Value               |
| ------------------------------------- | --------------------------- |
| `--color-dimah-s3-background`         | `var(--background)`         |
| `--color-dimah-s3-foreground`         | `var(--foreground)`         |
| `--color-dimah-s3-card`               | `var(--card)`               |
| `--color-dimah-s3-primary`            | `var(--primary)`            |
| `--color-dimah-s3-primary-foreground` | `var(--primary-foreground)` |
| `--color-dimah-s3-muted`              | `var(--muted)`              |
| `--color-dimah-s3-muted-foreground`   | `var(--muted-foreground)`   |
| `--color-dimah-s3-destructive`        | `var(--destructive)`        |
| `--color-dimah-s3-border`             | `var(--border)`             |
| `--color-dimah-s3-ring`               | `var(--ring)`               |

***

## Customizing colors [#customizing-colors]

To customize styling for dimah-s3 components independently from your global theme, override the tokens in your CSS:

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

@theme {
  --color-dimah-s3-primary: oklch(0.65 0.15 150);
  --color-dimah-s3-destructive: oklch(0.55 0.2 25);
}
```

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

<Accordions>
  <Accordion title="How do I style a specific upload area differently?">
    Scope the CSS variables to a container class:

    ```css
    .avatar-panel {
      --color-dimah-s3-primary: oklch(0.6 0.14 250);
    }
    ```
  </Accordion>
</Accordions>