Dark theme for HTML report

[pawamoy]

I'm often writing tests late at night, checking the coverage result in the HTML report to know what I should test next. And it's very bright 🙈 !

So, I'm voting for adding a dark theme to the HTML report 🙂

The alternative is to change the current theme to work with darkreader. Here is the related issue: darkreader/darkreader#1646

[nedbat]

Coverage.py already supports an [html] extra_css option: https://coverage.readthedocs.io/en/v4.5.x/config.html#html

I've never used darkreader. What does a page have to do to work well with it?

[pawamoy]

Coverage.py already supports an [html] extra_css option: https://coverage.readthedocs.io/en/v4.5.x/config.html#html

Ah, great, then I'll try to come up with a CSS file that inverts the colors, and post it here when it's done 🙂

I've never used darkreader. What does a page have to do to work well with it?

Well I really don't know, and I'm pretty bad at CSS, but maybe someone else knows and would be willing to invest some time.

Here's how it looks with darkreader:

[pawamoy]

Here is my CSS:

body { font-family: georgia, serif; font-size: 1em; background-color: #0C0E15; }
#header { background: #111111; width: 100%; border-bottom: 1px solid #eee; }
h1 { font-size: 1.25em; display: inline-block; color: #C797E6; }
h2.stats { margin-top: .5em; font-size: 1em; color: #eeeeee }
.stats span { border: none; border-radius: 0; padding: .1em .5em; margin: 0 .1em; cursor: pointer }
.stats span.run { background: #779977; }
.stats span.run.show_run { background: #44bb44; }
.stats span.mis { background: #997777; }
.stats span.mis.show_mis { background: #bb4444; }
.stats span.exc { background: #454545; }
.stats span.exc.show_exc { background: #252525; }
.stats span.par { background: #999977; }
.stats span.par.show_par { background: #bbbb44; }
.text p { margin: 0; padding: 0 0 0 .5em; border-left: 2px solid #111111; white-space: pre; position: relative; }
.text p.run.show_run { background: #44bb44; }
.text p.run.show_run span { color: #111111; }
.text p.mis.show_mis { background: #bb4444; }
.text p.mis.show_mis span { color: #111111; }
.text p.par { border-left: 2px solid #ffff00; }
.text p.par.show_par { background: #bbbb44; }
.text p.par.show_par span { color: #111111; }
.text .com { color: #666666; font-style: italic; line-height: 1px; }
.text .key { color: #708FCC; font-weight: bold; line-height: 1px; }
.text .str { color: #B9D78B; }
.text .nam { color: #B1C2DF; }
.text .op { color: #7CBDD5; font-weight: bold; }
.text .num { color: #E88E70; font-weight: bold; }
#index tr.file { color: #eeeeee; }
#index td.name, #index th.name { text-align: left; width: auto; color: #eeeeee; }
#index th { font-style: italic; color: #eeeeee; border-bottom: 1px solid #ccc; cursor: pointer; }
#index th:hover { background: #eee; border-bottom: 1px solid #999; color: #111111; }
#index th.headerSortDown, #index th.headerSortUp { border-bottom: 1px solid #000; white-space: nowrap; background: #eee; color: #111111; }
#index td.name a { text-decoration: none; color: #eeeeee; }
#index tr.total td, #index tr.total_dynamic td { font-weight: bold; border-top: 1px solid #ccc; border-bottom: none; color: #eeeeee; }
#index tr.file:hover { background: #eeeeee; color: #111111; }
#index tr.file:hover td.name { text-decoration: underline; color: #111111; }
#index tr.file:hover td.name a { color: #111111; }
#scroll_marker { position: fixed; right: 0; top: 0; width: 16px; height: 100%; background: #222222; border-left: 1px solid #666666; will-change: transform; }
#scroll_marker .marker { background: #b1c2df; position: absolute; min-height: 1px; width: 100%; }

It could be cleaned up even more I guess (lots of duplicated properties).

And how it looks:

I didn't change the tooltips yet, but it's already nice I think.

[pawamoy]

Just created a repository with the CSS theme, for those who want to contribute 🙂

https://github.com/pawamoy/coveragedark

[nedbat]

The CSS is generated from the style.scss file in the repo, it might be easier to work from that.

[pawamoy]

I see the SCSS file has already changed since version 5.0a8. It's indeed easier to tweak but I'll wait for it to be more stable / officially released.

[vsalvino]

Howdy folks... I have submitted a PR for this functionality. Please take a look! #931

[nedbat]

This is now released as part of coverage 5.2.

[brunodantas]

@vsalvino It doesn't work for me on Chrome/Ubuntu. It seems that the prefers-color-scheme media query doesn't work on Ubuntu. Is there any way to enable it manually?

[vsalvino]

Chrome does indeed support the prefers-color-scheme on all platforms. However it is possible that Chrome is not respecting your OS settings, or is not giving you the ability to set this preference manually. This doesn't surprise me as Chrome is generally user-hostile in many respects. Most browsers have a setting to switch the browser from light to dark mode (Firefox, MS Edge, Opera, Epiphany, etc. are all available on Linux).

The first result on Google seems to provide many practical workarounds for your situation: https://askubuntu.com/questions/1159741/enable-dark-mode-on-chromes-internal-pages

[brunodantas]

@vsalvino Indeed, sorry for not detailing my previous post. I had googled this yesterday in various forms and tried the workarounds. Some results report that there's an issue between Ubuntu and Chrome regarding this. This script says my system theme is light, but it's set to the built-in Ubuntu dark theme.

The workarounds include the force-dark-mode Chrome flag, which is undesirable because it simply inverts all pages' colors in an ugly way instead of providing proper dark themes, and using the Dark Reader extension, which doesn't work for the coverage report.

So it seems to me that the best option would be to enable the coverage report dark theme manually in some way, if that's possible.

[vsalvino]

A way to manually switch between light and dark theme would be nice... perhaps you can implement it :)

I would encourage you to file a bug with Chromium, or Ubuntu, about this deficiency so they are aware. Many other websites also use the prefers-color-scheme attribute.

[Jerther]

Any update on this? Again as @brunodantas reported, and still as of today, the force-dark-mode chrome flag works but many sites then look utterly ugly ;)

coveragepy 6.2
Chrome Version 97.0.4692.99 (Official Build) (64-bit)
Fedora Linux, GNOME, Wayland

A chromium bug report has already been filed and is still active but I'm not sure if it's going anywhere...

[nedbat]

I've opened a new issue to track the Ubuntu/Chrome problem: #1344.