Seemingly each web site, dapp, and app presents a darkish mode desire, and thank goodness. Darkish mode is particularly helpful after I’m doing late evening coding, and even worse, buying and selling into altcoins. I am presently engaged on implementing a darkish theme on MetaMask and it acquired me to pondering: is there a means we will default to darkish mode if the consumer’s working system additionally defaults to darkish mode?

You may decide if the consumer’s working system prefers darkish mode with one fast line of code:

const prefersDarkMode = window.matchMedia("(prefers-color-scheme:darkish)").matches; // true

This code snippet takes benefit of the CSS prefers-color-scheme media question with JavaScript’s matchMedia API.

From a consumer expertise standpoint, you will have to be cautious in utilizing this snippet. This methodology is nice for setting a default for brand new customers with out altering the worth for present customers.