如何检测浏览器是否支持暗模式

Question

我们可以使用prefers-color-scheme: dark来检测暗模式是否激活：

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

是否有方法检测浏览器是否完全支持黑暗模式？(所谓“支持黑暗模式”，意思是浏览器自动更改网页的默认背景/文本颜色)。

在CSS中，我们可以使用

color-scheme: dark;

然而，一些浏览器(用于Android的Firefox)会忽略它。因此，我想隐藏主题选择，如果黑暗模式是不可用的。

Answer 1

我目前的解决方案是在暗模式和光模式之间切换，并检查默认颜色是否在这些模式之间发生了更改：

​

const hasDarkMode = function()
{
  const el = document.createElement("div");
  el.style.display = "none";
  document.body.appendChild(el);
  let color;
  /*canvastext - doesn't work in Samsung Internet, initial/unset - doesn't work in Firefox*/
  for(let i = 0, c = ["canvastext", "initial", "unset"]; i < c.length; i++ )
  {
    el.style.color = c[i];
    el.style.colorScheme = "dark";
    color = getComputedStyle(el).color;
    el.style.colorScheme = "light";
    color = color != getComputedStyle(el).color;
    if (color)
      break;
  }
  document.body.removeChild(el);
  return color;
}();

console.log("Dark mode supported:", hasDarkMode);

​

这可能不是最优雅的解决方案，但它似乎正在起作用。

通过@connexo的注释，我们也可以使用：

​

const hasDarkMode = CSS.supports("color-scheme", "dark");

console.log("Dark mode supported:", hasDarkMode);

@supports (color-scheme: dark)
{
  .no-dark-mode
  {
    display: none;
  }
}

<div>Dark mode is <span class="no-dark-mode">not </span>available</div>

​