---
title: Build a product theme
editUrl: https://github.com/Cratis/Components/edit/main/Documentation/Styling/themed.md
description: Map a product design system onto Cratis tokens and stable parts.
---


A Components theme is CSS. It does not require a JavaScript preset or provider configuration.

## Map product tokens

```css
:root {
    --cratis-primary-color: var(--brand-accent-700);
    --cratis-primary-color-text: var(--brand-text-inverse);
    --cratis-action-background: var(--brand-action);
    --cratis-action-background-hover: var(--brand-action-hover);
    --cratis-action-background-active: var(--brand-action-active);
    --cratis-action-text: var(--brand-on-action);
    --cratis-surface-ground: var(--brand-canvas);
    --cratis-surface-card: var(--brand-surface);
    --cratis-surface-overlay: var(--brand-surface);
    --cratis-surface-hover: var(--brand-subtle);
    --cratis-surface-border: var(--brand-border);
    --cratis-control-background: var(--brand-control);
    --cratis-control-border: var(--brand-control-border);
    --cratis-text-color: var(--brand-text-primary);
    --cratis-text-color-secondary: var(--brand-text-secondary);
    --cratis-border-radius: 0.5rem;
    --cratis-focus-ring: var(--brand-focus-ring);
    --cratis-shadow-overlay: var(--brand-overlay-shadow);
    --cratis-shadow-dialog: var(--brand-dialog-shadow);
}
```

Switch schemes by redefining the product values under the product's own selector:

```css
[data-theme='dark'] {
    --brand-canvas: #171717;
    --brand-surface: #262626;
    --brand-text-primary: #fafafa;
}
```

Put that attribute on the document element. The browser resolves `var(--brand-…)` where the `--cratis-*` mapping is declared (`:root`), and descendants inherit the resolved value, so redefining a brand variable on a nested element does not change the Cratis token. To theme a subtree differently, repeat the `--cratis-*` mapping on the subtree's selector as well.

## Add component-specific treatment

Tokens provide shared semantics. Use stable parts for a distinctive product component:

```css
.product-dialog[data-cratis-part='root'] {
    backdrop-filter: blur(18px);
    border-radius: 1rem;
}
```

The `product-dialog` class reaches the dialog root through `pt={{ root: { className: 'product-dialog' } }}` on the `Dialog`.

This is the supported path for deeply customized products. No renderer preset, internal selector, or commercial theme package sits between product tokens and the rendered component.