Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme for HTML report #858

Closed
pawamoy opened this issue Oct 19, 2019 · 14 comments 路 Fixed by #931
Closed

Dark theme for HTML report #858

pawamoy opened this issue Oct 19, 2019 · 14 comments 路 Fixed by #931
Labels
enhancement New feature or request fixed html

Comments

@pawamoy
Copy link
Sponsor

pawamoy commented Oct 19, 2019

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
Copy link
Owner

nedbat commented Oct 19, 2019

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?

@nedbat nedbat added the html label Oct 19, 2019
@pawamoy
Copy link
Sponsor Author

pawamoy commented Oct 19, 2019

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:

covdark1
covdark2

@pawamoy
Copy link
Sponsor Author

pawamoy commented Oct 19, 2019

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:

covdark1
covdark2
covdark3

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

@pawamoy
Copy link
Sponsor Author

pawamoy commented Oct 20, 2019

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

https://github.com/pawamoy/coveragedark

@nedbat
Copy link
Owner

nedbat commented Oct 20, 2019

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

@pawamoy
Copy link
Sponsor Author

pawamoy commented Oct 20, 2019

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 vsalvino mentioned this issue Feb 10, 2020
@vsalvino
Copy link
Contributor

vsalvino commented Feb 10, 2020

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

@nedbat
Copy link
Owner

nedbat commented Jul 6, 2020

This is now released as part of coverage 5.2.

@brunodantas
Copy link

brunodantas commented Aug 5, 2021

@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
Copy link
Contributor

vsalvino commented Aug 6, 2021

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
Copy link

brunodantas commented Aug 6, 2021

@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
Copy link
Contributor

vsalvino commented Aug 6, 2021

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
Copy link

Jerther commented Mar 18, 2022

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
Copy link
Owner

nedbat commented Mar 18, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request fixed html
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants