# Change Grafana Theme Color

**URL:** <https://community.grafana.com/t/change-grafana-theme-color/40910>\
**Category:** Dashboards\
**Tags:** grafana-ui, plugins\
**Created:** [December 22, 2020, 9:59am UTC](https://community.grafana.com/t/change-grafana-theme-color/40910 "2020-12-22T09:59:28Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![alwaysconfused](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@alwaysconfused](https://community.grafana.com/u/alwaysconfused)\
**Post date:** [December 22, 2020, 9:59am UTC](https://community.grafana.com/t/change-grafana-theme-color/40910/1 "2020-12-22T09:59:28Z")

</div>

I would like to change the background color in Grafana v7.2.1 on Windows. I have read that editing the theme .css files can achieve this, however, I cannot find them. I have found the .scss files, but I do not know how to edit files of this type. Is it these files I am supposed to change? How do I change them? If not, what can I do to personalize the background color?

---

<div class="post-metadata">

**Author:** ![codlord](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@codlord](https://community.grafana.com/u/codlord)\
**Post date:** [December 22, 2020, 10:15am UTC](https://community.grafana.com/t/change-grafana-theme-color/40910/2 "2020-12-22T10:15:20Z")

</div>

Firstly, you have not said what platform or what version of Grafana you are using so it’s going to be difficult for people to point you in the right direction.

If you don’t want to change system files you could try the Boom Theme plugin. It’s a bit old/clunky but it seems to still work with Grafana v7 and enables various things including custom CSS. I use it for some CSS tweaks on dashboards. You add a “hidden” boom theme panel to your dashboard. I think you have to do it on every panel though, not sure if there is a way to do changes globally.

> **[Boom Theme plugin for Grafana](https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel)**
>
> Themes for Grafana

---

<div class="post-metadata">

**Author:** ![alwaysconfused](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@alwaysconfused](https://community.grafana.com/u/alwaysconfused)\
**Post date:** [December 22, 2020, 10:25am UTC](https://community.grafana.com/t/change-grafana-theme-color/40910/3 "2020-12-22T10:25:40Z")

</div>

I would like to change the system files. How can I do this?

---

<div class="post-metadata">

**Author:** ![codlord](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@codlord](https://community.grafana.com/u/codlord)\
**Post date:** [December 22, 2020, 10:30am UTC](https://community.grafana.com/t/change-grafana-theme-color/40910/4 "2020-12-22T10:30:59Z")

</div>

I suggest you let people know what platform (Linux, Windows, Mac etc) you are using…

---

<div class="post-metadata">

**Author:** ![alwaysconfused](https://avatars.discourse-cdn.com/v4/letter/a/b5e925/32.png) [@alwaysconfused](https://community.grafana.com/u/alwaysconfused)\
**Post date:** [December 22, 2020, 10:42am UTC](https://community.grafana.com/t/change-grafana-theme-color/40910/5 "2020-12-22T10:42:28Z")

</div>

I am using Windows 7

---

<div class="post-metadata">

**Author:** ![imurphy](https://avatars.discourse-cdn.com/v4/letter/i/96bed5/32.png) [@imurphy](https://community.grafana.com/u/imurphy)\
**Post date:** [December 12, 2022, 2:45pm UTC](https://community.grafana.com/t/change-grafana-theme-color/40910/6 "2022-12-12T14:45:18Z")

</div>

Any idea if this is still working in the latest version of Grafana? I get a weird “Panel plugin not found: yesoreyeram-boomtheme-panel” - which makes no sense since I couldn’t have chosen the panel type without it being present.  
Haaving said that I had the same issue with the dynamic text module in the previous version of Grafana and they fixed that in a subsequent release.

Better still, does anyone know how to diagnose these problems? I don’t know where to start digging.

---

<div class="post-metadata">

**Author:** ![imurphy](https://avatars.discourse-cdn.com/v4/letter/i/96bed5/32.png) [@imurphy](https://community.grafana.com/u/imurphy)\
**Post date:** [December 13, 2022, 8:54am UTC](https://community.grafana.com/t/change-grafana-theme-color/40910/7 "2022-12-13T08:54:26Z")

</div>

Weirder still. The error was transitory. It just suddenly stopped appearing and the plugin now seems to work.

---

<div class="post-metadata">

**Author:** ![usman.ahmad](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/usman.ahmad/32/29706_2.png) [@usman.ahmad](https://community.grafana.com/u/usman.ahmad)\
**Post date:** [December 15, 2022, 1:29pm UTC](https://community.grafana.com/t/change-grafana-theme-color/40910/8 "2022-12-15T13:29:00Z")

</div>

Hi @alwaysconfused @imurphy

You can check the following post as it has multiple solutions available.

> [@How to Customize Grafana interface](https://community.grafana.com/t/how-to-customize-grafana-interface/68632):
>
> I want to change the logo, background color, page title, favicon… in Grafana, but I don’t know how to do it. I have changed one of the .scss files and then ran npm run command, but I did not see any change in Grafana. I also see that [[How to Customize Your Grafana Theme | www.neteye-blog.com](https://www.neteye-blog.com/2017/12/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.gener…

If you do not find the solution there then recommend just posting there as the thread is still active and the community users will reach out to you 🙂
