Configuring the Light Theme Palette

1. Light Theme Options Overview #

In your docs, the light palette includes options like:

• light_sage, light_sage2, light_sage3
• light_beige, light_canvas
• light_text, light_muted, light_border
• light_chip_bg, light_chip_border
• light_brand_color
• light_input_bg, light_input_text
• light_user_text, light_bot_text
• light_human_text (Pro)
• light_human_bubble_bg (Pro)
• light_placeholder_text
• light_icon_color

These values control the overall look of the chatbot when the light theme is active.

image IMAGE PLACEHOLDER: Screenshot of Chatbot theming section showing light_… fields with color pickers. IMAGE image

2. Step-by-Step: Editing Light Background & Surface Colors #

The light_sage, light_sage2, light_sage3, light_beige, & light_canvas options are surface/background colors used in the UI.

Step-by-step:

1. Go to Davix AI Engine → Chatbot.
2. Locate the Light Theme Colors section (names follow the key names from docs).
3. For each:
   • light_sage – base greenish tone background.
   • light_sage2, light_sage3 – related accent background colors.
   • light_beige – light neutral background.
   • light_canvas – canvas/main content area background.
4. Use color pickers to adjust them if necessary.
5. Save changes and reload a page where the chat is visible.
6. Open chat and verify that the header, message area, and background surfaces match your design.

3. Step-by-Step: Configuring Light Text & Border Colors #

Options: light_text, light_muted, light_border

• light_text – main text color in light theme.
• light_muted – used for secondary text, hints, or less prominent labels.
• light_border – border color for panels, inputs, or chips.

Step-by-step:

1. In the same Light section, find Text and Border fields.
2. Set light_text to a readable dark color (docs suggest you should keep contrast accessible).
3. Set light_muted to a softer variant for secondary text.
4. Set light_border to a subtle but visible boundary color.
5. Save and test the chat UI to confirm text readability and border visibility.

4. Step-by-Step: Configuring Chips (Suggested Prompts / Tags) #

Options: light_chip_bg, light_chip_border

These are used for small chip-like UI elements (such as suggested prompts or tags inside the chat).

Step-by-step:

1. Locate Chip Background (light_chip_bg) and Chip Border (light_chip_border).
2. Choose colors that distinguish chips from the main background but still fit the palette.
3. Save changes.
4. If your chat shows chips (for example, suggestion bubbles), confirm they have the expected colors.

5. Brand / Accent Color #

Option: light_brand_color

• This is your main accent color in the light theme (for highlights such as buttons, header accent, or other emphasis).

Step-by-step:

1. Find Brand Color (Light) (light_brand_color).
2. Set it to your core brand color.
3. Save and check how it appears on CTAs or highlighted elements in the chat.

image IMAGE PLACEHOLDER: Screenshot of chat UI in light theme showing adjusted brand color on primary buttons or highlights. IMAGE image

6. Input & Placeholder Colors #

Options: light_input_bg, light_input_text, light_placeholder_text

• light_input_bg – background of the message input field.
• light_input_text – text inside the input.
• light_placeholder_text – placeholder text color.

Step-by-step:

1. Find the Input Background and Input Text fields.
2. Choose a background and text color combination with good readability.
3. Set Placeholder Text color slightly muted compared to light_input_text.
4. Save and open the chat.
5. Verify typing and placeholder states are clearly visible.

7. Bot, User, and Human Message Colors (Light Theme) #

Options:

• light_user_text
• light_bot_text
• light_human_text (Pro)
• light_human_bubble_bg (Pro)

Step-by-step:

1. Set light_user_text – color for user messages.
2. Set light_bot_text – color for bot messages.
3. If Pro:
   • Set light_human_text – color for human agent messages (via Telegram).
   • Set light_human_bubble_bg – background of human agent message bubbles.
4. Save and simulate a conversation (AI only, and AI+Human in Pro) to visually confirm the roles are clearly differentiated.

8. Icon Colors #

Option: light_icon_color

• Used for icons (header icons, maybe send button icons) in light theme.

Step-by-step:

1. Locate Icon Color (Light).
2. Choose a color that is visible against your header/background.
3. Save and inspect header icons and composer icons in the chat.