# Changing Less variables

Now, while your terminal is open and `pnpm watch` the command is running let's go to `assets/app/custom/` folder. That folder contains all Zero One theme style files. 

**To understand how it works:**

All files in `assets/app/custom/` folder override and extend core Uikit files in `assets/app/src/less/` folder and are compiled as CSS files into `assets/app/dist/css/` folder. 

You can learn more in-depth if you like at <https://getuikit.com/docs/less>.&#x20;

### Global variables (variables.less) file

Locate the `assets/app/custom/elements/variables.less` and open it with your favorite code editor or text editor.&#x20;

Every variable you see there is a global variable, and change many things.&#x20;

### Change fonts

Font variables are very straightforward, just change them as you wish.&#x20;

If you want to add custom self-hosted fonts and want a clean setup you can do it like this <https://www.one.thezero.club/guide/theme-extending/self-hosted-fonts>

### Colors, backgrounds, margins, etc.

Everything is very straightforward and it will be easy for you to completely change the theme looks.

Remember, every time you save `variables.css` file new CSS theme file will be generated. It takes 5 - 10 seconds. And you can check changes by refreshing the localhost website in the browser.&#x20;

### Buttons

Well, the buttons are a bit different. But also easy. You will see this:

```css
//
// Buttons
//

@global-button-style:                           creative; // default, creative
@global-button-border-style:                    default; // default, round
```

Both of those variables have only two options, and those are obvious. Test it and see.&#x20;

Try this, it is a smooth rounded button

```css
//
// Buttons
//

@global-button-style:                           default; // default, creative
@global-button-border-style:                    round; // default, round
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.one.thezero.club/guide/theme-styling/changing-less-variables.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.