Configuring the Dark Theme Palette

1. Dark Theme Options Overview #

Docs list:

• dark_sage, dark_sage2, dark_sage3
• dark_beige, dark_canvas
• dark_text, dark_muted, dark_border
• dark_chip_bg, dark_chip_border
• dark_brand_color
• dark_input_bg, dark_input_text
• dark_user_text, dark_bot_text
• dark_human_text (Pro)
• dark_human_bubble_bg (Pro)
• dark_placeholder_text
• dark_icon_color

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

2. Editing Dark Background & Surface Colors #

Options: dark_sage, dark_sage2, dark_sage3, dark_beige, dark_canvas

Step-by-step:

1. Go to Davix AI Engine → Chatbot → Theming/Colors.
2. Locate Dark Theme section.
3. Adjust:
   • dark_sage + dark_sage2 + dark_sage3 as deeper base surfaces.
   • dark_beige as a contrasting but still dark-ish neutral.
   • dark_canvas as the main canvas color.
4. Save and test the dark theme in your chat UI.

3. Configuring Dark Text & Border Colors #

Options: dark_text, dark_muted, dark_border

Step-by-step:

1. Set dark_text to a bright color that contrasts well against dark_canvas.
2. Set dark_muted to a slightly dimmer version for secondary text.
3. Set dark_border to a visible line color for separating panels or chips.
4. Save and verify readability.

4. Configuring Chips in Dark Theme #

Options: dark_chip_bg, dark_chip_border

Step-by-step:

1. Find Chip Background (Dark) and Chip Border (Dark).
2. Choose colors that stand out over the dark canvas but fit the dark palette.
3. Save and check any chips that appear in the chat.

5. Dark Brand Color #

Option: dark_brand_color

• Used for accent elements (buttons, highlights) in dark theme.

Step-by-step:

1. Set dark_brand_color to a bright, brand-aligned color.
2. Save.
3. Switch theme mode (if you use the theme button) and confirm that CTAs look correct.

image IMAGE PLACEHOLDER: Screenshot of chat in dark mode with brand color applied to primary buttons. IMAGE image

6. Input & Placeholder Colors (Dark) #

Options: dark_input_bg, dark_input_text, dark_placeholder_text

Step-by-step:

1. Set dark_input_bg to a slightly lighter or darker block than the canvas to distinguish the input.
2. Set dark_input_text to a clear text color that is readable on the input background.
3. Set dark_placeholder_text to a muted variant for placeholder readability.
4. Save and test typing vs placeholder states in dark mode.

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

Options: dark_user_text, dark_bot_text, dark_human_text (Pro), dark_human_bubble_bg (Pro)

Step-by-step:

1. Configure dark_user_text and dark_bot_text so users can quickly distinguish their messages from AI messages.
2. If you have Pro and Telegram human handoff enabled:
   • Set dark_human_text and dark_human_bubble_bg so human agent messages visually differ from both user and AI.
3. Save and test with AI + human modes (Pro).

8. Dark Icon Color #

Option: dark_icon_color

• Color for icons in dark mode.

Step-by-step:

1. Set dark_icon_color to a light, visible color.
2. Save and check header icons and composer icons when dark theme is active.