What's important to know

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


A way to structure elements to establish heirarchy

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

Optional additions

Not always necessary, but they can have their perks!

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.