[RFC] Dark mode 🌗

[connor-baer]

Suggested technology

Dark mode has gained popularity thanks to the addition of OS-level dark modes in iOS, macOS, Android, and Windows. Regardless of the hype, dark mode has some real benefits:

• Less blue light could mean less disruption to the body’s sleep cycle if using the display in the evening.
• Light-on-dark text can be easier to read for some people, while others find it harder. Users should be able to choose between light and dark mode.

Potential downsides

Each component/page/feature needs to be tested in both light and dark mode. This duplicates the testing effort.

[hleote]

Amazing idea!!! I would love to contribute... When should we start..?? 😄 👍

The question is how to implement? Any ideas @connor-baer ? Since all Circuit's components need to be self-contained we will probably have to have flags... isDarkMode...? And then change the styled components based on that?

[connor-baer]

Haha, I love your enthusiasm! ❤️

I can think of two approaches:

1. Implement the style changes on the component level, as you suggested. The isDarkMode setting could be part of the theme to avoid the need for another React context. This is straightforward could be a non-breaking change.
2. Implement the style changes on the theme level. This would require an abstraction layer on top of the current theme (https://github.com/sumup-oss/design-tokens/issues/9) and would thus be a significant breaking change. It has several key benefits though: a JSON object is platform agnostic which makes it possible to use the light/dark design tokens with other web frameworks and the mobile apps. When combined with CSS variables (possible after https://github.com/sumup-oss/circuit-ui/issues/790), we could avoid a costly full-page React re-render when switching between modes and instead let the browser handle the style update. Plus, the abstraction layer enables more powerful theming beyond just darkmode.

Would love to hear your thoughts on the abstraction layer!

[hleote]

The abstraction layer sounds smart and definitely an improvement. 👍

What about doing Nr. 1 first and when the abstraction layer is implemented on the design-tokens project, we would do Nr.2? 🙂

I can try to start with Nr.1 on a HackDay... 🙂 WDYT?

[connor-baer]

Again, I appreciate your enthusiasm! 👏

However, I'd prefer to settle on one approach, for two reasons:

1. Implementing both approaches is more work, especially when it comes to maintaining and migrating between them.
2. It will take some time until we can actually start working on the dark mode since the design team needs to convert each component. This gives us plenty of time to lay the foundation with the abstraction layer.