Add a dark-mode toggle

[aristath]

Came up in various tickets that we need a toggle for dark/light mode. Some users use dark mode on their OS but prefer light for webpages. Others prefer dark mode due to a11y. Whatever the reason, having a toggle makes things easier for end-users.

This PR is an example of how we can do it. It's pretty simple and effective...
The one I went with here is MIT-licenced from https://codepen.io/waynedunkley/pen/YybgGo but there are many to choose from, or we can create one specifically for this theme (would be preferable).

The switch used in this PR feels a bit out of context and doesn't match the overall design, @melchoyce could we create something for toggling between dark mode and light mode?

[aristath]

Update: This now matches the overall theme styles a lot better, but can further be improved & customized.

[hedgefield]

I love this! Beautiful icon choice, and as I mentioned in #621 it's great that we're offering this option.

[beafialho]

Let me jump in the conversation and show a very rough prototype I did of the toggle design. The way I see it is having little to no ornamentation. The moon shape may not even be needed since there's a color shift.

[melchoyce]

Thanks for the mockups, @beafialho!

What would it look like if we added a 1px opposite-color border to the toggle? Worried about it being invisible if it happens to be on top of a custom color that's a similar shade.

[ryelle]

A few accessibility notes

• the bottom-right floating icon makes it hard to know where in the page's tab order it is
• this is in the footer of the site, so you need to tab through the whole page to get to it
• it doesn't seem to be focusable, but i'm not 100% sure on that, it will need a focus style
• it's being aria-hidden right now, but a screen reader user might want to be able to control this (sighted people use screen readers too)

Moving the toggle to the top of the page would help with the first two issues, but I'm not sure if there would be other design considerations.

[melchoyce]

re: positioning, what about...

Desktop	Tablet	Phablet	Small Phone

(The toggle is always 44px tall to comply with AAA sizing guidelines)

[melchoyce]

One a11y question: Will the toggle need to have a label?

[aristath]

• Made it focusable
• Added focus-styles
• Removed aria-hidden
• Added a label (screen-reader-only)

[hedgefield]

To me, a standard toggle is less clear than the sun/moon, I feel like that's an established pattern for dark mode now. I wouldn't know what a regular toggle does presented in that spot without context, but adding a label would make it too prominent maybe. I do like the subtle moon shape that the toggle knob has in dark mode, maybe we should at least reverse that? So that's visible in light mode, indicating it will transition to dark mode as the toggle action?

[aristath]

I agree that a standard toggle is a bit weird... But nevertheless my last commit implements it since from what I understood @melchoyce seemed to like the idea. It currently looks like this:

I'd very much like to see something like the ones shown in these examples (posting for inspiration):

• https://codepen.io/bheberer/pen/BaNZKmq
• https://codepen.io/lucas-labs/pen/wvBvEZq
• https://codepen.io/sandeshsapkota/pen/xxVmMpe
• https://codepen.io/z-/pen/BaBxgro
• https://codepen.io/avstorm/pen/XWrNNOE
• https://codepen.io/sheelah/pen/dEmyqx

[melchoyce]

The toggle is still referencing sun/moon, but let me check out those CodePen examples and see if one would work okay for the theme.

[aristath]

Closing this one. It was ported to the (temporary) plugin repo in https://github.com/aristath/tt1-dark-mode/commit/45531aff8bfd0aebb1f573c5f743f02faa00339d