Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

Add documentation App (#2219)

Browse Source
This commit is contained in:
Paweł Kuna
2025-04-15 23:18:49 +02:00
committed by GitHub
parent 199f39a52e
commit 8d4f8d07c3
1550 changed files with 5414 additions and 5340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/content/ui/getting-started/customize.md Normal file
View File

@@ -0,0 +1,40 @@
---
title: Customize Tabler
summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
description: Adjust fonts, colors, and styles.
---
## 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 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>
```