---
title: Customization
order: 3
description: "Customize Tabler Illustrations with CSS variables: the colors, the dark variant and auto dark mode."
summary: Change the colors of Tabler Illustrations with CSS variables, use the dark variant or the version that follows the color mode on its own.
---
import Example from '@components/Example.astro';
## Color of the illustration
You can change the color of the illustration by setting the `--tblr-illustrations-primary` CSS variable to the desired color. This will change the color of the primary elements in the illustration.
```html
```
You can customize it globally by setting the variable on the `body` element or locally by setting it on a parent element.
```css
body {
--tblr-illustrations-primary: #CC0000;
}
```
## Color of the skin
To change the color of the skin, use the `--tblr-illustrations-skin` CSS variable.
```html
```
## Application brand color
When `--tblr-illustrations-primary` is not set, the illustrations fall back to `--tblr-primary`, so they follow your primary color with no extra work.
## Dark version of the illustration
Each illustration has a dark variant. Copy the SVG code of the dark version from the package into your project.
## Autodark mode
The `svg-css-autodark` folder holds a version that switches its colors on its own. It follows the system color scheme, the `data-bs-theme` attribute or the `theme` class, so one file covers both modes.
```html
```