Gud day how can I can message chat bubble color

Gud day please how can I change the message chat bubble color dynamically when sending message

Pls help am stuck help me

Pls I need answers help

Pls help help me na pls and pls

hi, you can try this

.md .message-received .message-bubble, .ios .message-received .message-bubble {
  background: blue;
.md .message-received.message-tail .message-bubble:before, .ios .message-received.message-tail .message-bubble:before {
  border-bottom: 8px solid blue;

.md .message-sent .message-bubble, .ios .message-sent .message-bubble {
  background: red;

.md .message-sent.message-tail .message-bubble:before, .ios .message-sent.message-tail .message-bubble:before {
  border-bottom: 8px solid red;
1 Like

I will reply here since you ask me via PM and somebody could find this useful, I don’t know if this is a good solution. But as you don’t share the code, nor explain what you are trying to do, this is the best I could do. As you ask, its vanilla JS

// Change send messages color
function changeSendMessageBackground (color) {
  let sMessageArr = document.getElementsByClassName('message-sent')
  for (let i = 0; i < sMessageArr.length; i++) {
    sMessageArr[i].getElementsByClassName('message-bubble')[0].style.background = color

// Change recived messages color
function changeRecivedMessageBackground (color) {
  let rMessageArr = document.getElementsByClassName('message-received')
    for (let i = 0; i < rMessageArr.length; i++) {
    rMessageArr[i].getElementsByClassName('message-bubble')[0].style.background = color

then just call the functions with the desired color;

changeSendMessageBackground ('yellow')
changeRecivedMessageBackground ('lime')
1 Like

I want to change the chat bubble color wen adding a messages or receiving a message

so trigger each function when you get or send a message. You will have to implement the message service you r self.

1 Like