Light/dark mode theming

[mattrosno]

Summary

Carbon currently has four color themes, but it is difficult to switch the themes at runtime (light/dark mode) or use different colors themes in different parts of a web page (aka inline theming, zoned theming.) With Carbon v11 dropping IE11 support, the experimental custom properties can become the primary means apply color.

Job stories

1. When delivering a light/dark mode feature, I want to do it without duplicated styles or stylesheet swapping to increase the performance of the application.
2. When delivering a light/dark mode feature, I want to reference the officially-supported way to achieve this without having to use experimental features so I can focus my time on what really matters.

Success measures

1. Product teams can implement light/dark mode by referencing the docs
2. Product teams can migrate light variants to the new theming layer tokens or contextual tokens

Sponsoring team

Carbon team

[mattrosno]

Epic:

• Theming Updates carbon#8408

Issues:

• Q2 2021 release: component color token specs carbon#8187
• Update 25% of components to use new design tokens (4/4) carbon#8303
• Add new tokens to theme package carbon#8238
• New color token layering models carbon#7743
• [Design] UI Shell - new color token spec carbon#8102