Gud day how can I can message chat bubble color

1

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

2

Pls help am stuck help me

3

Pls I need answers help

4

Pls help help me na pls and pls

5

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
6

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
7

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

8

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

1 Like