Directline bot- How to change the font color for user's bubble

Question

I'm trying to customize my chat bot's UI. In that i was currently stuck in changing the font color of user's bubble. By default the font color was set black, which I want to change to white, I'm able to change the bubble background color using the following style options.

    const styleSet = window.WebChat.createStyleSet({
        
        bubbleBackground: 'rgba(0, 0, 255, .1)', 
      bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'

    });

can any please help with the proper syntax to change the font color for the user and Bot bubble.

Answer 1

As you can see in defaultStyleOptions.js in the Web Chat repo, there are a number of styling options that are built-in and accessible. All you need to do is target the bubbleFromUserTextColor and bubbleTextColor properties for either the user bubble or bot bubble, respectively.

const styleSet = window.WebChat.createStyleSet({
        
  bubbleBackground: 'rgba(0, 0, 255, .1)',
  bubbleTextColor: 'rgba(0, 0, 0, 1)',
  bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
  bubbleFromUserTextColor: 'rgba(0, 0, 0, 1)'

});

Hope of help!