有没有办法知道 OS 是否支持网页中的暗模式？ （来自 JavaScript、CSS）

Question

有没有类似CSS.supports('dark-mode')的东西？

我试过这个：

try {

  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      // dark mode
  }

} catch (e) {
  alert('do not support dark mode');
}

但是 alert 永远不会 运行。

Answer 1

alert 不会 运行 因为您的 try 块中没有任何内容会引发错误。 if 条件 returns true/false，这意味着您需要一个简单的 if/else-statement:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
   // dark mode
} else {
  // light mode
}

如果您需要检测浏览器是否支持媒体查询字符串 prefers-color-scheme，那么您可能需要显式检查亮色和暗色：

function isPreferredColorSchemeSupported() {
  return (
    window.matchMedia &&
    (window.matchMedia('(prefers-color-scheme: light)').matches ||
      window.matchMedia('(prefers-color-scheme: dark)').matches)
  );
}

如果返回false，那么你就知道浏览器不匹配light或dark媒体查询，从中你可以推断浏览器没有'不懂媒体查询。

Answer 2

问题是它不匹配时不会抛出错误。

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      // dark mode
  } else { alert('do not support dark mode'); }