DesignDojo
1.3-composition · 04-dark-mode

Estimated time: 7 min

LightDark
Light to dark mapping

Remap Surface Depth

Use layered dark surfaces with subtle separation. One flat black background makes sections blend and weakens hierarchy.

Keep Semantic Colors Stable

Success, warning, and danger colors should keep meaning across themes. Adjust luminance so alerts remain readable without over-glow.

Tune Text Contrast by Role

Headings can run brighter than body text, while metadata should stay restrained. This keeps information order clear in low-light contexts.

Map each light surface role to a dark equivalent with preserved hierarchy steps.

Exercise

Convert one card layout to dark mode using role mapping:

  • Choose background, surface, and elevated surface values.
  • Set heading, body, and muted text tones separately.
  • Recheck success and error color readability on dark surfaces.
Semantic Contrast

Using theme-aware color and luminance so status meaning stays clear across light and dark surfaces.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Common Mistakes