2

I want to modify the dark theme in Grafana so that it uses #000000 as the background colour.

I have seen "How to change default black color of Grafana", however those answers only tell you how to choose between the light and the dark themes.

I also see that How to Customize Your Grafana Theme recommends editing the _variables.dark.scss file, however I cannot see where this is located, as it is not in the public/sass directory as the post suggests.

Finally, I also see that _variables.dark.generated.scss tells you to Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template, however I cannot find that file either.

Could you point me in the right direction, please?

James Geddes
  • 742
  • 3
  • 10
  • 35
  • 2
    I am facing the same situation. Have you found a solution other than the Boom plugin? Thanks! – Ezeeroc Jun 29 '20 at 04:50

2 Answers2

6

Boom Theme plugin worked for me with Grafana 6.7.1

Installation:

grafana-cli plugins install yesoreyeram-boomtheme-panel
service grafana-server restart

Go to certain Dashboard and add new Panel. Select "Boom Plugin".

Enter this under "Custom Style / CSS Override"

.panel-container {
  background-color: #000000; 
}
.dashboard-container {
  background-color: #000000; 
}
.navbar {
  background-color: #000000;
}

The Boom Theme plugin documentation is here: https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel/tree/master/docs Documentation no longer exists, see the GitHub readme file instead.

P.S. In case you are embedding Grafana's dashboard/panel, check for "allow_embedding = true" under "[security]" section in grafana.ini and use &kiosk parameter in a URL to avoid menus

Julian Knight
  • 4,716
  • 2
  • 29
  • 42
kstka
  • 61
  • 1
  • 3
1

I found the same sites as you and was frustrated at first. Fortunately I then found the Grafana plugin "Boom Theme Panel" (https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel).

It allows you to define a background image or to override the background color under "Custom Style / CSS Override" with the following settings:

.main-view {
  background-color: #000000; 
}
Meik
  • 11
  • 1