Friday, May 24, 2024
HomeTechnologySoftwareDetect Dark Mode Preference with JavaScript

Detect Dark Mode Preference with JavaScript

Date:

Related stories

5 Ways Senior Women Can Be a Blessing to Others

Being a conduit of God’s love to others...

Animal Well And More Made May The Month Of Puzzle Games

At the beginning of this year, I could...

Wait, Since When Does Cher Have a Nose Ring? See Photos

I didn't start getting tattoos until 10 years...

Compass CEO Robert Reffkin Says The Luxury Market Is Back

The luxury market is back. That was Compass...
spot_imgspot_img

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.

  • Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I’ve even caught myself reading the post…

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don’t work in Firefox or Internet Explorer (correctly so, by spec) though…



Source link

Latest stories

spot_img