Booklet

author

Michael Filipiuk

Design

Dark Mode Masterclass

design

Design

|

DARK MODE MASTERCLASS
a comprehensive guide to dark mode Ul

  1. The Basics
    Background color
    Google recommends using #121212 for background color. They say to avoid pure black (#000000) because Of too high contrast. However. pure black is used by Apple in their dark mode.
  2. Elevation
    Elevate with white
    To elevate an element. use white objects with different opacity. Do not elevate with fancy shadows or different dark shades.
  3. Color
    Avoid saturation
    Use less saturated colors. Connecting highly saturated colors with dark elements makes your user's eyes bleed and hurt.
  4. Shadows
    Avoid inverting
    Do not invert shadows. They will go frorn black to white and will look cheap and weird. They will becorne a glow, not a shadow.
  5. Accessibility
    Accessibility first
    The biggest trap of dark mode - accessibility. Dark mode is better for the eyes. but only if applied correctly. Mind the contrast!

More booklets by Michael Filipiuk

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets