Hi I have made a Facebook page for my website and added the messenger live chat plugin but i want it to be in dark skin because the whole website is made in dark mode please
here is the website:
even if there is no direct way how can i just override the css with the correct ones to get the dark mode design?
TIA!
There is a way, I was in the same situation as you. You can invert both of the iframes (the bubble button and the chat window itself), which will give you an already pretty dark mode:
[data-testid="bubble_iframe"], [data-testid="dialog_iframe"] {
filter: invert(1);
}
You can further play with how inverted they are and also add other filters like "hue-rotate", "saturation", "brightness", etc.
If you have the main theme of your website that you want to preserve go to https://pinetools.com/invert-color (or a graphic editor) and invert the color and make the inverted color the theme color of your widget. After the double inversion, you'll have the dark-themed widget with your main color preserved.