Themes

Themes are used to define color schemes used for decoration, communication, highlighting important information, and ensuring accessible and readable text. Colors could perhaps be your brand color which might be your primary and secondary colors and perhaps dark and light color variants.

Themes can be applied at four different levels:

  1. Website
  2. Pages
  3. Rows
  4. Paragraphs (columns)

In the settings for each of these you will find a theme selector, allowing you to select one of the themes created on a solution.

They are infinitely nestable, which means that everything inside the targeted area will be themed – so if the page is themed to have a white background and dark text, everything inside that page – such as rows, and columns – will have a white background and dark text unless a different theme is explicitly set on the nested content.

Themes are created from the Swift Tools area – Swift Tools > Design > Themes (Figure 1.1).

Figure 1.1 A list of themes

To create a theme:

  1. Click New paragraph and select Theme (should be the only option)
  2. Name the theme and click OK
  3. Set up the theme – pick colors, etc.

When you set up a theme you will see a number of input fields for defining the properties of the theme (Figure 2.1). 

This is where you create, well, the theme – pick out colors for various elements. The theme properties are organized in sections, with each section controlling a specific part of the theme as described here:

  • Theme settings
    Apart from the name this section allows you to set a CSS class name for the theme. The name should be unique, and ideally something close to the theme name – remember that you cannot use special characters and spaces.
  • Base settings
    Base colors are your background color, your foreground color (which is the color of the typography), and border color. Leave a field empty (e.g., border color) if you do not want it to be themed.
  • Button settings
    For buttons, you can select a background color and a foreground color, which is the color of the button label. The hover color is normally automatically calculated as a dark or light variant of the selected button color, but if you want it to be something else you can fold out the override section and set your preferred colors manually.
  • Accessibility
    The Accessibility section makes it possible to set a color for outlining links and buttons when activated by keyboard navigation. Remember to select a visible clear color.