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.

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.

• javascript
• google-chrome
• google-chrome-extension

• 1 medium.freecodecamp/… – A.A. Commented May 13, 2019 at 9:33
• 1 Simply add @media (prefers-color-scheme: dark) { /* your dark theme here */ } – woxxom Commented May 13, 2019 at 10:15
• Chrome 76 caniuse./prefers-color-scheme – Josh Lee Commented May 13, 2019 at 12:07
• see also Toggle Chrome Extension Icon based on light or dark mode browser? – milahu Commented Dec 28, 2022 at 11:00

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