Customize Tabler
Tabler provides a flexible CSS variable system that lets you easily adjust the theme without modifying source code.
Custom Font
Replace the default font. Example using Google Fonts Inter:
html
<!-- Import the font in <head> of index.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"
/>
<!-- Set the CSS variable in your project's CSS -->
<style>
:root {
--tblr-font-sans-serif: "Inter";
}
</style>Custom Primary Color
Override the --tblr-primary CSS variable to change the global primary color:
css
:root {
--tblr-primary: #F11D46;
}All components based on primary (buttons, badges, progress bars, etc.) will automatically use the new color.
Other CSS Variables
Tabler defines many CSS variables that you can override for deep customization:
| CSS Variable | Purpose | Example Value |
|---|---|---|
--tblr-primary | Primary color | #206bc4 |
--tblr-secondary | Secondary color | #6c757d |
--tblr-success | Success color | #2fb344 |
--tblr-info | Info color | #4299e1 |
--tblr-warning | Warning color | #f76707 |
--tblr-danger | Danger color | #d63939 |
--tblr-light | Light color | #f8f9fa |
--tblr-dark | Dark color | #1d273b |
--tblr-font-sans-serif | Body font | 'Inter', system-ui |
--tblr-font-monospace | Monospace font | 'Menlo', monospace |
--tblr-border-radius | Border radius | 4px |
--tblr-page-padding | Page padding | 1.5rem |
Usage with the Component Library
When using @gulcc/tabler-vue, simply define the CSS variables in your entry file to apply globally:
vue
<!-- App.vue -->
<style>
:root {
--tblr-primary: #F11D46;
--tblr-font-sans-serif: "Inter";
}
</style>All components (TButton, TBadge, TAlert, etc.) using the primary color will automatically adopt the new value.