---
title: Customization
description: Customize the illustrations to match your brand.
summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, and formats. This section provides insights into seamlessly integrating illustrations to align with your design and branding.
---
```html example columns={1} centered vertical height="25rem"
```
## 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;
}
```
```html example columns={1} centered vertical height="25rem"
```
## Color of the skin
To change the color of the skin, use the `--tblr-illustrations-skin` CSS variable.
```html
```
Look at the example below to see how you can change the color of the skin.
```html example columns={1} centered vertical height="25rem"
```
## Application Brand Color
Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illustrations-primary` is not set, so if you have a primary color set in your design system, you can use that to ensure consistency across your project.
```html example columns={1} centered vertical separated height="30rem"
```
## Dark version of the illustration
Each illustration has a dark mode variant. To use it, copy the dark mode SVG code and paste it into your project. The dark mode variant is available for all illustrations.
```html example columns={1} centered vertical separated height="25rem" background="dark"
```
## Autodark mode
Tabler Illustrations supports autodark mode, which automatically switches the color scheme of the illustrations based on the user's system preferences. To enable autodark mode, copy illustration code from the `svg-css-autodark` folder.
Illustration change theme based on the user's system preferences or `data-bs-theme` attribute or `theme` class.
```html
```
Look at the example below to see how the illustration changes based on the user's system preferences.
```html example columns={1} centered vertical separated height="25rem"