Theme base colors
The tabler-themes stylesheet ships five gray palettes - slate, gray, zinc, neutral, and stone - that you switch between with the data-bs-theme-base attribute.
Every gray you see in Tabler - card backgrounds, borders, muted text, table stripes - is built from a --tblr-gray-50 … --tblr-gray-950 scale. By default that scale is Tabler's own gray palette. The tabler-themes stylesheet adds four more takes on the same scale - slate, zinc, neutral, and stone - so you can pick a cooler or warmer neutral without touching a single component's CSS.
Installation
This part of Tabler is distributed as a plugin, separate from the core tabler.css bundle. To enable it, include tabler-themes.css (or tabler-themes.min.css) in your page, alongside the core stylesheet:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-themes.min.css" />If you compile Tabler from source with Sass, add its own entry point:
@use '@tabler/core/scss/tabler-themes';Base color palettes
Set data-bs-theme-base on <html> to one of five values. gray is the default - Tabler looks the same with or without the attribute set to gray.
| Value | Description |
|---|---|
gray |
Tabler's default neutral gray (no attribute needed) |
slate |
A cooler, slightly blue-tinted gray |
zinc |
A neutral, low-saturation gray |
neutral |
A pure, desaturated gray |
stone |
A warmer, slightly brown-tinted gray |
<html data-bs-theme-base="slate">Here is every shade of every palette, from lightest (50) to darkest (950):
| Base | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| slate | |||||||||||
| gray | |||||||||||
| zinc | |||||||||||
| neutral | |||||||||||
| stone |
How it connects to data-bs-theme-base
For each palette, the stylesheet redefines the eleven gray variables under an attribute selector:
[data-bs-theme-base='slate'],
[data-theme-base='slate'] {
--gray-50: #f8fafc;
/* … through --gray-950 */
}Every selector matches two attributes: data-bs-theme-base (Bootstrap's namespaced convention, the one Tabler's own theme script writes) and the shorter data-theme-base (for setups that don't use the bs- prefix). Set either one - you don't need both. The compiled CSS variables are published with Tabler's tblr- prefix, so in your own CSS you read them as --tblr-gray-50 … --tblr-gray-950.
Customizing further
tabler-themes.css only covers the five built-in palettes. To use your own gray scale instead, override the same eleven variables directly, as shown in Customize Tabler: gray scale - you don't need this plugin at all if you only ever use one custom scale.
Accessibility
Every built-in palette keeps roughly the same lightness steps as the default gray scale, so switching theme-base doesn't break the contrast that Tabler's components already rely on between text, borders, and surfaces. If you build a custom palette instead (see above), check that your 50 and 950 shades still give enough contrast against white and black text - large lightness jumps between adjacent steps can make borders disappear or muted text unreadable.
