Form Features - Theme Customization

Overview

The Theme Customization feature allows you to customize the colors used across your form. You can configure both the main color and the dark mode appearance to match your branding.

These colors are applied to key UI elements such as buttons, links, and sections.

This article explains:

• How to configure the primary color
• How to configure dark mode
• Demo of a Theme Customization with a Car Inspection Form

Getting Started

How to configure the primary color

Follow these steps to configure the primary color on your form.

1. In the Form Editor, open the Advanced tab.
2. Click Edit Theme.
3. Select a color with the color picker.

Once selected, the color will be applied immediately to the form preview.

Use the color picker to choose the primary color for your form.

How to configure dark mode

Follow these steps to configure dark mode on your form.

1. In the Form Editor, open the Advanced tab.
2. Click Edit Theme.
3. Toggle the Theme Mode to Dark.
4. Select the colors you want to use in dark mode.

Once configured, the dark mode colors will be used when the form is displayed in dark mode.

Use the theme mode toggle to choose the dark theme for your form.

Demo: Car Inspection Form Example

This example demonstrates the Theme Customization feature within a Car Inspection form.

Example of theme customization applied to a Car Inspection form.

End result of theme customization applied in dark mode.

Best Practices

• Choose a color that provides good contrast with text and backgrounds
• Use dark mode colors that remain easy to read
• Ensure accessibility by avoiding overly light colors
• Use your brand’s primary color for consistency across your applications

Notes

• Only valid HEX color values are supported (e.g. #FF5733)
• The system automatically converts the color into the required format for styling
• Check both light mode and dark mode after updating the theme
• Changes are applied dynamically without requiring a page reload