Customize template with theme.

Customizing Your Template with Themes

What Are Themes?

Themes allow you to add visual and stylistic variations to your templates without altering the underlying structure. By setting up themes, users can customize elements like colors, styles, and layout configurations, creating a unique look for each document while maintaining the core template.

Quick Start: Setting Up Your Development Environment

To begin developing with themes, start a secure local server:

npm run uhuu

Need help setting up local development?.

Once connected to the Uhuu editor, any changes you make in the theme settings will update the template in real time.

How Themes Work

Themes consist of UI options tied to specific payload properties that influence the template’s appearance. When a user selects a theme option, it updates the related payload attribute and refreshes the document to reflect the new styling. Here’s an example of a simple data structure:

{
    "company": "Matterhorn Solutions",
    "first_name": "Noah",
    // ...
    "color": "pink"
}

In this case, the color property would be updated based on the user's selection, changing the template’s styling dynamically.

Theme Editor in Uhuu

Define and manage theme properties in the Uhuu editor, giving users a smooth way to adjust template aesthetics.

Theme in Action

Watch as selected theme options instantly update the document style within the editor.

When to Use Themes

Themes are ideal for templates that require a consistent structure but benefit from visual flexibility. By centralizing customization options, themes make it easy for users to apply stylistic changes without modifying core document data. This approach keeps templates streamlined and improves the user experience by offering intuitive, design-focused controls.