Developer's Diary #1 Changing Theme Design in Grafana

Written by Tabea Schwinn on 28 February 2020. Posted in Blog

Grafana is an interactive open source visualization software. It provides various charts, graphs and easy handling. Due to the plug-in system almost any database can be connected. If a database or visualization is missing, users are able to develop and integrate new plugins. The adaptability allows for customizing existing design into cooporate design. The following introduction explains step-by-step how to redesign a grafna theme - to provide a basis we used the Version 5.4.2..

Check two things befor starting:

1. To edit the Grafana source code read the Grafana Developer Guide
2. Change the branch to version 5.4.x. - in this way the custom 'test' theme can be integrated

Preparation done? Let's start the step-by-step Grafana redesign:

Step 0 - Preparation

To prepare the correct usage of custom designs, you have to manipulate the SASS files to use the theme related icons:

Location: src/github.com/grafana/grafana/public/sass/base/_icons.scss

Changes:

.sidemenu {
  .gicon-dashboard {
    background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_side.svg');
  }
  .gicon-alert {
    background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_side.svg');
  }
  .gicon-cog {
    background-image: url('../img/icons_#{$theme-name}_theme/icon_cog_side.svg');
  }
  .gicon-question {
    background-image: url('../img/icons_#{$theme-name}_theme/icon_question_side.svg');
  }
}

Furthermore, you have to copy the sidebar icons from the dark theme as *_side.svg
into the dark and the light theme (they use the same icons).

Location: src/github.com/grafana/grafana/public/img/icons_dark_theme/

Changes:

Copy icon_dashboard.svg, icon_alert.svg, icon_cog.svg, icon_question.svg as
icon_dashboard_side.svg, icon_alert_side.svg, icon_cog_side.svg, icon_question_side.svg
into src/github.com/grafana/grafana/public/img/icons_dark_theme/ and
src/github.com/grafana/grafana/public/img/icons_light_theme/.

Choose a name for your custom design.
For this example, we use the name test.

Step 1 - Add Color Variables and Icons:

Add a test SASS File to manage the color variables.

Location: src/github.com/grafana/grafana/public/sass/_variables.test.scss

Changes: 

$theme-name: test;

Add a test icon folder.

Location: src/github.com/grafana/grafana/public/img/icons_test_theme/

Changes:

Copy icons from src/github.com/grafana/grafana/public/img/icons_dark_theme/

Add a test SASS profile.

Location: src/github.com/grafana/grafana/public/sass/grafana.test.scss

Changes:

@import 'variables';
@import 'variables.test';
@import 'grafana';

Step 2 - Integrate Custom Design to Grafana

Modify the Theme Preference Picker to support your new custom design.

Location: src/github.com/grafana/grafana/public/app/core/components/SharedPreferences/SharedPreferences.tsx

Changes:

const themes = [
  { value: '', text: 'Default' },
  { value: 'dark', text: 'Dark' },
  { value: 'light', text: 'Light' },
  { value: 'test', text: 'Test' },
];

Modify the Grafana Frontend Builder to build your new SASS profile.

Location: src/github.com/grafana/grafana/scripts/webpack/webpack.dev.js

Changes:

  entry: {
    app: './public/app/index.ts',
    dark: './public/sass/grafana.dark.scss',
    light: './public/sass/grafana.light.scss',
    test: './public/sass/grafana.test.scss',
  },

Location: src/github.com/grafana/grafana/scripts/webpack/webpack.prod.js

Changes:

  entry: {
    dark: './public/sass/grafana.dark.scss',
    light: './public/sass/grafana.light.scss',
    hessen: './public/sass/grafana.hessen.scss',
  },

Step 3 - Final Step

Rebuild the Grafana Frontend (developer guide), start the server and select your new custom theme.

Note: 

• After adding a new profile, you have to run yarn install --pure-lockfile again, if you are using yarn.

Enjoy your Grafana customizing journey,
your dearest droxIT team

Print Email

• Next