How to Change Color of AI Chatbot "Copy", "Like", and "Dislike" Icons

[Petar_Dietrich]

Hello,

Is there a CSS rule I can use to change the color of the AI Chatbot’s “Like” and “Dislike” icons? See below.

Thank you!

---

[Sina]

Hi @Petar_Dietrich

/* Like */
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(2) svg,
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(2) svg path {
  fill: green !important;
}

/* Dislike */
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(3) svg,
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(3) svg path {
  fill: red !important;
}

[Petar_Dietrich]

Thank you, @Sina! Worked beautifully. See below.

---

[Sina]

Hi @Petar_Dietrich

Great idea. Looks good.

The copy icon is nth-of-type(1) if you like also another color for this.

[Petar_Dietrich]

Nice! See below for combined CSS rules and results. Thank you!

---

/* Change Color of Copy, Like, and Dislike Icons */

/* Copy */
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(1) svg,
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(1) svg path {
fill: #278dc5 !important; // enter your custom color
}

/* Like */
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(2) svg,
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(2) svg path {
  fill: #10ac84 !important; // enter your custom color
}

/* Dislike */
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(3) svg,
[class*="dialog-message-content__Footer-sc"] button:nth-of-type(3) svg path {
  fill: #e14d43 !important; //enter your custom color
}