Use CSS filters to optimize photos for dark mode

Whether you’re working on dark mode or simply have inverted-color surfaces in your design, there’s a good chance you have some photography in use: portraits, avatars, background images.

Apple’s Human Interface Guidelines covers dark more, and recommend “making sure full-color images look good” by “modifying the asset or create separate light and dark assets” when needed.

Apple is making this recommendation with mostly drawings and icons in mind, but let’s look at a different use case. Photography. There’s a good chance you’re showing profile pictures in your app or web site, but I think the same .

If you’re displaying small rounded avatars, you’re probably ok: even if their brightness is high for dark environments, they’re small and the impact is limited.

But imagine a portrait taken in a well-lit studio and light background, displayed in large size against a pitch black background. Cut away the background and your photo will look completely different when the background changes.

Here, let me use my own portrait as an example. Not that I’m so obsessed with my own face, but because it demonstrates the situation quite well.

The image on the left and right are the same, but on the left the same colors look washed-out because of the dark background. The portrait in the middle has been adjusted with CSS filters.

Notice the difference? It’s subtle, and perhaps in a Medium post like this it’s hard to see the rationale. But on a dark mode experience, a portrait taken in a well-lit studio and light background, the brightness and contrast with the dark background can be striking.

Solution

This could be solved in many different ways. The obvious way is to make multiple edits of the photo, less obvious but scalable one might be to use a server-side image API to deliver an adjusted version of the API.

The easy, client-side solution, is CSS filters. You can use them, and for any browser that doesn’t support them, the feature degrades gracefully.

Try something like this.

.dark-mode .portrait {
  filter: saturate(105%) contrast(110%) brightness(0.9);
}

You can play around with the values to optimise your photos for the dark mode. I’m by no means a professional photographer, so I’ll welcome any and all tips on how to make either version look better!

Greyscale

You could also use CSS filters to display pictures in greyscale. Not something I would recommend as a general rule, but perhaps this makes sense for certain use cases. If you want to provide a calming experience, sometimes your photos might actually be non-essential content that you want to blend in more.

You can write something like this to remove the colors. Combine greyscale with other effects it that makes sense for your assets:

.dark-mode .portrait {
  filter: greyscale(100%) contrast(110%);
}

Summary

Using these catch-all filters won’t be as optimal as editing a dedicated asset for both environments. But you might not be in a position to do that: maybe you’re displaying portraits for a large amount of users, don’t have access to server-side functionality, or just don’t have the time.

Optimal? No. Better than nothing? Way better.