fhemberger / prometheus-formatter

Browser extension which makes plain Prometheus/OpenMetrics endpoints easier to read

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dark mode

MacroPower opened this issue · comments

I've modified this plugin to have a dark theme, based on Atom One Dark.

image

Is there any interest in having this as a new "default", since there's currently no way to switch between themes? If so, I can submit a PR.

Hi, that looks cool! The easiest way would be to extend content.js and add some additional CSS:

/* Those are the regular colors, you just have to replace
   them with the ones from your dark version */
@media (prefers-color-scheme:dark) {
  body         { background-color: #fff }
  .metric      { color: #000 }
  .value       { color: #ff20ed }
  .label-key   { color: blue }
  .label-value { color: green }
  .comment     { color: #6a737d }
}

If your browser/OS is set to dark mode, the alternative colors are used.

Great idea, I didn't realize you could do that with CSS!

What are your thoughts on using a theme like this for light mode?
image

Or would you rather leave that untouched?

The dark gray text on a light gray background has quite a low color contrast.
I'll also check the colors of the dark theme and might make some adjustments to improve readability.

That's fair. I'll send a PR sometime today or tomorrow so you can easily make changes and see what looks best.