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.
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![MooTools Star Ratings with MooStarRating]()
I've said it over and over but I'll say it again: JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser. One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...
![Using MooTools For Opacity]()
Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...
