📌  相关文章
📜  javascript 查看 chrome 是否处于暗模式 - Javascript (1)

📅  最后修改于: 2023-12-03 15:16:13.763000             🧑  作者: Mango

JavaScript查看Chrome是否处于暗模式

在使用JavaScript编写网页时,我们可能需要检测用户的Chrome浏览器是否启用了暗模式。暗模式可以使网页在用户设备开启了深色模式时能够适应并更好地展示内容。

以下是一个用于检测Chrome暗模式的JavaScript函数,它会根据不同的Chrome浏览器版本和操作系统返回不同的结果:

/**
 * 检测Chrome浏览器是否处于暗模式
 * @returns {boolean} 返回true表示处于暗模式,返回false表示未启用暗模式
 */
function isChromeInDarkMode() {
  // 检测Chrome浏览器版本
  // 参考:https://stackoverflow.com/a/13348618
  const match = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
  const chromeVersion = match ? parseInt(match[2], 10) : null;

  // 检测操作系统是否启用暗模式
  // 参考:https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
  const isDarkModeEnabled = window.matchMedia("(prefers-color-scheme: dark)").matches;

  // 根据Chrome浏览器版本和操作系统返回是否启用了暗模式
  if (chromeVersion >= 76) {
    // Chrome 76及更高版本支持 prefers-color-scheme 媒体查询
    return isDarkModeEnabled;
  } else if (chromeVersion >= 73) {
    // Chrome 73到75版本支持启用 flag
    return isDarkModeEnabled || window.matchMedia("(forced-colors: active)").matches;
  } else {
    // 旧版本暂不支持暗模式
    return false;
  }
}

这个函数使用了navigator.userAgent来获取Chrome浏览器的版本号,并使用window.matchMedia来检测操作系统是否启用了暗模式。根据Chrome版本和操作系统的支持情况,函数会返回相应的结果。你可以在调用该函数后根据返回值来执行不同的逻辑,以适应用户的暗模式设置。

以上函数返回一个布尔值,true表示浏览器处于暗模式,false表示未启用暗模式。

使用示例:

const isDarkMode = isChromeInDarkMode();
if (isDarkMode) {
  console.log("Chrome处于暗模式");
} else {
  console.log("Chrome未启用暗模式");
}

注意:这段代码只适用于Chrome浏览器,其他浏览器可能具有不同的检测方式。

希望这个简单的代码片段能够帮助你在JavaScript中检测Chrome浏览器是否处于暗模式!