Theming

Theming allows you to change and redefine Kube's variables by creating your own style themes.

Create a file with the variables of your theme. In this file, you can redefine the Kube variables. Let's look at the example.

// kube.theme.vars.scss

// border
$border-radius: 1px;

// form
$form-item-margin: 36px;

// label
$form-label-font-size: 10px;
$form-label-text-transform: uppercase;

If the variables file is created, now you can import it to the theme SASS file like this:

// kube.theme.scss

@import "kube/src/sass/vars";

// import a file with theme variables
@import "kube/src/themes/kube.theme.vars";

@import "kube/src/sass/mixins";
@import "kube/src/sass/modules";

Finally, build the theme file and you will have the new theme of Kube.