[Feature Request] Custom UI themes

[rlipscombe]

I found #4909, which was closed with the following:

You can create your own theme by forking Grafana and changing the sass variable files :)

That's fair. My request has smaller scope:

Could we have the ability to add SASS variable files to grafana? I'm not talking about a full-blown theme designer, and I'd like to avoid forking the source code. I'd just like a way to copy an existing SASS file, edit it, and drop it in a directory on the server, and then be able to choose that.

Why? Because I've got multiple environments (hence multiple instances of grafana), and it'd be useful to quickly see which one I'm looking at (e.g. by having a different theme for each one).

[rlipscombe]

One of my team pointed me to this: http://www.neteye-blog.com/2017/12/how-to-customize-your-grafana-theme/

...which gets most of the way there, I guess.

[torkelo]

adding SASS files is not possible, they are compiled during build process and the build tools are not included in a Grafana distribution package.

[rlipscombe]

What about building the SASS file offline and copying the results to a directory on the server?
Essentially I'm looking for a way to manage a set of themes, without needing to maintain a separate fork of grafana for each one.

[thinrope]

Disclaimer: I am just starting to use Grafana, not sure about the whole picture yet.

I guess using the pointed article is one (cumbersome, yet powerful) way.

What about adding 2 additional themes, call it custom-{dark,light} or local-{dark,light}, that are exactly as the upstream dark/light themes, but add a custom patch that is simple CSS. Initially those files we'll be empty (or with comment like "put your CSS here") and I guess they should be imported from grafana.light.scss and grafana.dark.scss at then deployed. Ideally they should be in some local folder, so that redeployment doesn't overwrite them (not sure how people do it). Alternative is to add some checkbox Apply local theme customizations near the theme selection dialog. Not sure which is easier or better, but both will work.

[uh10]

I tried build from this site: http://docs.grafana.org/project/building_from_source/ , but it stop's with
"package context: unrecognized import path "context" (import path does not begin with hostname)"
on Ubuntu.
Ok, now i can search, find something, and come deeper and deeper in a other "path" (in this case the "go"-Installation), this cost much time. :-(

The dark-Theme ist nice for my, only the Background of the graphs should be not: $dark-1: #141414;
Why is it not $black: #000;? Why this reducing of the contrast?

[manilabay]

hello folks, 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

tia.

[rnersesian]

I've started checking how grafana works and I'm looking for a way to implement new custom themes.

At first, when I saw that there's a drop down menu in the preferences page, I though that developers made it easy to add new custom themes. But actually the front works like this:
-check if light theme is chosen
-if true theme = light else theme = dark

So I've just started working on it but I'm not sure if the devs want to implement it right now. Since they want to remove the angular part and only use react.

What you can do is modifying current themes (light or dark) and rebuild frontend by using yarn watch or npm run watch/dev

EDIT: btw, I didn't speak english for a long time so if there's something you didn't get tell me please.

[anjum121]

I was trying out Grafana theme followed/checked this site http://www.neteye-blog.com/2017/12/how-to-customize-your-grafana-theme/. it's not aligned with the current version of Grafana.

Steps to follow

• get Grafana following this link https://grafana.com/docs/project/building_from_source/
• On my mac I had to update my go version to latest otherwise I was getting some error
• Once everything is up & correct. I did go run build.go setup and go run build.go build
• To run backend i use this command ./bin/darwin-amd64/grafana-server.
• In a new terminal, I run this command for frontend yarn start:hot build.
• Then open packages/grafana-ui/src/themes/dark.ts and modify the theme variables.
• Unfortunately, you need to keep re-start backend server to reflect those changes.

anyone have a better idea, please suggest

[yesoreyeram]

I have a workaround for this issue. Refer Boom Theme plugin.

yesoreyeram/yesoreyeram-boomtheme-panel#1 (comment)

[mario-mui]

Boom Theme plugin. must add panel to my dashboard which i do not want.
and I want to save theme which I custom defined. when I refresh bowser, dashboard come to default

[yesoreyeram]

@Mario56 - If you use boom theme plugin in your dashboard, the panel should be in your viewport. ( top of the dashboard ). Other wise, it will be pushed for lazy rendering by grafana. So if you have the panel at the bottom / not visibile, then the panel will be applied only when scrolled.

[mario-mui]

@Mario56 - If you use boom theme plugin in your dashboard, the panel should be in your viewport. ( top of the dashboard ). Other wise, it will be pushed for lazy rendering by grafana. So if you have the panel at the bottom / not visibile, then the panel will be applied only when scrolled.

Right. My new solution is to write an app plugin which only load custom css to overwrite base css