Introduction

Kajoo’s Theming functionality allows users to create collections of styling rules for different elements, with multiple variants per element. Setting up multiple themes with different default styling rules allows users to rapidly switch between different styles when testing in the canvas.

Themes

Open

How to add a Style Guide Variant for an element

Kajoo offers you the ability to create multiple styling variants for the different elements it offers. For this example, we’re going to create a new variant for a Button element.

1. In the themes section, click the “New Theme” button and then go to your newly created style.

2. In the your theme, you can modify elements to your liking.

3. Inside those elements you can change the colour, background colour, border style, font style, width, height, margins and flex properties. Customize these so your element looks the way you want it to.

4. Open

   

   After adjusting styling settings, changes are automatically saved and the styling variant is available for use in the Kajoo builder 

How to use a Style Guide Variant in the Kajoo Builder

Once you’ve created the style guide variants you need, you can assign them to elements in the builder. The process is very simple.

1. In the Kajoo Builder, select the element for which you would like to change styles

2. In the right-hand properties pane, navigate to the “Variant” section, and select the desired style guide variant from the dropdown list.

Deleting Themes

Styling Themes can be deleted from the Themes screen. However, if a Theme is currently being used by a project, the user must first select a replacement theme for that project. After the deletion of the old Theme and replacement by the new Theme, all elements in the project will automatically utilize the default variants in the replacement Theme.

Related articles