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