Create themes - Fluid Topics - Latest

In the Palettes tab of the Theme studio menu, designers can create colors and themes. Colors have a value per theme.

1. Open the Theme studio menu.

2. Add a theme, and name it.

   Theme names appear as the options in the Theme selector component. Enter clear and readable theme names (capitalize the first word, avoid codes or numbers).

3. Add a color, and name it.

   A color name should represent what it styles. Use chatbot-background rather than pink or red, for example. Colors have a value per theme. When switching themes, chatbot-background can change from black for a dark theme, to white for a light theme, for example.

4. Choose a CSS variable.

   • The color's CSS variable automatically follows its name, but users can make the CSS variable different from the name.
   • CSS variables from the Theme studio start with --ft-custom.

   It is not possible to rename a color's CSS variable after creating it.

5. Choose a color by using the color picker, or by entering a HEX color code.

   It is only possible to use the HEX format.

6. Save the color.

7. Repeat this procedure to create as many themes as necessary.

   Created themes are first in draft.

8. Select a theme's floating menu, and select Publish theme.

Published themes do not automatically apply to the portal. Designers must first apply the themes.