Custom theme by updating palette.ts file

  • What Grafana version and what operating system are you using?
    grafana/grafana-oss:latest

  • What are you trying to achieve?
    update the palette.ts file’s content to match brand theme

  • How are you trying to achieve it?

In the Dockerfile…

# Dockerfile
# Start with the base Grafana image
FROM grafana/grafana-oss:latest as base

# Stage to build theme
FROM base as themebuilder

# Replace default grafana colors with our themed colors
COPY ./configs/grafana/palette.ts /usr/share/grafana/packages/grafana-data/src/themes/palette.ts

# Default stage that copies in the theme we built
FROM base as final
COPY --from=themebuilder /usr/share/grafana/public /usr/share/grafana/public

In the docker-compose.yml file…

  grafana:
    build:
      context: .
      dockerfile: Dockerfile
...
  • What happened?
    theme is not updated after running the container.

  • What did you expect to happen?
    theme to be updated

  • Can you copy/paste the configuration(s) that you are having problems with?

export const palette = {
  white: '#FFFFFF',
  black: '#000000',

  gray25: '#40397D',
  gray15: '#322B68',
  gray10: '#261F57', // this is the panel background color
  gray05: '#16113D',
...

When changing grafana code from source it needs to be built