Customization
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.
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.
<div style="--tblr-illustrations-primary: #CC0000">
<svg>...</svg>
</div>
You can customize it globally by setting the variable on the body element or locally by setting it on a parent element.
body {
--tblr-illustrations-primary: #CC0000;
}
Color of the skin
To change the color of the skin, use the --tblr-illustrations-skin CSS variable.
<div style="--tblr-illustrations-skin: #5A433C">
<svg>...</svg>
</div>
Look at the example below to see how you can change the color of the skin.
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.
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.
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 data-bs-theme="dark">
<body>
<svg>...</svg>
</body>
</html>
Look at the example below to see how the illustration changes based on the user’s system preferences.
