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

Question

我想检查 chrome 当前是否处于深色模式，以相应地为我的扩展设置主题。

我已经检查了 chrome api 但没有找到任何合适的选项。也许有一些技巧可以找出状态。JavaScript 或 CSS 应该没问题。

Answer 1

在 CSS 中（可能的值是：light、dark、no-preference css docs）适用于所有现代浏览器：

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

跟进 JS（所有现代浏览器都支持这一点）：

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

奖金：

在电子中：

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