Casting Some Shade on Bright Content

Posted on Tuesday, April 6, 2021
Category: Design

My website has a dark theme, and that's cool. However, when I throw in some content that's mostly white, that said content is a wee bit of a shock to the eyes. It also detracts from the details of my website's darker features. The bright content I'm mostly talking about are screen snippets from other sites that have mostly white backgrounds.

To reduce the negative effects of brighter content on my website, I added a feature which lowers the brightness level of an image by 50%. With a simple mouseover the image will gradually increase its brightness level to normal so one's eyes can gently adjust. Take away the mouseover, and the image dims to its original state. On mobile devices, replace the mouseover with a touch. You can see this feature in action via the following example...

See it in Action

Hover your mouse over the image below to raise the brightness level to normal.

Blog Home
Page Top