docs: (vitepress) material-palenight theme contrast too low

[weedySeaDragon]

Description

The material-palenight theme used by shiki for code does not have enough contrast.
Specifically, comments are very difficult to read.
It fails the minimal WCAG standards for contrast.

Steps to reproduce

1. Run vitepress dev server: vitepress dev packages/mermaid/src/docs
2. Create this markdown in a documentation page:

```bash
# Change into the mermaid directory (the top level director of the mermaid project repository)
cd mermaid
# npx is required for first install because volta does not support pnpm yet
npx pnpm install

3. View the documentation page on your local browser

Screenshots

Code Sample

No response

Setup

No response

Additional Context

I tried but was unable to figure out how to change the shiki theme used.

[aloisklink]

Hi @weedySeaDragon, I've made a PR (#3807) that refactors the highlighters so that there is a single place to modify the shiki theme, as well as changing the default theme to github-dark.

github-dark has a contrast ratio of 4.43:1 for comments, which is technically not good enough for WCAG 2.0 level AA, as it requires a contrast ratio of at least 4.5:1 for normal text, but 4.43:1 is pretty close to it, and I didn't want to manually modify the colors within a theme.

Comments are welcome if there is a different shiki theme that you'd suggest!

It might also be worth opening up an issue in https://github.com/vuejs/vitepress to change the default vitepress theme to one with a better contrast ratio, so that other projects also get a better contrasting theme by default.

[weedySeaDragon]

Thanks @aloisklink -- this theme is better. I spent a little time looking at dark themes provided with shiki and none of them are great. (Some have higher contrast but are horrifically ugly IMNSHO.)

I agree -- right now it's not a good idea to manually modify the theme.

I will open an issue with vitepress.

[aloisklink]

I spent a little time looking at dark themes provided with shiki and none of them are great. (Some have higher contrast but are horrifically ugly IMNSHO.)

I believe part of the problem is that vitepress doesn't use the shiki background color. Instead, it uses it's own background color, and because it's a grey-ish/purple-ish color, that reduces the contrast more.

Some have higher contrast but are horrifically ugly IMNSHO.

Such is the way of accessibility/UX vs design 😄

Many modern fonts are the same way, they may be beautiful but difficult to read (although I do like Atkinson Hyperlegible, it doesn't look too bad, but it's designed for low-vision readers in mind, and best of all, it has an open-source license unlike Mermaid's default proprietary Microsoft font).

[weedySeaDragon]

Such is the way of accessibility/UX vs design 😄

[sigh] IIKR. It frustrates me that it doesn't have to be that way. (I get frustrated with all modes of this. Ex: we have a library here designed by a world famous architect. No denying the design is interesting (if not always to my personal liking), but the usability of it was so bad that the librarians had to tape up signs directing people everywhere when it opened. (Don't even get me started on elevator/lift buttons. LOL)

But at least in the decades i've been watching this there is now a whole area of expertise (UX), even if it isn't applied often enough.

...I do like Atkinson Hyperlegible, it doesn't look too bad, but it's designed for low-vision readers in mind, and best of all, it has an open-source license unlike Mermaid's default proprietary Microsoft font).

Oooh. That's nice! Hopefully Mermaid theme/config stuff is revised it will be easier to set the font used and ppl can use that. (Could use that font as an example in the documentation)