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.
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![Introducing MooTools HeatMap]()
It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking. With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...
![Display Images as Grayscale with CSS Filters]()
CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery. CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale.
Doing so requires the...
