title: In Botframework Webchat how do I customize color when hovering Adaptive Card actions and send button
body: <p>By overruling the defaultStyleOptions.js of the BotFramework webchat client, I am customizing the client. THis works fine for one part. I am not able to modify the focus color when hovering over Adaptive Card actions or hovering the send button (see attached picture) I tried overruling different properties that made sense but without succes. Help appreciated.</p>
  
  <p>I tried modifying the following properties:
  default accent and default subtle
  cardEmphasisBackgroundColor
  sendBoxButtonColorOnFocus
  sendBoxButtonColorOnHover</p>
  
  <pre><code>    &lt;script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it-emoji/1.4.0/markdown-it-emoji.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  &lt;div id="webchat" role="main"&gt;&lt;/div&gt;   
      &lt;script&gt;
        // make sure the chat initializes at page load by sending a 'webchat join' event
         const store = window.WebChat.createStore({}, ({ dispatch }) =&gt; next =&gt; action =&gt; {
           if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
             dispatch({
               type: 'WEB_CHAT/SEND_EVENT',
               payload: {
                 name: 'webchat/join',
                 value: { language: window.navigator.language }
               }
             });
           }
           return next(action);
         });
         // add markdown support including Emoji
          var markdownIt = window.markdownit();
          markdownIt = window.markdownit().use(window.markdownitEmoji);
          window.WebChat.renderWebChat({
          directLine: window.WebChat.createDirectLine({ token: webChatToken}),
          renderMarkdown: markdownIt.render.bind(markdownIt),
          store,
          // styling
          styleOptions: {
  
          rootHeight: '755px',
          rootWidth: 'Auto',
          backgroundColor: 'White',
          bubbleBorder: 'solid 1px Light Blue',
          bubbleTextColor: '#0D0D0D',
  
          avatarSize: 50,
          botAvatarImage: 'https://botz4u.com/src/assets/img/png/botz4uavatar.png',
          botAvatarInitials: 'BOT',
  
  
          userAvatarInitials: 'JIJ',
          bubbleFromUserBorder: 'solid 1px Light Blue',
          bubbleFromUserTextColor: '#0D0D0D',
  
          hideUploadButton: true,
          sendBoxBorderTop: 'solid 1px #0A9BFB',
          sendBoxBorderBottom: 'solid 1px #0A9BFB',
          },
          userID: 'N/A',
          username: 'Web Chat User',
          locale: 'nl-NL'
        }, document.getElementById('webchat'));
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The adaptive card definition used in the caption:</p>
  
  <pre><code> "type": "AdaptiveCard",
      "body": [
          {
              "type": "Container",
              "items": [
                  {
                      "type": "TextBlock",
                      "spacing": "none",
                      "size": "medium",
                      "weight": "bolder",
                      "text": "Welkom!"
                  },
                  {
                      "type": "Image",
                      "horizontalAlignment": "Left",
                      "url": "&lt;link to logo&gt;",
                      "size": "Stretch" 
                  },
                  {
                      "type": "TextBlock",
                      "spacing": "medium",
                      "size": "medium",
                      "color": "Dark",
                      "text": "some text"
                  }
              ]
          },
          {
              "type": "Container",
              "items": [
                  {
                      "type": "TextBlock",
                      "text": "some text",
                      "wrap": true
                  }
              ]
          }
      ],
      "actions": [
          {
              "type": "Action.Submit",
              "title": "Wat is een chatbot?",
              "data": "Wat is een chatbot"
          },
          {
              "type": "Action.Submit",
              "title": "Waarom een chatbot?",
              "data": "Waarom een chatbot"
          },
          {
              "type": "Action.Submit",
              "title": "Wat kost een chatbot?",
              "data": "Wat kost het"
          }
      ],
  
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.0"
  </code></pre>
  
  <p>and the bot-code showing the adaptive card to the user (in the caption it is the introcard:</p>
  
  <pre><code>    if (qnaResults[0] &amp;&amp; qnaResults[0].score &gt; 0.5) {
                  if (qnaResults[0].answer === '#Weather') {
                      var weerVoorspelling = await helper.getWeatherForecast(turnContext);
                      await turnContext.sendActivity('Als je bedoelt dat je een weerbericht wilt, bij deze ....');
                      await turnContext.sendActivity({
                          attachments: [CardFactory.adaptiveCard(weerVoorspelling)]
                      });
                  } else if (qnaResults[0].answer === '#DateTime') {
                      await turnContext.sendActivity(moment().tz('Europe/Amsterdam').format('[Vandaag is het ]LL[ en de tijd is ] LT[ uur.]'));
                  } else if (qnaResults[0].answer === '#Help') {
                      await turnContext.sendActivity({
                          attachments: [CardFactory.adaptiveCard(IntroCard)]
                      });
                  } else {
                      await turnContext.sendActivity(qnaResults[0].answer);
                  }
              // If QnaMaker did not find an answer, offer help
              }
  </code></pre>
  
  <p>I would expect to be able to modify the colors mentioned above.<a href="https://i.stack.imgur.com/bhT6k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bhT6k.png" alt="Picture showing the parts of the webchat I need to customize"></a></p>