Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Add mist theme base and remove hidden pink base (#3303)

Browse Source
This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-10-10 11:26:59 +02:00
1 parent c2a7cbf026
commit 5cbc443730
5 files changed
+29 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/content/ui/getting-started/color-modes.mdx
+1 -1
View File
@@ -15,7 +15,7 @@ Tabler includes a small script, [`tabler-theme.js`](https://github.com/tabler/ta
| Setting | Attribute | Default | Allowed values |
| --- | --- | --- | --- |
| Color mode | `data-bs-theme` | `auto` | `light`, `dark`, `auto` |
| Base gray shade | `data-bs-theme-base` | `neutral` | `slate`, `gray`, `zinc`, `neutral`, `stone` |
| Base gray shade | `data-bs-theme-base` | `neutral` | `slate`, `gray`, `zinc`, `neutral`, `stone`, `mist` |
| Font family | `data-bs-theme-font` | `sans-serif` | `sans-serif`, `serif`, `monospace`, `comic` |
| Primary color | `data-bs-theme-primary` | `blue` | `blue`, `azure`, `indigo`, `purple`, `pink`, `red`, `orange`, `yellow`, `lime`, `green`, `teal`, `cyan`, `inverted` |
| Corner radius | `data-bs-theme-radius` | `1` | `0`, `0.5`, `1`, `1.5`, `2` |
docs/content/ui/plugins/theme-base-colors.mdx
+7 -5
View File
@@ -1,14 +1,14 @@
---
title: Theme base colors
summary: 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.
description: Load the tabler-themes plugin and switch between five gray base palettes (slate, gray, zinc, neutral, stone) with data-bs-theme-base.
summary: The tabler-themes stylesheet ships six gray palettes - slate, gray, zinc, neutral, stone, and mist - that you switch between with the data-bs-theme-base attribute.
description: Load the tabler-themes plugin and switch between six gray base palettes (slate, gray, zinc, neutral, stone, mist) with data-bs-theme-base.
css-plugins: [themes]
related: [/ui/getting-started/customize, /ui/getting-started/color-modes]
---
import CdnImportPlugin from '@components/CdnImportPlugin.astro';
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 the `neutral` palette. The `tabler-themes` stylesheet adds four more takes on the same scale - `slate`, `gray`, `zinc`, and `stone` - so you can pick a cooler or warmer neutral without touching a single component's CSS.
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 the `neutral` palette. The `tabler-themes` stylesheet adds five more takes on the same scale - `slate`, `gray`, `zinc`, `stone`, and `mist` - so you can pick a cooler or warmer neutral without touching a single component's CSS.
## Installation
@@ -24,7 +24,7 @@ If you compile Tabler from source with Sass, add its own entry point:
## Base color palettes
Set `data-bs-theme-base` on `<html>` to one of five values. `neutral` is the default - Tabler looks the same with or without the attribute set to `neutral`.
Set `data-bs-theme-base` on `<html>` to one of six values. `neutral` is the default - Tabler looks the same with or without the attribute set to `neutral`.
| Value | Description |
| --- | --- |
@@ -33,6 +33,7 @@ Set `data-bs-theme-base` on `<html>` to one of five values. `neutral` is the def
| `gray` | A cool gray with a subtle blue tint |
| `zinc` | A neutral, low-saturation gray |
| `stone` | A warmer, slightly brown-tinted gray |
| `mist` | A cool gray with a subtle blue-green tint |
```html
<html data-bs-theme-base="slate">
@@ -46,6 +47,7 @@ export const bases = {
zinc: ['#fafafa', '#f4f4f5', '#e4e4e7', '#d4d4d8', '#a1a1aa', '#71717a', '#52525b', '#3f3f46', '#27272a', '#18181b', '#09090b'],
neutral: ['#fafafa', '#f5f5f5', '#e5e5e5', '#d4d4d4', '#a3a3a3', '#737373', '#525252', '#404040', '#262626', '#171717', '#0a0a0a'],
stone: ['#fafaf9', '#f5f5f4', '#e7e5e4', '#d6d3d1', '#a8a29e', '#78716c', '#57534e', '#44403c', '#292524', '#1c1917', '#0c0a09'],
mist: ['#f9fbfb', '#f1f3f3', '#e3e7e8', '#d0d6d8', '#9ca8ab', '#67787c', '#4b585b', '#394447', '#22292b', '#161b1d', '#090b0c'],
};
<div class="table-responsive">
@@ -84,7 +86,7 @@ Every selector matches two attributes: `data-bs-theme-base` (Bootstrap's namespa
## 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](/ui/getting-started/customize#gray-scale) - you don't need this plugin at all if you only ever use one custom scale.
`tabler-themes.css` only covers the six built-in palettes. To use your own gray scale instead, override the same eleven variables directly, as shown in [Customize Tabler: gray scale](/ui/getting-started/customize#gray-scale) - you don't need this plugin at all if you only ever use one custom scale.
## Accessibility