此页面需要javascript支持,请在浏览器中启用javascript

Window.matchMedia()

css
js
共200个字,阅读时间 1 分钟
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://icebreaker.top/articles/2020/10/Window-matchMedia

看 tailwindcss-dark-mode 的时候看到这个 api

// prefers-dark.js
function checkDarkMode() {
  return (
    window.matchMedia &&
    window.matchMedia('(prefers-color-scheme: dark)').matches
  )
}

function watchDarkMode() {
  if (!window.matchMedia) return

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

function addDarkModeSelector() {
  if (checkDarkMode()) {
    document.documentElement.classList.add('mode-dark')
  } else {
    document.documentElement.classList.remove('mode-dark')
  }
}

addDarkModeSelector()
watchDarkMode()

看了一下参考资料,居然 dark 模式也变成一个媒体查询了

上面那段代码也主要是检测一个 dark mode 的事件,然后在 document.documentElement(<html>)上增加或者去掉 mode-dark 这个 class 然后就可以按照 dark:xxxx 变来变去了

那么下一个关键 手机上转很容易 pc 上怎么转? 我用 chrome ,查了一下

进入 chrome://flags 找到 Force Dark Mode for Web Contents 改成 Enabled 后右下角出现 Relaunch 重启浏览器 然后就发现 很多页面历史原因没做兼容丑的一比

ref:

MediaQueryList
prefers-color-scheme