Changing Less variables
Now, while your terminal is open and yarn watch command is running let's go to xampp/htdocs/zero-one/assets/app/custom/ folder. That folder contains all Zero One theme files.
To understand how it works:
All files in xampp/htdocs/zero-one/assets/app/custom/ folder override and extend core Uikit files in xampp/htdocs/zero-one/assets/app/src/less/ folder and are compiled as CSS files in to xampp/htdocs/zero-one/assets/app/dist/css/ folder.
You can learn more in-depth if you like at https://getuikit.com/docs/less.

Variables (variables.less) file

Locate the xampp/htdocs/zero-one/assets/app/custom/elements/variables.less and open it with your favorite code editor, or text editor.
Every variable you see there is a global variable, and change many things.

Change fonts

Font variables are very straightforward, just change them as you wish.
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/tricks/custom-fonts-import.

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.

Buttons

Well, the buttons are a bit different. But also easy. You will see this:
1
//
2
// Buttons
3
//
4
5
@global-button-style: creative; // default, creative
6
@global-button-border-style: default; // default, round
Copied!
Both of those variables have only two options, and those are obvious. Test it and see.
Try this, it is a smooth rounded button
1
//
2
// Buttons
3
//
4
5
@global-button-style: default; // default, creative
6
@global-button-border-style: round; // default, round
Copied!