Grafana iframe and transparency

Configuration
1

Hi,

Running Grafana add-on, has anybody been able to make the Grafana dashboard with full transparency?

Setting the “Transparent” switch to ON only make the background to be identical to the theme.
Shouldn’t I be able to override the CSS ?

This doesn’t look nice…:

image
image1336×578 130 KB

2 Likes
2

Hey,
Looking to do the same, have you found any solution for this?

3

Me too. Would be nice if this is possible!

4

Ok, it’s possible but not simple !

You need to active the Boom Theme plugin of Grafana in the HA config :

plugins:
  - yesoreyeram-boomtheme-panel

Then you can add in your dahsboard a Boom theme panel, create a theme in it with additionnal CSS style :

body, .panel-container, .dashboard-container, main {
 background-color: rgba(0,0,0,0)!important;
}
5

For Chrome/Chromium, you need CSS with your iframe card with card mod :

card_mod:
  style: |
    iframe {
      color-scheme: normal
    }
6

this didn’t work for me :frowning: can you pls give me an example of your yaml config for an iframe with a boom theme working? I can get the card to be transparent but as soon as grafana loads it has the background that is set in that panel

7

This indeed does not seem to work when using in an iframe