<?xml version="1.0" encoding="utf-8"?>

Dark mode layers

Dark mode layers Bad Practice
Dark mode layers Best Practice

Dark mode transforms how materials interact with content and backgrounds. Materials maintain their distinct characteristics while adapting their properties to ensure visibility and reduce eye strain in low-light contexts.

In dark mode, materials adjust their transparency and vibrancy to preserve hierarchy. The system increases contrast where needed and softens harsh transitions, while ensuring materials remain distinguishable from one another. These adjustments maintain spatial relationships while creating a comfortable viewing experience.

Dark mode adaptations:

  • Reduced transparency levels
  • Adjusted blur intensity
  • Modified vibrancy effects
  • Refined shadow treatment
Improve your UX & Product skills with interactive courses that actually work