How to check if Dark Mode is enabled in Chrome extension

Question

I would like to check if chrome is currently in dark mode to theme my extension accordingly.

I've already checked the chrome api but did not find any suitable option. Maybe there is some trick to find out the status. JavaScript or CSS should be fine.

Answer 1

In CSS (possible values are: light, dark, no-preference css docs) works with all modern browsers:

@media (prefers-color-scheme: light) {  
  .themed {  
     background: white;    
     color: black;  
  }
}

Follow up with JS (all modern browsers support this):

window.matchMedia('(prefers-color-scheme: dark)')

Bonus:

In electron:

const { systemPreferences } = require('electron')
console.log(systemPreferences.isDarkMode())