Add dark mode to site

[lukewarlow]

No description provided.

[lukewarlow]

These colours have currently mostly been picked at random based on my perception of their contrast so its possible they dont meet requirements (particularly some of the links look slightly dark compared to others so need to check that).

But I think it's a big win having dark mode.

[mfreed7]

Seems ok to me, but I'm definitely not an expert in this area. I'll click Approve, but it'd be good to get someone more authoritative to review, maybe?

[lukewarlow]

@gregwhitworth do you have thoughts on the use of modern styling such as light-dark() Vs using preference media queries (basically what browser support do we care about?)

Also do you have thoughts on this change in general.

[gregwhitworth]

@lukewarlow first off thanks for tackling this. Looking at a few of the pages we have contrast issues that will have to be addressed to land this. The component matrix:

Code blocks. Here is dark mode:

Versus light mode:

The anatomy aren't visible due to leveraging transparency and assuming a white background:

The .note classes likewise end up with poor contrast:

Same with the Slider "Parts and Concepts" table

Looking at the various High Contrast solutions and or Color Pages they seem fine. So I think if you tweak the above two we should be in a good spot.

[gregwhitworth]

See prior comment, a few scenarios end up with poor contrast due to these changes

[lukewarlow]

I've changed everything that I could find, I don't understand what you mean about anatomies? They seem to render fine (per your screenshot?)