Hello!
I am trying to integrate a chatflow on a webpage. On light mode, it works just fine. However, on dark mode, there is a blank html appearing near the chatflow (both when closed and when open) that is blocking the content it from appearing (pictures of light vs dark mode for reference)
From what I have searched until now, there is no way to modify the CSS of the chatflow, as it is an iframe from a different domain.
Any ideas on what I can do?
Thanks
Hey, @Leonard13 
Thanks for your post. You are correct, the styling options are limited. This reply from my teammate @BérangèreL has a good list of resources related to this topic. — Jaycee
Hi @Jaycee_Lewis , thanks for the help.
I found out it was a weird interaction with Tailwind, where it sets a property color-scheme:dark when in dark mode and this triggered the white background.
The solution I found was to set this property to an empty string on a useEffect and on hsConversationsOnReady. Mind you, this must be placed in a client component.
function changeColorScheme() {
let html = document.querySelector(“html”)
if(html.style.colorScheme === ‘dark’){
html.style.colorScheme = ‘’;
}
}
useEffect(() => {
window.hsConversationsOnReady = [changeColorScheme]
}, [])
Thank you again!
Thank YOU @Leonard13 for taking the time to come back and let us know how you solved the issue! — Jaycee
