Learning on Web Dev Open is free for all.

Design Craft > Colour with a point of viewLight and dark as one system
Phase 02Colour with a point of view101 of 434

Light and dark as one system

Not two stylesheets. One set of semantic tokens with two value sets underneath, and no hex below the second layer.

Build32 minAI implements

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Separate primitive colours from semantic tokens
  • Define both themes by swapping only the token values
  • Handle shadows, borders and images that break in dark mode
Ask the community

Loading…