[WIP] Dark Mode for HTML Reports

[fishcharlie]

Closes #506

This is not even close to being ready for prime time. But I figured it'd be good to submit this PR earlier rather than later to get feedback. I'm also not a designer, so color choices might be awful. Any feedback or suggestions would be amazing to help improve this.

I have enabled Allow edits from maintainers, so any maintainers can push to my branch and help out with this.

At least now the ball is rolling and hopefully we can move in the direction of getting dark mode released!!

[fishcharlie]

@coreyfarrell Any thoughts on this before I move forward?

[coreyfarrell]

I appreciate you starting work on this. Sorry I've been slow to reply, just been very busy.

I suggest testing this locally using the istanbuljs repository. You can do this by running:

npm install
npm test
npx nyc report -r html
cp packages/istanbul-reports/lib/html/assets/base.css coverage/base.css

Then you can view coverage/index.html in your local browser. This will help to show the progress you are making. I should point out that I'm not a designer either. I'm hoping that by the time this is getting closer to completion we will be able to get comments from folks with more design experience.

[fishcharlie]

Thanks @coreyfarrell!! Just wanted to make sure I was on the right track and you believe this is a worth while effort before I really focus on it. I think that any progress that can be made on this front will be worth while.

Will apply the suggestions you made as soon as possible and continue working on this.

[fishcharlie]

@coreyfarrell Where did the packages/istanbul-reports/lib/html/assets/vendor/prettify.css file come from? I'm assuming that came from an external source or something?

[coreyfarrell]

@coreyfarrell Where did the packages/istanbul-reports/lib/html/assets/vendor/prettify.css file come from? I'm assuming that came from an external source or something?

It was of external source but I'm not sure where it came from. The original addition of these files was in 2012 at gotwarlost/istanbul@12b14f9, I'm not finding any useful context for the addition.

[bcowgill]

Is there any chance of this being progressed?
Currently I have hand edited the base.css and pretty.css files to work with a dark colour scheme and have an npm postcoverage script which copies them into the coverage output directory.
But would be much better if could specify a reporter of html-dark or some environment variable to get a dark theme when running the reporter. i.e. THEME=dark npm coverage

[fishcharlie]

@bcowgill Haven't had time to work on this any further.

I'm not sure I agree with that strategy. Ideally in my opinion it should use the prefers-color-scheme CSS option. That way with 0 effort from the user it will use the OS setting.

Maybe a CLI option would be a good option in addition to prefers-color-scheme being the default. But I'm pretty strongly in the camp of prefers-color-scheme being the default since it requires no more effort by the user and would just work.

[coreyfarrell]

The option of dark vs light is set by the system, exposed by the browser. I don't support creating an option to bypass prefers-color-scheme.

[bcowgill]

Interesting, have never heard of prefers-color-scheme. And how do I set than on my ubuntu system using i3 window manager? A search indicates how to do it for mac, windows and android only. And how about developers who are working on VM's where they cannot change system settings?

[coreyfarrell]

For cinnamon and I assume gnome you just have to set the system theme to a dark theme. Firefox can override the system setting by switching to the dark theme included with Firefox. I don't know i3 so I can't help you with that. Any developer working on a system where they cannot set preferences will be stuck with whatever their admin sets.

[bcowgill]

Yeah, those are all very frustrating for people who have vision difficulties. I often have to leave system settings as white because some applications do not have good dark modes and render black text on black backgrounds. I make use of the high contrast extension in google chrome which allows turning it on and off quickly as needed.

If you're trying to cater for accessibility at all you really need to consider that people NEED maximum control of how and when they switch between dark and light modes. An automatic setting is not always best. Ideally the html page itself would have a button to allow switching of themes while it is loaded. Next best would be the ability for generation of the theme at build time. So the team configuration can be white but another build option caters for those with vision difficulties.

If it's any help at all, my workaround CSS and postcoverage configuration is available below.
bcowgill/perljs@nyc-15.1.0-coverage-css...nyc-15.1.0-coverage-css-dark

see various cover* targets of package.json:
https://github.com/bcowgill/perljs/blob/master/package.json

changes to the two css files:
https://github.com/bcowgill/perljs/tree/master/scripts/coverage
I also ran the css through stylelint and made fixes there.

If you guys don't have time to implement this, I could package my changes up into an npm module and make it available.

[coreyfarrell]

I had not thought of this as an accessibility feature. Changes to the report are reviewed to ensure we don't reduce the contrast, and for colors used we try to avoid combinations which would be a problem for color blindness. These things don't introduce options, nyc is not setup to enable options on reporters. Environment variables can be used for anything so I don't want to expand the environmental variables which nyc responds to.

I wonder if we could tweak the built-in html report so that it can be inherited and the CSS overridden.

class HtmlReport extends ReportBase {
  // ... rest of the class clipped ...
  wrapDarkCSS(css) {
    return `@media (prefers-color-scheme: dark) { ${css} }`;
  }
}

In this situation instead of directly copying base.css we would read that file along with a dark.css, then write CSS to the report directory base + this.wrapDarkCSS(dark). I think this would allow a custom report to replace wrapDarkCSS with an identity function (simply return css), thus that custom report would be 'force dark' without doing a fork of the module.

My issue with the option is less about the initial code to enable an option, more about adding options which users will ask for support on. nyc has very little maintenance resources and even less support resources.

Side note I want to mention the Stylus browser extension. I actually use this to set some sites and even locally generated perl coverage reports to show up 'dark' - see https://github.com/cfware/perl-dark-coverage/blob/master/cover_db.user.css. I'm not sure if Chrome will allow the browser extension to run against file:// URL's, I know this works in Firefox. In Firefox with Stylus installed I can just go to that cover_db.user.css, click 'Raw' then it will offer to install that style.

[eldare]

Any progress?

[nruffing]

Have we considered using something like shikiji which supports VS Code themes and now is an ESM implementation? It gets the themes (and theme updates) through tm-themes and could even leverage that directly. Either way would give you a base theme to start with that is familiar to most users and has already been tested for contrast compliance.

I would also recommend to now leverage CSS variables to accomplish the light/dark styles since they are now widely supported in modern browsers. Then you still only need a single css file and push the decision on which one to use to the end user's browser reading the media query and changing variable values.

[DrewLandgraveCbsi]

For those still looking at this. I ended up using @coreyfarrell's suggestion of using Stylus. I then took the base.css and prettify.css files in the coverage directory and put them in chatgpt and told it, "Make me a Material Theme Darker variant of this light theme" It spit out some css and I made a few tweaks. I uploaded it to the userstyles repo that stylus uses

https://userstyles.world/style/14631/istanbul-lcov-material-theme-darker

I tried a couple of other formats too. Solarized Dark, Monokai, etc but I use Material Theme Darker in vscode so it translated pretty well