Theme editor
Last updated
Last updated
The theme editor allows you to create customized themes across your applications that correspond to your company's corporate brandbook. Theme editor is available for the workspace admins and editors.
Theme editor is available on a Business and Enterprise plans.
To create a new theme, follow the below steps:
open an application, click the Theme icon in the left menu and click Create new theme.
Give the theme a meaningful name, so you can distinguish between your themes later on.
Once created, a new theme will be assigned to your current application by default. If you would like to assign a default UI Bakery theme to the app, select the Default theme from the themes list.
Here's how you customize a newly create theme:
click the Edit icon to open the editor;
The editor consists of the following sections:
Main colors - to customize the colors of the app. The primary color represents the main color of your brand and serves as the dominant color in your application. Support colors play a secondary role in the app's design.
Canvas - the main color of the app's background.
Containers - to establish the look of the containers used in the app, such as background color, radius, border and shadow.
Components - to establish the look of the inputs, selects and buttons across the application.
Text - to establish text colors.
Web font - to establish a web font.
Once you're done styling, the theme is automatically saved. If you need to make any corrections, you can always edit the theme.
Let's check an example of changing the font of the theme with Google Fonts.
Find the font you would like to use in your theme and open the settings of the selected font style.
Copy the link to the font (for example, https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200&display=swap" rel="stylesheet)
Specify the name of the font and set its fallback.
In case your font is under a custom license, specify it in the license field.
A default theme is a theme that is used across your UI Bakery workspace by default meaning that all new applications will have this theme assigned. To make a custom theme default, find a required theme in the list, click on the three-dots button and choose Make default from the menu:
Later on, the default theme of a certain app can be changed.
Please note that when you are changing a theme, it is applied across all the environments. So if you are still working on the theme, we recommend doing that on a test application rather than a production app.
