Please: dark mode for documentation themes

[johnnyitd]

Guys, can we please get dark mode for ProDocs or Documentation?

Changelog is kinda cool, but is very fat with a lot of wasted space.

[candidexmedia]

Update: I figured out how to create a toggle for the Simple theme, and made a gist: https://gist.github.com/candidexmedia/e1dc9fb0ce85eddeadc236d6b21e25cd

Try it out with your theme. 😊

[gpsblues]

Hi @johnnyitd,

you could try a basic color inversion.
This CSS mimics, in a less sophisticated way, how some browsers offer a manual dark mode.

/* Color inversion */
html {
    filter: invert(100%) hue-rotate(180deg);
}
/* Re-inversion for images, svg, videos */
html img,
html svg, /* svg is optional */
html video {
    filter: invert(100%) hue-rotate(180deg);
}

It's a compromise, but if your site has a favorable color scheme, it might work without further effort.
A good result isn't always guaranteed, but it's definitely worth a try.

Heads up! Your designer might stop talking to you :)
This technique could also be applied to the dark/light toggle button.

[candidexmedia]

Very cool trick, thank you for sharing!

This technique could also be applied to the dark/light toggle button.

It absolutely can! I've added a note in my gist for the inversion alternative

[Backspaze]

I don't know how long it's been available, but ProDocs has a darkmode now. It does not seem like it has a button for manually switching, but it can be set to auto, for switching based on OS settings. More info about it is available under Light and Dark Color Modes on ProDocs.

I don't know about Chrome, but in Edge and Firefox, you can easily try it out by temporarily switching the theme from the dev tools.

Firefox

Edge