看 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: