mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
129 lines
3.4 KiB
Plaintext
129 lines
3.4 KiB
Plaintext
---
|
|
title: Customize Tabler
|
|
summary: Change fonts, colors, sizes and other design tokens with CSS variables or Sass to make Tabler match your brand.
|
|
description: Customize Tabler fonts, colors, and styles with CSS variables and Sass to make the framework match your brand.
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
## Custom Google font
|
|
|
|
To use a custom Google Fonts font in Tabler you must import the font in the `<head>` section of the page. In this example we will use the _Inter_ font:
|
|
|
|
```html
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
```
|
|
|
|
Now you just need to tell Tabler to use your favorite font:
|
|
|
|
```html
|
|
<style>
|
|
:root {
|
|
--tblr-font-sans-serif: "Inter";
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## Custom font sizes
|
|
|
|
Tabler exposes typography settings as CSS variables. You can override them by setting variables on `:root` (global) or on any container (scoped).
|
|
|
|
### Base font size
|
|
|
|
To change the default font size used by body text and many components, override `--tblr-body-font-size`:
|
|
|
|
```html
|
|
<style>
|
|
:root {
|
|
--tblr-body-font-size: 1rem;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### Headings
|
|
|
|
Headings use `--tblr-font-size-h1` … `--tblr-font-size-h6` and `--tblr-line-height-h1` … `--tblr-line-height-h6`:
|
|
|
|
```html
|
|
<style>
|
|
:root {
|
|
--tblr-font-size-h1: 2rem;
|
|
--tblr-line-height-h1: 2.5rem;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## Custom primary color
|
|
|
|
To change the primary color of Tabler you need to set the `--tblr-primary` variable in your CSS. You can use any color format you like (hex, rgb, hsl, etc). In this example we will use a custom red color:
|
|
|
|
```html
|
|
<style>
|
|
:root {
|
|
--tblr-primary: #f11d46;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
Every tint, shade and transparent variant of the primary color is derived from `--tblr-primary` at runtime with `color-mix()`, so this one variable is enough. Optionally override `--tblr-primary-fg` (text/icon color used on primary backgrounds):
|
|
|
|
```html
|
|
<style>
|
|
:root {
|
|
--tblr-primary: #f11d46;
|
|
--tblr-primary-fg: #fff;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
If you need a transparent version of a Tabler color in your own CSS, use `color-mix()` instead of `rgba(var(--tblr-primary-rgb), …)`:
|
|
|
|
```css
|
|
.my-highlight {
|
|
background-color: color-mix(in oklab, var(--tblr-primary) 20%, transparent);
|
|
}
|
|
```
|
|
|
|
The `--tblr-*-rgb` variables (for example `--tblr-primary-rgb: 6, 111, 209`) are deprecated. They are still emitted, but they are static: they don't follow an override of `--tblr-primary`, and they go away in 2.0. Replace `rgba(var(--tblr-primary-rgb), 0.5)` in your own CSS with `color-mix(in oklab, var(--tblr-primary) 50%, transparent)`.
|
|
|
|
## Other system colors
|
|
|
|
Tabler also exposes a few "system" colors you can customize globally:
|
|
|
|
```html
|
|
<style>
|
|
:root {
|
|
--tblr-secondary: #6b7280;
|
|
--tblr-tertiary: #9ca3af;
|
|
--tblr-link-color: #066fd1;
|
|
--tblr-link-hover-color: #045db0;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### Gray scale
|
|
|
|
You can override the full gray palette (`--tblr-gray-50` … `--tblr-gray-950`) to match your brand:
|
|
|
|
```html
|
|
<style>
|
|
:root {
|
|
--tblr-gray-50: #f9fafb;
|
|
--tblr-gray-100: #f3f4f6;
|
|
--tblr-gray-200: #e5e7eb;
|
|
--tblr-gray-300: #d1d5db;
|
|
--tblr-gray-400: #9ca3af;
|
|
--tblr-gray-500: #6b7280;
|
|
--tblr-gray-600: #4b5563;
|
|
--tblr-gray-700: #374151;
|
|
--tblr-gray-800: #1f2937;
|
|
--tblr-gray-900: #111827;
|
|
--tblr-gray-950: #030712;
|
|
}
|
|
</style>
|
|
```
|