Create and Apply Custom Themes in Titan Web

Overview

Custom Themes let you create a consistent branded appearance across your Titan Web projects. You can configure your preferred fonts, colors, and input styles once, then apply the theme to different projects without manually styling each element.

Custom Themes are available only with an Enterprise license.

Titan Solution

Titan Web lets you create and manage reusable themes without writing code. You can define:

• Fonts for inputs, titles, headings, and paragraphs.
• Primary and supporting colors for project elements.
• Input variants that control how fields and labels appear.

Once you create a custom theme, it becomes available across your projects. This helps you maintain consistent branding, improve accessibility, and reduce the time spent styling each project individually.

How to Guide

1. Click the Project drop-down and select the Theme option. The Theme screen opens on the right side of the project canvas.
2. Click the Custom Theme + icon. The Custom Theme screen opens.

3. Type a name for your theme and click the Let’s Start button.

4. Choose the fonts for the following:
   • Main Font: This will affect the fonts of all input fields in the project.
   • Title Font: This will affect the fonts of all the title text elements in the project.
   • Heading Font: This will affect the fonts of all the heading text elements in the project.
   • Paragraph Font: This will affect the fonts of the paragraph text elements in the project.
5. For Main Font, use the drop-down list to select the font family for the label and the input font.
6. Select the font color.
7. For Title, Heading, and Paragraph Fonts, use the drop-down list to select the font family for the label and the input fonts.
8. Use the drop-down list to select the font size.
9. Select the font color.
10. Click the Next button.

11. Choose the colors as follows:
    • Primary Colors: This will affect the main color in most elements, for instance, buttons and input elements.
    • Supporting Colors: This will affect the supporting color in more complex elements, for instance, accordion and table elements.
12. For Primary Colors, select the primary color and the font color of the element.
13. For Supporting Colors, select the supporting color and the font color of the element.
14. Click the Next button.

15. Use the drop-down list to select the variant. This will affect the look of your input fields in the project.
    • Select the Standard option for a basic or common look of elements.
    • Select the Filled option for a color-filled look of elements.
    • Select the Outline option for an element with a border.
    • Select the Fixed option to fix the label position of the element in comparison to the input. The label will not overlap the input of the element.
    • Select the Classic option for a classic quality look of elements.

15. Click the Finish button.

Your custom theme is added to the list and will be available for all your projects.

Use the Kebab icon to edit or delete the custom theme:

Learn more about Titan’s native integration with the Salesforce Experience Cloud.

Easily design, deploy, and measure custom web applications directly from Salesforce using Titan’s drag-and-drop web page builder.