Themes & Customization

Documentation Index

Fetch the complete documentation index at: https://docs.symplr.io/llms.txt

Use this file to discover all available pages before exploring further.

Themes & Customization allows application-wide visual styles and reusable design settings to be configured from the Theme section. These settings help maintain consistent layouts, spacing, typography, colors, borders, and shadow styles across the application.

​

Before You Begin

Before configuring themes and customization settings, ensure:

• Project is available in Blueprint View
• Application structure is configured
• You have access to Theme settings

​

Open Theme Settings

From the application workspace, open the Theme section from the left navigation panel. The Theme panel provides access to Tokens, Typography, and Shadow settings.

​

Configure Theme Tokens

The Tokens section contains reusable visual properties used across the application. Available token categories include:

• Border
• Color
• Component
• Radius
• Space

Each token category contains reusable values used throughout the application.

​

Edit Token Configurations

Existing token values can be updated directly within the Tokens view. Token configurations help maintain consistent styling across application screens and components.

​

Add New Tokens

To create additional token configurations, use the Add option available within the Theme panel. New tokens can be added for different value types, including colors, numeric values, text values, and boolean settings.

​

Configure Typography Settings

The Typography section displays reusable text styles and formatting settings used across the application. Typography settings include:

• Font size
• Letter spacing
• Font color
• Font family
• Text styles and variants

These settings help maintain consistent text presentation throughout the application.

​

Configure Shadow Settings

The Shadow section displays reusable shadow settings for application components and layouts.

​

Add New Shadow Configurations

Use the configuration panel to define custom shadow styles and related visual properties. Shadow configurations can include properties such as:

• Shadow color
• Blur
• Spread
• Horizontal offset
• Vertical offset

​

Next Steps

After configuring themes and customization settings, continue by editing screens, configuring workflows, validating layouts, or previewing the application using Build & Run workflows.