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.
Last updated 4 months ago
