# Weird chatflow behavior on dark mode

**URL:** <https://community.hubspot.com/t/weird-chatflow-behavior-on-dark-mode/128407>\
**Category:** APIs & Integrations\
**Tags:** developer-tools\
**Created:** [March 21, 2025, 10:31am UTC](https://community.hubspot.com/t/weird-chatflow-behavior-on-dark-mode/128407 "2025-03-21T10:31:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Leonard13](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@Leonard13](https://community.hubspot.com/u/Leonard13)\
**Post date:** [March 21, 2025, 10:31am UTC](https://community.hubspot.com/t/weird-chatflow-behavior-on-dark-mode/128407/1 "2025-03-21T10:31:18Z")

</div>

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)

 ![Leonard13_0-1742552928225.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/1/81bca40d50d6db47f701eec12acbe5cca5b3bf70.png)

![Leonard13_1-1742553042878.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/a/6aa7152fe583784f59854fc766484a0020189ae4.png)

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

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [March 21, 2025, 8:42pm UTC](https://community.hubspot.com/t/weird-chatflow-behavior-on-dark-mode/128407/2 "2025-03-21T20:42:32Z")

</div>

Hey, @Leonard13 👋 Thanks for your post. You are correct, the styling options are limited. This reply from my teammate [@BérangèreL](https://community.hubspot.com/t5/user/viewprofilepage/user-id/230185) has a good list of resources related to this [**topic**](https://community.hubspot.com/t5/Marketing-Integrations/Customising-Live-chatbot-appearance/m-p/876511/highlight/true#M5659). — Jaycee

---

<div class="post-metadata">

**Author:** ![Leonard13](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@Leonard13](https://community.hubspot.com/u/Leonard13)\
**Post date:** [March 24, 2025, 10:58am UTC](https://community.hubspot.com/t/weird-chatflow-behavior-on-dark-mode/128407/3 "2025-03-24T10:58:13Z")

</div>

Hi [@Jaycee\_Lewis](https://community.hubspot.com/t5/user/viewprofilepage/user-id/127074) , 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!

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [March 24, 2025, 3:01pm UTC](https://community.hubspot.com/t/weird-chatflow-behavior-on-dark-mode/128407/4 "2025-03-24T15:01:50Z")

</div>

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