# Theme styling

The Zero One theme has an in-built Theme styler. And it is not just a simple styler, it is actually a stylesheet compiler, which means, it compiles all LESS/CSS into one minified CSS file. Which adds greatly to website speed. 

### Turn the styling ON/OFF

It is important to understand this option. 

When you save your style options and refresh any front-end website page in that moment styles compiling happened. And it will take up to 5-10 seconds. If something is wrong with your input, an error will arise, so then just check have you added in input something strange.

{% hint style="warning" %}
**But remember one thing, when you finish styling and you are happy with how it looks, and styles are compiled, turn it off.** Why turn it off? Because it will compile every time you refresh any page, and slow your website.
{% endhint %}

<div align="left"><figure><img src="https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4ZpEbnFxt2CBoFZg0N%2Fuploads%2Fg0u2Ij1rYvx5zJfbqkpw%2Fscreenshot-zero-one.test-2025.05.29-12_52_34.jpg?alt=media&#x26;token=99023a47-d85b-4569-bc34-38f7ee4b5862" alt=""><figcaption></figcaption></figure></div>

### Styles

You can change the feel of the whole website just by changing these options. Add shadows or rounded borders to website elements.

<figure><img src="https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4ZpEbnFxt2CBoFZg0N%2Fuploads%2Fd0T7EB6cCHEyZzqAuUIt%2Fscreenshot-zero-one.test-2025.05.29-12_54_23.jpg?alt=media&#x26;token=53fdb403-a5ff-46bf-b718-c84d24b50f60" alt=""><figcaption></figcaption></figure>

### Main site colors

It can't get easier than this. :sunglasses: Choose your colors and completely change the look.

* **Text Color** is used for the main content text
* **Emphasis Color** is used for headlines and emphasis elements
* **Text Muted Color** is used for muted text and text meta elements
* **Muted Background** color is used for a muted background and some muted elements. For text on a muted background, the main Text Color is used.
* **Primary Background** color is used for a primary background and some primary elements. For text on a primary background, the main Inverse Color is used.
* **Secondary Background** color is used for a secondary background and some secondary elements. For text on a secondary background, the main Inverse Color is used.
* **Inverse Color** is used for content on the primary/secondary background, for content on dark backgrounds, and you can call it in many custom elements.

Only HEX colors are allowed at the moment.

<figure><img src="https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4ZpEbnFxt2CBoFZg0N%2Fuploads%2FPhFQv3LwW3TcykZLoMuS%2FScreen%20Shot%202025-05-29%20at%2012.55.40.png?alt=media&#x26;token=9d16b0fc-bca0-45dc-8db5-ce7f1f8ea4d0" alt=""><figcaption></figcaption></figure>

### Navbar & Offcanvas

Change the navbar and offcanvas height, style, and colors.

<figure><img src="https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4ZpEbnFxt2CBoFZg0N%2Fuploads%2F5ZzFpSPtNJJU0TREsqAA%2Fscreenshot-zero-one.test-2025.05.29-12_57_09.jpg?alt=media&#x26;token=0c4176d3-c158-408d-8d00-87ecd5ed5c5f" alt=""><figcaption></figcaption></figure>

### Buttons

Fine-grain offcanvas appearance.

Button style and button border have two options each, and by combining those options, you can create 9 different sets of buttons. **From version 4.5.0, it's possible to customize the colors of every button type.**

<figure><img src="https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4ZpEbnFxt2CBoFZg0N%2Fuploads%2F3KPYB3j0VGB4EyItQhFw%2FScreen%20Shot%202025-05-29%20at%2012.58.47.png?alt=media&#x26;token=14e52548-fecd-4c17-a285-a9a3e0349616" alt=""><figcaption></figcaption></figure>

### Typography

We don't want to narrow your options. Use any font provider you like. Use Google, Adobe, FontSpace, or any other fonts. You can use that URL option for even your self-hosted fonts.&#x20;

Just make sure when adding **Font Family names,** you follow the rules, just as we noted.

Check out the small video preview on how to add new Google Fonts <https://www.one.thezero.club/guide/tricks/adding-google-fonts>

<figure><img src="https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4ZpEbnFxt2CBoFZg0N%2Fuploads%2FbEzGBdeYBk2LtpDxbSmG%2FScreen%20Shot%202025-05-29%20at%2012.59.43.png?alt=media&#x26;token=25bc292c-45e5-4ca8-b8eb-ef1f532d426c" alt=""><figcaption></figcaption></figure>

### Breakpoints

You can customize the breakpoints to suit your requirements.

<figure><img src="https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4ZpEbnFxt2CBoFZg0N%2Fuploads%2FlRdivCQXfXhGJteKJZBQ%2FScreen%20Shot%202025-05-29%20at%2013.01.06.png?alt=media&#x26;token=2d12a28a-4688-4308-9edc-bfda5700e342" alt=""><figcaption></figcaption></figure>

### Custom code

On the bottom, there are also input fields for adding custom CSS code, or other custom code, such as Analytics, Tag manager code, custom JS code, and even URLs, or whatever.&#x20;

<figure><img src="https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4ZpEbnFxt2CBoFZg0N%2Fuploads%2FtF4O6T7g8IR4LC6A4yZa%2FScreen%20Shot%202025-05-29%20at%2013.01.57.png?alt=media&#x26;token=b54b4f0a-045b-470e-a34b-dbb675d12166" alt=""><figcaption></figcaption></figure>

### Advanced

If you intend to extend Zero One further from the built-in functions, you should also check out the advanced Less/CSS setup. Even if you are not going to do it, it is worth checking to understand how everything works. Especially because you can customize Zero One further.