# Theming Guide

Limio supports theming so each customer can have their own visual identity while using the same component library.

[**View interactive theming guide in Storybook**](https://innovate42.github.io/innovate42-service-template/?path=/docs/theming-guide--docs)

## How it works

Every component's appearance is driven by CSS custom properties (design tokens). You inject a stylesheet that overrides the tokens you want to change — everything else inherits from the default theme.

You can inject custom CSS via your Limio settings (Developer → General Settings). See [how to inject custom code](https://docs.limio.com/product/analytics/how-to-configure-the-limio-data-layer-to-collect-user-events-for-analytics) for the general approach.

## Customising your theme

Inject a CSS stylesheet that overrides the [design tokens](https://docs.limio.com/components/ui-primitives-and-theming/design-tokens) you want to change:

```css
@layer base {
  :root {
    --tw-primary: 220, 85%, 45%;
    --tw-primary-foreground: 0, 0%, 100%;
    --tw-text-primary: 220, 60%, 15%;
    --tw-text-secondary: 220, 30%, 35%;
    --tw-surface-main: 220, 15%, 96%;
    --tw-radius: 0.75rem;
  }
}
```

Only override what differs from the default. All other tokens inherit automatically.

All colour values use HSL format **without** the `hsl()` wrapper (e.g. `220, 85%, 45%` not `hsl(220, 85%, 45%)`).

## Testing your changes

Use your browser's developer tools to override token values and preview changes instantly in Storybook.

## Further reading

* [Design Tokens](https://docs.limio.com/components/ui-primitives-and-theming/design-tokens) — all available tokens and their defaults
* [Primitives](https://docs.limio.com/components/ui-primitives-and-theming/primitives) — the component catalogue
* [Compositions](https://docs.limio.com/components/ui-primitives-and-theming/compositions) — real-world patterns showing themed components in action