在Web前端识别设备黑夜模式(dark mode)

通过JS可以识别设备是否是黑夜模式(dark mode)

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

可以监听黑夜模式的变化：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

浏览器兼容性

参考资料：

• https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers

• https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme