Weird chatflow behavior on dark mode

[Leonard13]

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

[Jaycee_Lewis]

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

[Leonard13 · Accepted solution]

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!

[Jaycee_Lewis]

Thank YOU @Leonard13  for taking the time to come back and let us know how you solved the issue! — Jaycee