Inspiration

Back when I was designing this website, I really wanted to pick a dark theme for this website. However, all things being equal, dark mode support has lesser readability. I thought of adding a dark mode toggle, but it came at a price of adding at least some clutter.

With the launch of iOS 13 and Android 10 both baking in dark mode support natively, many popular applications have rushed in with Dark Mode support.

CSS added a property to detect if the user has dark mode set and set the rules accordingly using the following property:

@media (prefers-color-scheme: dark) {
  //dark mode css rules here
}

@media (prefers-color-scheme: light) {
  //light mode css rules here
}

Things I learned

• Designing for dark mode is not as simple as inverting the colours, if a project involves shadows and depth, just switching the colours would not be enough
• Using a less saturated palette is ideal
• Different shades of grey can be used to communicate depth
• Use contrast ratios higher than 4.5:1 for ancillary text and 15.8:1 for the main text, for accesibility reasons
• All illustrations don’t go well with both the schemes