· demos
Using the CSS Mix Blend Mode for dark/light theme
CSS offers a nifty mix blend mode feature which can handle giving text a contrasting color based on the background color.
First, Let’s See It In Action!
Play around with the background colors and images of the demonstration widget below and watch the text color seemlessly adapt. The inputs and toggles are not controlling the text color properties, they are only changing the background properties. CSS’s mixblend mode is set on the text to use the difference value, so that the text will always find a hue that is opposite the background hue.
Demontration Widget:
HelloMix Blend Mode!
This is an uncommon css property but it has so much potential! It should be used more often I think.
An obvious use case is a way to make sure text has a high contrast for accessibility purposes no matter what background color is active. This could be paired with a light/dark mode toggle for easy adaptive, light/dark mode text.
There’s plenty of other possibilities for mix-blend-mode, so go experiment with it yourself and see what you can discover!