October 1, 2022

Robotic Notes

All technology News

Detect Dark Mode Preference with JavaScript

2 min read

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.

Website performance monitoring
Website performance monitoring
Website performance monitoring
Website performance monitoring
  • Facebook Open Graph META Tags

    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 towards their Facebook pages instead of the corporate websites directly. And of course there are Facebook “Like” and “Recommend” widgets on every website. One …

  • LightFace: Facebook Lightbox for MooTools

    LightFace: Facebook Lightbox for MooTools

    One of the web components I’ve always loved has been Facebook’s modal dialogue. This “lightbox” isn’t like others: no dark overlay, no obnoxious animating to size, and it doesn’t try to do “too much.” With Facebook’s dialog in mind, I’ve created LightFace: a Facebook lightbox …

  • Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I could not be more excited. Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well. The …

  • Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript


Source link