topic Re: Weird chatflow behavior on dark mode in APIs & Integrations

Weird chatflow behavior on dark mode

Leonard13 — Fri, 21 Mar 2025 10:31:18 GMT

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

Re: Weird chatflow behavior on dark mode

Jaycee_Lewis — Fri, 21 Mar 2025 20:42:32 GMT

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

Re: Weird chatflow behavior on dark mode

Leonard13 — Mon, 24 Mar 2025 10:58:13 GMT

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!

Re: Weird chatflow behavior on dark mode

Jaycee_Lewis — Mon, 24 Mar 2025 15:01:50 GMT

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