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.