Detect System Theme Choice Change Utilizing JavaScript

JavaScript and CSS enable customers to detect the consumer theme desire with CSS’ prefers-color-scheme media question. It is normal nowadays to make use of that desire to point out the darkish or mild theme on a given web site. However what if the consumer modifications their desire whereas utilizing your app?

To detect a system theme desire change utilizing JavaScript, it’s essential to mix matchMedia, prefers-color-scheme, and an occasion listener:

window.matchMedia('(prefers-color-scheme: darkish)')
      .addEventListener('change',({ matches }) => {
  if (matches) {
    console.log("change to darkish mode!")
  } else {
    console.log("change to mild mode!")
  }
})

The change occasion of the matchMedia API notifies you when the system desire modifications. You should utilize this occasion to mechanically replace the positioning’s show in actual time.

I really like that this API permits detecting consumer desire on a system degree. Catering to consumer wants is a crucial a part of creating an awesome net expertise!