07. 12. 2017 Valentina Da Rold NetEye

How to Customize Your Grafana Theme

Grafana

Grafana is an open source dashboard tool that helps users to easily create and edit dashboards. Grafana uses Golang as a backend and Angular as frontend. It is quite a large codebase and supports a large number of options for its components (data sources, options, panels, etc.). Grafana’s stylesheet is written using the Sass CSS extension language. This preprocessor can help customizing themes.

grafana_sass

All Sass files are located in the public/sass folder.

The base folder, contains some generic files like font, icons, etc. In the component folder you can find stylesheets for all the HTML components such as buttons, navbars, searchbars, tabs and more. All the rules that manage page structure and layout parameters can be found in the layout directory. The mixins directory is self-explanatory:  it contains all patterns of property-value pairs, which other rulesets can then reuse. In the pages directory you can find page-dedicated files, for example styles for the dashboard, for the error page, the login page and so on. The utils directory contains declarations such as spacing, width, etc.

As you can see from the screenshot of the main Sass folder, there are also generic files that manage themes and the sass compiler.

If you need to change some style characteristics on your Grafana interface, you just need to customize one of the sass files and then recompile the theme.

Interface customization is a rather easy operation.  Let’s suppose we want to use a corporate color theme in our Grafana dashboard.   The steps are:

0 – Install Grafana

If you haven’t done it yet, I suggest that you install Grafana on your machine by following the guide here: Building Grafana from source.  In this way you will automatically install Node.js and the sass compiler Yarn.

1 – Start from the existing theme you like the most

If you want to change the  default Grafana colors to red and black, it is both simplest and fastest to change the colors inside the _variables.dark.scss file.  Changing the values for the color variables in this file means they will be changed throughout the interface when using the dark theme.

For example, we can change the background color from:

$dark-2: #1f1d1d;

to

$dark-2: #1e1e1e;

And add a new red color for titles:

$custom-red: #cc0000;

2 – Change the style

If you want to change more than just colors, you can customize other .sass files. For instance, if I want to change the color of the dashboard title, I can change the settings in the _dashboard.sass file:

.dashboard-header {
color: $custom-red;
font-family: $headings-font-family;
font-size: $font-size-h3;
text-align: center;
span {
display: inline-block;
@include brand-bottom-border();
padding: 0.5rem .5rem .2rem .5rem;
}
}

3 – Compile the Grafana frontend

Once you’ve finished your style customization, you just need to launch the frontend build process using the following command:

npm run build

An updated Grafana theme will then be generated inside the public_gen/css/ folder, and after refreshing the page in the browser, you’re done!

grafana_result

Valentina Da Rold

Valentina Da Rold

Hi, I'm Valentina and I'm a Frontend Developer at Wuerth Phoenix. I started out my career applying my Cryptography skills to coding, but really quickly fell in love with the web. I have been making websites and applications since 2012 and I still can't get enough of it. Along the way I found a passion for front-end development, and I use this passion to create interfaces that solve problems. When I'm not creating beautiful solutions, I enjoy cooking or doing sport, while listening to beautiful music.

Author

Valentina Da Rold

Hi, I'm Valentina and I'm a Frontend Developer at Wuerth Phoenix. I started out my career applying my Cryptography skills to coding, but really quickly fell in love with the web. I have been making websites and applications since 2012 and I still can't get enough of it. Along the way I found a passion for front-end development, and I use this passion to create interfaces that solve problems. When I'm not creating beautiful solutions, I enjoy cooking or doing sport, while listening to beautiful music.

12 Replies to “How to Customize Your Grafana Theme”

  1. der_optimist says:

    Hi Valtenina, thank you for that article!
    Maybe you are also interested in a “small” solution a guy found here:
    https://community.openhab.org/t/matrix-theme-for-habpanel/31100/22
    Of course you are an expert and I think with your solution you can do much more, but for me as a “grafana newbie” and non-professional user, it’s an easy way to change background color for example, without building the frontend new after a change.

  2. raul says:

    hello valentina, please could you say me where is the package.json for the dark theme?
    I followed
    http://www.neteye-blog.com/2017/12/how-to-customize-your-grafana-theme/

    and Im lost when I ran:
    npm run build

    Due the package.json is missed in the SASS files directory

    It is required to run it, isnt?

    tia.

    1. Valentina Da Rold says:

      Hi Raul,
      There is only one package.json file and you can find it into the grafana/package.json path.
      I wrote this guide while working with the previous version of Grafana. If you are using the new release (5.x.x) the building procedure has changed.
      The new frontend-building procedure requires nodejs (v.6+). For building it from source you have to run the following commands:

      npm install -g yarn
      yarn install --pure-lockfile
      yarn watch

      For further information you can refer to the official documentation (Grafana Doc).
      I hope it helps! 🙂

  3. Nicolas TESSIER says:

    Hi Valentina,

    Thanks for your work.

    Just one question about this customization method. We just installed a grafana for our needs and i discover the app actualy.

    What about grafana upgrades ? Does it overwrite our sass modifications or do we have any solution to create a selectable custom theme ?

    1. Valentina Da Rold says:

      Hi Nicolas,
      Yes for sure and update can destroy your work. I suggest you to use a VCS in order to not loose your customization and during the upgrade procedure carefully merge your changes.

  4. Gringo says:

    Hello,

    I have a short question.
    Can I customize and recompile if I installed Grafana normally on Linux?
    Or must it build from source before?

    Thanks!

    1. Valentina Da Rold says:

      Hello,
      For theme customization you need to build Grafana from source. If you have a running Grafana installation, you can also create a “Grafana development” environment where you can customize the theme and then build the frontend from source. Once you get the compiled theme directory, you can import it in your production environment.

  5. Manoj says:

    Hi Valentina,
    Thanks for your work.
    Actually I had a different query. I am actually trying to build an application entirely from the login page and signup and after getting into the application I want to add a particular dashboard which would have specific panel plugins and datasource. But what I want to achieve is not login into Grafana but have my own login and own look and feel.
    Could you help me with this?

    1. Valentina Da Rold says:

      Hi Manoj,
      This is exactly what I was working on when I wrote this blog! 🙂
      It’s hard to give a single answer to your question, without knowing more details on the system you are working on. Anyway I will be for sure happy to help you and answer to your more detailed questions. 😉

  6. Meik says:

    An alternative to modify some CSS settings is 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;
    }

    1. Paul says:

      Hi,
      Have you tried the boom-theme plugin in Grafana 7.x by any chance.
      I used it in Grafana v6.2 last year and it worked as expected but now on Grafana 7.4 (latest), even though the theme I created applied, the issue I am having is on ‘Transparent’ , display panel without background. When I toggle the Transparent switch on/off it makes no difference while the same them works in previous versions 6.x
      Any idea?
      Thanks.

      1. Valentina Da Rold says:

        Hi Paul,
        No, I haven’t tried this plugin yet. I am still working on Grafana theme customization starting from scratch and rebuilding the Grafana frontend because we need deep customization of colors but also components.
        Sorry for not being able to help you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Archive