Themes

Theme editor

The theme editor, accessible from the top menu, allows you to select and customize themes for your app.

Font manager

In the font manager you can manage and upload your own custom fonts to be used in your app.

Colors

The theme system is built on background colors and content palettes. The content palettes each implement the semantic colors for most common usecases.
For example in the image below we have selected the 'App background' background color. Under it we can see the content palette for this background color. We can also see that the semantic colors vary depending on the background color. For example for the 'Primary background' on the very right, the 'Neutral' color is white instead of grey.
theme editor with the 'App background' background color selected
So instead of dealing with individual colors for individual components and elements, the theme system allows you to work with content palettes, backgrounds and semantic colors to specify your theme in a controlled way.
The advantages of this theme system become clear when we switch background colors on the UI canvas.
  • To begin with we have the icon component with color set to 'Primary'. Which on the default background shows as blue.
  • In the second image we've changed the background color to 'Primary background'.
  • This has the foreground components automatically following the content palette for 'Primary background' in which 'Primary' color is white.
icon component with color set to 'Primary' on default background
icon component with background color set to 'Primary background'

​

Custom palettes

You are also able to create both custom background colors and custom palettes. Both can be created in the theme tab by duplicating an existing background color or palette.
custom background color
custom palette
custom palette in a color dropdown

Theme variables

Theme variables contain the default settings for a theme. You can customize the existing variables or you can also add new ones.
Last modified 13d ago