> ## 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

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.

<Frame>
  <img src="https://mintcdn.com/symplr-0fada8ba/M1yNQ3oZrfXGEEXW/images/1-Open-Theme-Section.jpg?fit=max&auto=format&n=M1yNQ3oZrfXGEEXW&q=85&s=d8f0da38bd1bebaa2c726b699230a1b2" alt="1 Open Theme Section" width="1534" height="728" data-path="images/1-Open-Theme-Section.jpg" />
</Frame>

The Theme panel provides access to Tokens, Typography, and Shadow settings.

<Frame>
  <img src="https://mintcdn.com/symplr-0fada8ba/M1yNQ3oZrfXGEEXW/images/2-Theme-Panel-Overview.jpg?fit=max&auto=format&n=M1yNQ3oZrfXGEEXW&q=85&s=a7d95d7077d7cb92e5e83c7f0f04531b" alt="2 Theme Panel Overview" width="1534" height="728" data-path="images/2-Theme-Panel-Overview.jpg" />
</Frame>

## Configure Theme Tokens

The **Tokens** section contains reusable visual properties used across the application.

Available token categories include:

* Border
* Color
* Component
* Radius
* Space

<Frame>
  <img src="https://mintcdn.com/symplr-0fada8ba/M1yNQ3oZrfXGEEXW/images/3-Tokens-Dropdown.jpg?fit=max&auto=format&n=M1yNQ3oZrfXGEEXW&q=85&s=4803399ad30efbc163c8235393738beb" alt="3 Tokens Dropdown" width="1534" height="728" data-path="images/3-Tokens-Dropdown.jpg" />
</Frame>

Each token category contains reusable values used throughout the application.

## Edit Token Configurations

Existing token values can be updated directly within the Tokens view.

<Frame>
  <img src="https://mintcdn.com/symplr-0fada8ba/M1yNQ3oZrfXGEEXW/images/4-Token-Configuration.jpg?fit=max&auto=format&n=M1yNQ3oZrfXGEEXW&q=85&s=5029f1dc1ee349c504a9c8b19de9cf91" alt="4 Token Configuration" width="1534" height="729" data-path="images/4-Token-Configuration.jpg" />
</Frame>

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.

<Frame>
  <img src="https://mintcdn.com/symplr-0fada8ba/M1yNQ3oZrfXGEEXW/images/5--Adding-New-Token.jpg?fit=max&auto=format&n=M1yNQ3oZrfXGEEXW&q=85&s=9f4cc69b2662a7285a70178a4478da7c" alt="5 Adding New Token" width="1534" height="725" data-path="images/5--Adding-New-Token.jpg" />
</Frame>

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.

<Frame>
  <img src="https://mintcdn.com/symplr-0fada8ba/M1yNQ3oZrfXGEEXW/images/6-Typography-Settings.jpg?fit=max&auto=format&n=M1yNQ3oZrfXGEEXW&q=85&s=1b8d301ef1ebc299b97b2b0dfafcaed4" alt="6 Typography Settings" width="1534" height="728" data-path="images/6-Typography-Settings.jpg" />
</Frame>

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.

<Frame>
  <img src="https://mintcdn.com/symplr-0fada8ba/M1yNQ3oZrfXGEEXW/images/7-Shadow-Settings.jpg?fit=max&auto=format&n=M1yNQ3oZrfXGEEXW&q=85&s=80c36d38bf46f39a0db43fcedfb3fef7" alt="7 Shadow Settings" width="1534" height="724" data-path="images/7-Shadow-Settings.jpg" />
</Frame>

## Add New Shadow Configurations

Use the configuration panel to define custom shadow styles and related visual properties.

<Frame>
  <img src="https://mintcdn.com/symplr-0fada8ba/M1yNQ3oZrfXGEEXW/images/8-Adding--New-Shadow.jpg?fit=max&auto=format&n=M1yNQ3oZrfXGEEXW&q=85&s=abc11a1287275e576062a0c23d4c377e" alt="8 Adding New Shadow" width="1534" height="725" data-path="images/8-Adding--New-Shadow.jpg" />
</Frame>

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.