Detect Dark Mode Preference with JavaScript
Seemingly every website, dapp, and app offers a dark mode preference, and thank goodness. Dark mode is especially useful when I'm doing late night coding, or even worse, trading into altcoins. I'm presently working on implementing a dark theme on MetaMask and it got me to thinking: is there a way we can default to dark mode if the user's operating system also defaults to dark mode?
You can determine if the user's operating system prefers dark mode with one quick line of code:
const prefersDarkMode = window.matchMedia("(prefers-color-scheme:dark)").matches; // true
This code snippet takes advantage of the CSS prefers-color-scheme media query with JavaScript's matchMedia API.
From a user experience standpoint, you'll need to be careful in using this snippet. This method is great for setting a default for new users without changing the value for existing users.
![5 Awesome New Mozilla Technologies You’ve Never Heard Of]()
My trip to Mozilla Summit 2013 was incredible. I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out. MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![pointer Media Query]()
As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become. In order to write good CSS, we need some indicator about device capabilities. We've used CSS media queries thus far, with checks for max-width and pixel ratios.
![HTML5 Input Types Alternative]()
As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you
start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...
