Dark mode theme

[tschbc]

Related component

Styles - Colours

Description

Create a new colour palette to be used for dark mode themes.

Rationale

Dark mode can be a more pleasant experience¹ than traditional light themes and has official support in major platforms (Windows, OSX, Android, iOS) and browsers.

¹ When done correctly, rather than relying on automatic plugins

Additional information

• https://www.nngroup.com/articles/dark-mode-users-issues/ (2023)
• https://www.nngroup.com/articles/dark-mode/ (2020)

[mkernohanbc]

Thanks @tschbc — we'll add this to our backlog for investigation. Out of curiosity, do you know of any examples of existing B.C. gov digital services that support dark mode? I'd be interested to see how they've approached it in production.

@bcgov/design-system-team some top-of-mind things to contemplate when we get here:

• Tokens: structural implications of implementing a dark mode (or any other alternate 'theme'.) How would these tokens fit into the overall schema?
• Components: how is setting an alternative theme controlled — at the component level, or globally? Is it a simple toggle, or something more configurable? Is 'supports dark mode' a line item in the DoD for each new component?

Some interesting avenues to explore here around theming more broadly.

[tschbc]

@mkernohanbc I don't know of any existing BC gov service that uses dark mode in production.

That being said, I'm currently working on a mobile app for the social sector and have had great interest in supporting dark mode since we started. The only reason we haven't made it yet is priority for other features.

Also, when you get around to it looking over it, the articles I linked have in-depth UX information and some implementation information to base off of.