feat(ui): add dark theme to istanbul html reporter

[userquin]

Description

This PR adds custom dark theme css for istambul html reporter modified from this https://userstyles.world/style/14631/istanbul-lcov-material-theme-darker

Check also https://github.com/istanbuljs/istanbuljs/pull/553#issuecomment-1934930904

I need to override the css files when using standalone, rn only works when running Vitest UI (shouldn't work when running npx serve coverage)

index with dark theme

index with light theme

detail with dark theme

detail with light theme

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• [ ] It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• [ ] Ideally, include a test that fails without this PR but passes with it.
• [ ] Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• [ ] Run the tests with pnpm test:ci.

Documentation

• [ ] If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• [ ] Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify[bot]]

✅ Deploy Preview for vitest-dev ready!

Name	Link
🔨 Latest commit	c7d88957e8f058e45ff4555bcb9ebcaa2e66127d
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/66b125ffb806f40008b845de
😎 Deploy Preview	https://deploy-preview-6281--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[userquin]

Coverage including html folder when running standalone report (--reporter=html), no idea what's happening.

Added onFinishedReportCoverage to the html reporter to allow copy/paste custom css and dark script to html pages after coverage finish (update vitest core to call it), cannot use onFinished since the coverage run after it.

The html reporter not being resolved from local (added the reporter subpackage to root tsconfig base with no luck).

[userquin]

Html reporter is the custom reporter you are asking for. Vitest will check for html reporter in the configuration to include the reporter from the ui package: check coverage docs (for example, will not work with html-spa reporter).

This reporter is only used with Vitest UI or Browser Mode and will work only with the istambul html reporter (both istambul and v8 using this reporter).

IIRC Vlad asked in discord about changing the reporter name to web.

[AriPerkkio]

Html reporter is the custom reporter you are asking for. Vitest will check for html reporter in the configuration to include the reporter from the ui package: check coverage docs (for example, will not work with html-spa reporter).

This reporter is only used with Vitest UI or Browser Mode and will work only with the istambul html reporter (both istambul and v8 using this reporter).

Sorry I'm not sure I'm following here. Istanbul's html reporter is used to generate the report that Vitest UI shows. This PR wants to add custom CSS/JS for that report.

Why does this need to be Vitest UI specific only?

IIRC Vlad asked in discord about changing the reporter name to web.

Sure, we can do that. For the public API we would require users to specify web reporter, and then internally convert that to Istanbul's html reporter.

[userquin]

Sorry I'm not sure I'm following here. Istanbul's html reporter is used to generate the report that Vitest UI shows. This PR wants to add custom CSS/JS for that report.

Vitest UI will show the coverage link in the UI only when html reporter added to the configuration and coverage.enabled flag enabled. This PR changes the css styles and the html pages generated by Istanbul html reporter to support dark theme inside Vitest UI (rn, when switching Vitest UI to dark, the html from the coverage folder doesn't support dark theme: Vitest UI adding iframe for coverage via coverage middleware).

This PR is about integrating Istanbul html reporter in Vitest UI: it is out of scope how can we integrate dark theme outside Vitest UI. For example, some users may want to use system theme, others may want dark or light only (with a custom color palette like https://userstyles.world/style/14631/istanbul-lcov-material-theme-darker).

Vitest UI using vueuse to switch between dark and light themes, this PR adds the corresponding script to all html pages to access and watch the corresponding local storage theme key and updates the css files to match Vitest UI color palette.

Check linked Istanbul issue, there is a PR to add system theme to the html reporter.

NOTE: the Vitest UI html reporter also generating standalone output when enabling it via --reporter=html (check last tip in the docs: https://vitest.dev/guide/ui.html#vitest-ui).

[osulli]

Any chance on a revival of this @userquin @sheremet-va?