🌓 Dark Mode

[ovlb]

This implements dark mode. ⬛️

It also fixes the missing contrast outline on Windows High Contrast Mode that @dengeist reported.
And it makes the focus state inside of the coloured boxes a little more obvious.

Overall I didn’t change too much off the design because it was working quite well out of the box

[ovlb]

Note: This adds client-side scripting but no JS build process, because scope and such. Optimising JS delivery is on my radar, I will add a ticket for this asap.

[tatianamac]

@ovlb Bumped in the Slack channels to elicit more feedback.

[tatianamac]

@ovlb I think that there's one area where the text is still white on :focus, rendering it illegible. The rest looks good to me!

[tatianamac]

One area in the table of contents where the word renders as white when it should be black for :focus. See comment with screenshot.

[ovlb]

@tatianamac Good catch. I’ve updated the styles.

[yourpalkat]

@ovlb Some of these highlighted terms on the documentation/front-matter page have troublesome contrast in dark mode. Everything else looks amazing to me!

[ovlb]

@derekmurr Thanks for having a look! I’ve updated the styles.

[ovlb]

@tatianamac Is there anything left to do here?

[tatianamac]

I love it so much!!! 😭

A non-blocking questions: I noticed that for the :focus mode, we have dark text on light, which causes the text colour to flip. This isn't the same behaviour on light mode:

If this approach is intentional, then I think this is good to merge in! If it isn't, then I think making it consistent could be nice; so that the text remains the same colour.

[ovlb]

If this approach is intentional, then I think this is good to merge in!

It is, as without the colour change the contrast ratio is not sufficient.

[tatianamac]

If this approach is intentional, then I think this is good to merge in!

It is, as without the colour change the contrast ratio is not sufficient.

Gotcha, I guess I'm not 100% following why we can't take an inverted approach from the light mode (so, the highlight colour would need to be a darker shade.) But regardless I trust you and am fine with it as is.

[ovlb]

so, the highlight colour would need to be a darker shade

That’s a version we can try. I think I took the inverted route because I didn’t need to broaden the colour palette and I liked the effect.

[ovlb]

@tatianamac I’ve updated the focus styles.

[tatianamac]

@ovlb Perfect! I think this is ready to ship! 🚀

[ovlb]

@tatianamac Let’s go! 🚢

[ovlb]

@tatianamac Do you wanna push the button?