如何检查 Chrome 扩展程序中是否启用了暗模式

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())