Dark mode 🌑

For a designer, dark mode is larger than just flicking a switch and inverting some colors. The accessibility options completely change and your shades for structure and layout need to be re-evaluated - just for starters.

• Adaptable color palette

  What your product looks like visually with a dark setting

  ⭐️ A grey for your darkest color is more flexible in shadows and contrast than black

  ⭐️ The lower the saturation, the more accessible a color will be

  ⭐️ Ensure dark palette for backgrounds must allow white to be accessible

• Brand integrity

  Maintain your visual tone and style

  ⭐️ Invert monotone visuals

  ⭐️ Incorporate colours from your brand that are also present in light mode

• Elevation

  A way to structure elements to establish heirarchy

  ⭐️ Use lightness over shadows to give focus to certain containers or elements

• Switch to light mode

  Some products may be just one or the other, but if you offer both then allow the user to make a seamless switch between the two.