Customizing Chat UI Colors

Next to the ‘JS Libraries’ button there are two tabs, Light Mode and Dark Mode.

Under each tab there is a list of items and the option to select the colors of those items.

Figure 1. Figure 114 - Chat UI V3 Light Mode Tab
  • Light Mode
  • Under Light Mode, there list of items and for each item the user can select two colors.
  • Let’s take ‘Select Color for Options’ as an example:
  1. Select a background color from the picker.
Figure 2. Figure 115 - Chat UI V3 Color Picker
C:\Users\username\OneDrive - HCL Technologies Ltd\Desktop\c1.png
Figure 3. Figure 116 - Chat UI V3 Background color
  1. Select a color for that item.
Figure 4. Figure 117 - Chat UI V3 Color
  • Dark Mode
  • Under Dark Mode, the user needs to change the preview window to Dark Mode.
  1. Click on on the Preview Chat window header.
Figure 5. Figure 118 - Chat UI V3 Switch to Dark Theme
  1. From the dropdown, click on ‘Dark Theme’.
Figure 6. Figure 119 - Chat UI V3 Dark Theme
  1. Select colors the same way as in Light Mode for both background and color of the item.
Figure 7. Figure 120 - Chat UI V3 Selecting colors for Dark Mode
  1. To undo the colors, select ‘Cancel’ next to the color picker of that item.
Figure 8. Figure 121 - Chat UI V3 Undo Colors Selected