Theme editor

Themes allow you to customize the look-and-feel of your application in powerful ways.

In this guide, we will go through the main concepts and explain how you can use them to both customize your app and ensure the view components you build work seamlessly with the theme engine.

Theme variables

Theme variables are global variables that carry a semantic meaning, such as background color or H2 header font size, and an attached style property, such as rgb(255,255,255) or 28.

Theme variables are prefixed with a $ character, and their names should work from broad category towards a narrower meaning. For example, the names for the above two base theme variables are $colorBackground and $fontSizeH2.

Theme variables and semantic roles

Theme variables are used to enable the user to configure the whole look-and-feel of the application without having to edit all the different components by hand.

A component should have its various style properties bound to theme variables that match the component's semantic role on the page.

Of course, a component can have multiple semantic roles. For example, a H2 header text component that has a highlight color to grab attention would have the following theme variable bindings:

  • Font family bound to $fontFamilyHeader

  • Font size, line height, font weight, letter spacing and text transform bound to $fontSizeH2, $fontWeightH2 and so on.

  • Font color bound to $colorFontHighlight

  • Top and bottom margin bound to $spacerBase

When all the components on your page have their relevant style properties bound to the appropriate theme variables, you can very easily tweak the whole look-and-feel of your application with just a few edits to the right theme variables.

Theme variable inheritance

Like many other things in Composer, theme variables can be bound to each other.

When a theme variable is bound to another theme variable, it is said to inherit from the parent theme variable. For example, in the default theme, $colorFontPrimary inherits from $colorContentPrimary.

This structure allows you to edit the look-and-feel of your app in drastic ways by tweaking just a few theme variables, while still keeping the fine-tuning opportunities available directly from the theme editor.

Parent and child theme variables

While any theme variable can be bound to any other theme variable, when the relationship is clearly linear, such as a darker variant of a color, a theme variable can be given an explicit parent.

This causes the child theme variable's type to be bound to the parent variables type (i.e. if the parent is a color, the children are all colors too). Child theme variables are also grouped under the parent variable in the theme editor.

Formulas in theme variables

A theme variable can also be bound to a formula. For example, in the defaul theme, $colorInformativeTint is bound to a formula DARKEN(theme.$colorInformative, 0.05). This way, edits to the base color automatically result in the darker variant being available.

There are no limitations to using formulas with theme variables. With system variables, you can make your styles change not only based on screen size, but also things like OS (e.g. Android vs. iOS), platform (native vs. web) and so on.

Using theme variables in your components

When you are building your own composite components and page layouts, take time to think what the semantic role of each component is, and bind their styles to the right theme variable.

This way, your components will automatically work with different themes that other users might have in their apps.

Using the right theme variables in your components also gives you the ability to tweak your app's look-and-feel in broad ways by changing just a few variables.

Theme editor

Theme variables are configured using the theme editor, which you can open from the global toolbar.

Edit theme with preview

The Edit theme with preview button will make the theme editor dock on top of the logic canvas, allowing you to edit the theme while seeing a live preview on the view canvas. You can close the docked theme editor from its top-right corner.

Core theme variables

At the top of the theme editor, you have core theme variables. They give you easy access to the primary color variables and the font family, allowing you to very quickly change how your app looks.

Base theme variables

Under the core theme variables you have the base theme variables in your app, grouped under semantic categories like Card or Typography.

Components rely on these variables for their styles, and while you're encouraged to tweak the variable values to try out different styles for your app, you shouldn't delete or rename the actual variables.

Creating your own theme variables

You can create new theme variables via the button at the bottom of the theme editor.

A new theme variable should always be given the correct type based on its intended usage.

Theme variables reference

This section goes through the default theme variables that are available in Composer and how they should be used.

The list is currently incomplete, but exploring the different base theme variables and seeing how they affect components from the core library and marketplace should give you an idea of how to utilize them.

Colors

There are three main categories of color in Composer: content, semantic and font colors.

Content colors

Theme variable key

Default theme value

Description

$colorContentPrimary

rgb(0,0,0)

The primary content color for your application, usually black or some dark gray. Used for dividers, borders, regular icons and so forth.

$colorContentSubdued

rgb(138,1541,167)

A secondary, subdued content color, typically a lighter gray, perhaps tinted towards some color. Used for e.g. input labels and certain subheaders.

$colorContentHighlight

rgb(0,62,255)

A highlight content color, typically a brighter one. Used in e.g. attention-grabbing icons and headers. If you are creating a theme for a brand, this is probably a good place to use one of your brand's primary colors.

$colorBackground

rgb(255,255,255)

The primary background color for your app, typically white or some very light gray.

$colorBackgroundSecondary

rgb(240,241,244)

A secondary background color, used for elements that need to stand out from the main background but still work as a background for the content colors

$colorShadow

rgba(36,26,28,0.25)

Default color for shadows. In most cases, a transparent gray color works best.

Semantic colors

Semantic colors convey a meaning to the user. They are used in informative texts and call-to-action elements such as buttons. For example, a success message could use the confirm color, while a destructive button would use the negative color.

Theme variable key

Default theme value

Description

$colorInformative

rgb(9,59,154)

Used to convey neutral information to the user. In the default theme, a shade of blue.

$colorNegative

rgb(227,72,80)

Used to convey negative information or destructive operations, such as error messages or a button to delete something. In the default theme, a shade of red.

$colorNotice

rgb(230,134,25)

Used to convey information the user should take seriously, such as warning (but not error) messages. In the default theme, a shade of orange.

$colorPositive

rgb(45,157,120)

Used to convey positive information and operations, such as a success message or a confirm button. In the default theme, a shade of green.

Semantic colors have three additional subcolors that follow the same naming schema, shown here for $colorInformative.

Theme variable key

Default theme value

Description

$colorInformativeTint

rgb(10,68,178)

Typically a lighter variant of the base color. In the default theme, calculated from the base color with the LIGHTEN formula function.

$colorInformativeShade

rgb(8,50,130)

Typically a darker variant of the base color. In the default theme, calculated from the base color with the DARKEN formula function.

$colorInformativeContrast

rgb(255,255,255)

A color that is legible when used in combination with the base color. The contrast color can be used e.g. for button text color when the button background color is the base color. In the default theme, this is white for all the semantic colors.

Typography

Typography deals with how text in your app is displayed. For each variant, we provide the following properties, shown below for the H2 variant.

Theme variable key

Default theme value

Description

$fontSizeH2

28

H2 font size

$fontWeightH2

600

H2 font weight

$letterSpacingH2

normal

H2 letter spacing

$lineHeightH2

36

H2 line height

$textTransformH2

none

H2 text transform

‚Äč