# Matrix Theme for HABPanel

**URL:** <https://community.openhab.org/t/matrix-theme-for-habpanel/31100>\
**Category:** HABPanel Examples\
**Tags:** skin, theme, stylesheet\
**Created:** [July 5, 2017, 7:42pm UTC](https://community.openhab.org/t/matrix-theme-for-habpanel/31100 "2017-07-05T19:42:56Z")\
**Posts on this page:** 1\
**Showing post:** 22

<div class="post-metadata">

**Author:** ![pmpkk](https://community.openhab.org/user_avatar/community.openhab.org/pmpkk/32/11485_2.png) [@pmpkk](https://community.openhab.org/u/pmpkk)\
**Post date:** [July 9, 2017, 8:33pm UTC](https://community.openhab.org/t/matrix-theme-for-habpanel/31100/22 "2017-07-09T20:33:51Z")

</div>

Thanks!

I couldn’t get the “transparent” option to work in the PNG output, it keeps rendering the background with the background color of the UI.

So I added a little “hack” to grafana, introducing a custom theme option:

Edit the “index.html” file in grafana and add this line under the “title” tag:

```auto
<link rel="stylesheet" href="http://openhabianpi.local:8080/static/mygrafana.css" type="text/css">

```

Make sure you restart the Grafana service so the new HTML file is loaded!

Then, you can add a mygrafana.css file into your openhab html folder:

```auto
@charset "UTF-8";

.panel-container {
    background-color: #19201c !important;
    border: 0px solid #292929 !important;
}

```

This way grafana’s background of the charts matches my background and when the direct link image is rendered it looks perfect.

---

_[View the full topic](https://community.openhab.org/t/matrix-theme-for-habpanel/31100)._