Dark mode support

[SiAdcock]

tl;dr

Some of our platforms, notably the live apps, support dark mode. Some do not.

What is the best way to allow a platform to opt in to dark mode?

What's the problem?

Why don't we just add prefers-color-scheme: dark media queries to everything and let users decide whether they want to opt in to dark mode?

We should totally respect user preferences where possible. However, it's not a good idea to allow some components to render in dark mode and others (that are not dark mode compatible) to render in light mode. This would lead to some pretty weird colour combinations!

Until a platform fully supports dark mode, we should allow platforms to opt in to dark mode components. How do we do this?

Platform level

We could add a dark mode opt-in flag at the platform level, for instance through React context. Each component could check whether the flag has been set and if so, add dark mode CSS to that component accordingly. We could expose this as a <DarkModeProvider> component that consumers could add near the top of their component tree.

Component level

Each component could receive a prop enableDarkMode: boolean. It would be set to false by default to avoid breaking changes. If it gets set to true, the component will add dark mode CSS.

Discussions

What are your thoughts about either of these approaches?

Should we support one, or both? Or maybe there's a different way of doing this entirely?

I would be very interested to read your comments.

[JamieB-gu]

I think both approaches sound reasonable. The "Platform level" solution is a bit magic (globals reaching in and changing things), but the "Component level" solution is a little more boilerplate (extra props for Design System components). I think I lean a bit more toward the "Component level" option because I prefer things to be more explicit even if they require a tad more boilerplate.

This function may be useful for writing dark mode styles.