> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wizflow.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Editor

> Customize the visual appearance of your Wizflow conversations with complete control over colors, styling, and branding

## Overview

The Theme Editor allows you to fully customize the visual appearance of your Wizflow conversations, providing complete control over colors, styling, and branding to match your organization's design requirements.

## Getting Started

<Steps>
  <Step title="Access Preview Mode">
    Click the **Preview** button in your flow editor
  </Step>

  <Step title="Open Theme Editor">
    Look for the **Theme Editor** panel on the right side of the preview window
  </Step>

  <Step title="Start Customizing">
    The editor will open with all available customization options
  </Step>
</Steps>

## Page Styling

### Display Modes

<CardGroup cols={2}>
  <Card title="Window" icon="window-maximize">
    Display the conversation in a modal window overlay
  </Card>

  <Card title="Full Page" icon="maximize">
    Show the conversation as a full-page experience
  </Card>
</CardGroup>

### Color Customization

<AccordionGroup>
  <Accordion title="Primary Colors">
    * **Colour for buttons and progress**: Customize the primary color used for interactive elements and progress indicators
    * **Page background color**: Set the overall background color of the conversation interface
  </Accordion>

  <Accordion title="Input Styling">
    * **Input field border color**: Define the border color for text input fields and form elements
  </Accordion>
</AccordionGroup>

## Side Panel Configuration

### Position Controls

<Tabs>
  <Tab title="Left Position">
    Position the panel on the left side of the interface
  </Tab>

  <Tab title="Right Position">
    Position the panel on the right side of the interface
  </Tab>
</Tabs>

### Features

<Info>
  **Progress Bar**: Toggle the progress bar visibility to show or hide user progress through the conversation flow.
</Info>

**Sections-panel background colour**: Customize the background color of the side panel sections

## Question Styling

Customize how questions appear to users:

| Element                  | Description                                     |
| ------------------------ | ----------------------------------------------- |
| **Heading colour**       | Set the color for question headings and titles  |
| **Question text colour** | Define the color for question body text         |
| **Question background**  | Customize the background color behind questions |

## User Message Styling

Control the appearance of user responses:

| Element                      | Description                                          |
| ---------------------------- | ---------------------------------------------------- |
| **User message text colour** | Set the text color for user messages                 |
| **User message background**  | Define the background color for user message bubbles |

## Images and Branding

### Logo and Visual Elements

<CardGroup cols={2}>
  <Card title="Upload Logo" icon="image">
    Add your company logo (max width 420px)

    <br />

    Appears prominently in the conversation interface
  </Card>

  <Card title="Upload Panel Picture" icon="images">
    Add a decorative or informational image (max width 420px)

    <br />

    Enhances the visual appeal of the side panel
  </Card>
</CardGroup>

## Saving Your Theme

<CardGroup cols={2}>
  <Card title="Save Update" icon="floppy-disk">
    Apply changes to the current theme configuration

    <br />

    Updates the existing theme with your modifications
  </Card>

  <Card title="Save as New Theme" icon="floppy-disk" color="#green">
    Create a new theme based on current settings

    <br />

    Build a library of branded themes for different use cases
  </Card>
</CardGroup>

## Best Practices

<Tip>
  **Color Accessibility**: Ensure sufficient contrast between text and background colors for users with visual impairments.
</Tip>

<Warning>
  **Brand Consistency**: Use your organization's official brand colors and maintain consistency with your website and other digital properties.
</Warning>

### Design Guidelines

* Choose colors that enhance readability
* Avoid overly bright or distracting color combinations
* Test the theme across different devices and screen sizes
* Upload high-quality logo images for professional appearance

## Technical Notes

<Note>
  * Logo and panel images are automatically optimized for web display
  * Maximum image width is 420px to ensure proper scaling
  * Color values are stored as hex codes (e.g., #9D58FF)
  * Themes are applied in real-time during preview mode
</Note>