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

Posted 2023-03-06

【中文标题】如何检测浏览器是不是支持暗模式

【英文标题】：How to detect if a browser supports dark mode如何检测浏览器是否支持暗模式

【发布时间】：2021-12-25 14:34:39

【问题描述】：

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

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

有没有办法检测浏览器是否支持暗模式？ （“支持暗模式”是指浏览器自动更改网页的默认背景/文本颜色）。

在 CSS 中，我们可以强制使用暗模式

color-scheme: dark;

但是，某些浏览器（android 版 Firefox）会忽略它。因此，如果深色模式不可用，我想隐藏主题选择。

【问题讨论】：

不确定是否检测，但您可以在这里轻松快速查看caniuse.com/?search=color%20scheme

何时可用是什么意思？，暗模式是您添加到网站的东西。如果您想检测浏览器是否可以检测到操作系统模式，请按照您在问题中提到的操作。有什么我想念的吗？

@MohamedAbdallah 我们可以使用 color-scheme: dark; 在 CSS 中强制使用暗模式，但并非所有浏览器都会切换到暗模式（即 Android Firefox）。

您可以尝试基于 CSS 的@supports (color-scheme: dark) ... 进行检测。

@connexo 很有趣。任何想法为什么在使用任何字符串而不是 dark 时它是“真实的”？例如@supports (color-scheme: blahblahblah) background-color: red;

【参考方案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>

【讨论】：

为什么你更喜欢const hasDarkMode = function() 而不是function hasDarkMode ()？

因为它不需要执行多次。