> For the complete documentation index, see [llms.txt](https://www.one.thezero.club/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.one.thezero.club/guide/theme-styling/changing-less-variables.md).

# 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
```