Implement a dark theme in UI

[appleciderjack]

Is your proposal related to a problem?

Similar to prometheus/prometheus#7735
It would be great to have a dark theme toggle in Thanos. (This is coming from SREs who use the Thanos UI to do digging more frequently than Grafana Explore tab)

A common use case is that we would take screenshots and post them in slack during the day.

Describe the solution you'd like

A dark mode toggle would be great, and make screenshots have less contrast when shared via Slack (in dark mode)

Describe alternatives you've considered

We use Grafana explore tab from time to time, but the experience is not as good comparing to Prometheus based UI.

Additional context

I am a monitoring SRE and often presents to team members who are new with Prometheus/Thanos/Grafana.
Slack/Grafana/Slides already supports dark mode, so it is the most jarring when switching to the Prometheus UI.

Once we get used to it, it's not so bad. But it would make for better new comer UX if we have it!

Thanks

[bwplotka]

I love this idea!

Can we propose this to Prometheus? We inherit Prometheus base! (: 🤗

[bwplotka]

Oh, actually there is already. Ok, let's wait until Prometheus have it, then we will port! Help wanted. Let's do it!

prometheus/prometheus#7735

[Aman-Codes]

Hi @bwplotka
I am interested in working on this issue. Now as dark theme is added in Prometheus (#8604), so shall I start working on adding dark theme in Thanos UI?

[onprem]

This issue number is an anagram of prometheus/prometheus#7735

Coincidence? Dark theme magic.

[bwplotka]