Is it possible with Grafana theme?

Question

I'm using the latest version of Grafana (10 as of this writing). I want to embed some of my Grafana panels into another place/my own website. However, Grafana's light and dark themes are very different from the rest of my site's custom panels.

Does Grafana support/allow themes? I want to build a custom theme that will only be used on the embedded panels of my website, while keeping them the same as the rest of Grafana when browsing on Grafana itself. is it possible? If not, what is possible about this theme (maybe a plugin like BoomTheme but it doesn't seem to work as nothing changes/happens when I install it and I can't find it anywhere in the settings )? I searched throughout the Grafana documentation and couldn't find anything related to this.

Answer 1

One way is to add a text panel with HTML mode in the dashboard and add some custom CSS as content, for example:

<style type="text/css">
[data-testid="header-container"] {
  background-color:red;
}
</style>

EDIT: If you see the original code in the text panel display, you may need to set disable_sanitize_html in your grafana settings.

Then all dashboards (including panels) are styled with this CSS, this is an example panel in kiosk mode, the path is https://[grafana server domain]/dashboard/new?orgId=1&viewPanel=1&kiosk