Unintended white background

[JakobJar]

Hi,
I would like to use your widget on a dark themed site, but the background is completely white.

Would be nice if you could fix it or give me instructions how to I can fix it myself.

[DannyFeliz]

Hi,

This component does not add that white background; please try to change the background of the parent component of the vue-tweet component.

[JakobJar]

Hi,
I already did that and it looks like this:

I think that the background-color is set by the component.

[DannyFeliz]

How can be that possible if in the component I don't even have a style tag 🙂 https://github.com/DannyFeliz/vue-tweet/blob/main/src/components/vue-tweet.vue

[JakobJar]

I don't know, maybe it comes from the tweet itself? Anyways it would nice if you could remove the background somehow, I think this would be helpful for everyone.

[Josepdal]

Hi @JakobJar have you found any solution? I am having the same problem, don't know if it is something related to Nuxt 3, will keep investigating...

[JakobJar]

Hi @JakobJar have you found any solution? I am having the same problem, don't know if it is something related to Nuxt 3, will keep investigating...

No, I haven't... I have been using Vue 3 and switched to Nuxt 3 some time ago but the issue remained. I'm additionally using Ionic/Capacitor in my project so I thought it's an issue on that side but based on your comment that doesn't seem to be the case. Here is an issue on the Ionic forum I found in my research: https://forum.ionicframework.com/t/cannot-create-a-iframe-with-transparent-background-in-ionic-framework/224587
Would be happy if you could keep me up to date with your investgations!

[Josepdal]

Hi @JakobJar have you found any solution? I am having the same problem, don't know if it is something related to Nuxt 3, will keep investigating...

No, I haven't... I have been using Vue 3 and switched to Nuxt 3 some time ago but the issue remained. I'm additionally using Ionic/Capacitor in my project so I thought it's an issue on that side but based on your comment that doesn't seem to be the case. Here is an issue on the Ionic forum I found in my research: https://forum.ionicframework.com/t/cannot-create-a-iframe-with-transparent-background-in-ionic-framework/224587 Would be happy if you could keep me up to date with your investgations!

Hello, I have found a solution. For me, the iframe was inheriting the property color-scheme: dark and with that it was not working. To fix it I have added the following CSS code:

iframe
  color-scheme: auto

[DannyFeliz]

Closing since this is not something I control.