Skip to main content

Day 9. Project Theme

Why do I need the project theme?#

When creating projects we often use a limited set of styles of text, colors, backgrounds, and other things. This may be due to the design system, brand, or simply personal preferences. We added a theme for that โ€” a set of variables that can be used to design the page elements. These variables can be edited and they will change wherever they were applied in the project.

Default theme#

When you create a new project, you create a default theme with specific text styles, colors, backgrounds, shadows, transitions, transforms, filters, and breakpoints.
You can use them for your project, edit, delete, and move them.

Adding a variable to a theme#

To add a new value, click the + icon next to the category you want to add. After that, enter your value name and the desired value, for example, if it's a color, enter the color code.

Add new theme

Specify the button background with a variable from the theme#

Let's change the button background with the theme by creating a variable in the Background Style category with the name "button" and giving it the red color code (#ff0000).
We've created a variable and it was saved automatically. Now select the button and set the background property to the value from the theme:

Button theme

Changing the variable value#

To change the value, click on it and the variable settings will open. As an example, let's change the font size in headline1 and set it to 42px.

Button theme

then set this value for the card title:

Font card

Removing a value#

To delete an unnecessary variable, right-click on it and choose Delete.

Duplicating a value#

To duplicate a variable, right-click on it and choose Duplicate.

Theme in blocks and templates#

All ready-made blocks and templates are based on variables from the theme. This way you can change theme values to quickly edit default blocks or templates.