# Live Chat Background Transparency Issue

**URL:** <https://community.hubspot.com/t/live-chat-background-transparency-issue/74730>\
**Category:** Tips, Tricks & Best Practices\
**Created:** [February 8, 2023, 2:19pm UTC](https://community.hubspot.com/t/live-chat-background-transparency-issue/74730 "2023-02-08T14:19:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dsilber](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dsilber](https://community.hubspot.com/u/dsilber)\
**Post date:** [February 8, 2023, 2:19pm UTC](https://community.hubspot.com/t/live-chat-background-transparency-issue/74730/1 "2023-02-08T14:19:35Z")

</div>

We are having an issue with the live chat on the bottom right not having a transparent background. Have looked all over at the code and CSS and can’t find any settings that would fix this. Any ideas?

Live chat example: [https://streamdal.com/](https://streamdal.com/)

---

<div class="post-metadata">

**Author:** ![dsilber](https://avatars.discourse-cdn.com/v4/letter/d/bbe5ce/32.png) [@dsilber](https://community.hubspot.com/u/dsilber)\
**Post date:** [February 8, 2023, 6:30pm UTC](https://community.hubspot.com/t/live-chat-background-transparency-issue/74730/2 "2023-02-08T18:30:58Z")

</div>

We ended up resolving this internally.

---

<div class="post-metadata">

**Author:** ![DianaGomez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dianagomez/32/48035_2.png) [@DianaGomez](https://community.hubspot.com/u/DianaGomez)\
**Post date:** [February 8, 2023, 8:27pm UTC](https://community.hubspot.com/t/live-chat-background-transparency-issue/74730/3 "2023-02-08T20:27:14Z")

</div>

Hi @dsilber, thanks for letting us know 😊

Best,

Diana

---

<div class="post-metadata">

**Author:** ![mii](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mii/32/55456_2.png) [@mii](https://community.hubspot.com/u/mii)\
**Post date:** [December 5, 2025, 10:09am UTC](https://community.hubspot.com/t/live-chat-background-transparency-issue/74730/4 "2025-12-05T10:09:24Z")

</div>

Maybe you have a CSS **dark-mode** supported design and something like this in your styles:

```lia-code-sample
@media only screen and (prefers-color-scheme: dark) {
 :root:not([data-theme]) body:not([data-theme]) {
 (...)
 color-scheme: dark;
 }
}

```

Therefore, you need to specify the scheme for the HubSpot chat iframe to handle the bg-color properly:

```lia-code-sample
#hubspot-messages-iframe-container iframe {
 background-color: transparent !important;
 color-scheme: light;
}

```

The problem is the “_color-scheme: dark;_” declaration. See MDN for more information: [color-scheme CSS property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme)