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

Question

我想检查 Chrome 是否处于暗色模式，以便相应地主题化我的扩展程序。

我已经检查了 Chrome API，但没有找到任何合适的选项。也许有一些诀窍可以找出状态。JavaScript 或 CSS 应该可以。

- Timo Graw

---

https://medium.freecodecamp.org/how-to-detect-a-users-preferred-color-scheme-in-javascript-ec8ee514f1ef - A.A.

只需添加 @media (prefers-color-scheme: dark) { /* 在此处添加您的深色主题 */ }。 - wOxxOm

Chrome 76 https://caniuse.com/prefers-color-schemeChrome 76 https://caniuse.com/prefers-color-scheme - Josh Lee

请参阅 Toggle Chrome Extension Icon based on light or dark mode browser?。 - milahu

Answer 1

在 CSS 中（可能的值包括：light，dark，no-preference，请参见CSS 文档），适用于所有现代浏览器。

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

跟进JS（所有现代浏览器都支持此功能）：

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

Bonus:

在 electron 中：

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

- Lukas Liesis