Buttons, Chips & Icon Styling

1. Button Visibility (Recap) #

From earlier sections (Chatbot buttons):

• show_theme_button
• show_refresh_button
• show_fullscreen_button
• show_attach_button
• icon_button_size
• composer_button_size
• composer_padding_right

These are not strictly colors, but are part of the UI theme.

Step-by-step:

1. Go to Davix AI Engine → Chatbot → Buttons.
2. Turn ON/OFF:
   • Theme toggle button.
   • Refresh button.
   • Fullscreen button.
   • Attach button.
3. Adjust:
   • icon_button_size – size of header icons.
   • composer_button_size – size of send/attach icons.
   • composer_padding_right – spacing in the composer area.
4. Save and test the appearance.

image IMAGE PLACEHOLDER: Screenshot of chat header showing buttons, plus composer area with send and attach icons sized appropriately. IMAGE image

2. Chip Colors in Light & Dark Theme #

Already covered briefly, but here we gather as a single place:

• Light:
  • light_chip_bg, light_chip_border
• Dark:
  • dark_chip_bg, dark_chip_border

Step-by-step:

1. Under Theming/Colors:
   • Set chip background and border for Light.
   • Set chip background and border for Dark.
2. Save and test chips appearing in chat UI.

3. Icon Colors in Light & Dark Theme #

Docs mention:

• light_icon_color
• dark_icon_color

These govern icon (e.g., theme, refresh, fullscreen, attach) color in each theme mode.

Step-by-step:

1. Set light_icon_color to a color visible on the light background.
2. Set dark_icon_color to a color visible on the dark background.
3. Save and switch theme modes (using theme button if enabled).
4. Confirm icons remain visible and consistent.

4. Brand Color & Its Use #

The brand colors:

• light_brand_color
• dark_brand_color

are used as primary accent colors in each theme.

Step-by-step:

1. Decide your global brand color(s).
2. Assign them to light_brand_color and dark_brand_color.
3. Save and inspect:
   • Buttons, chips, or other highlighted elements in both themes.