可以通过监听暗黑模式变化的事件,根据当前模式切换相应的背景颜色,从而解决暗黑模式对背景颜色的影响。
示例代码:
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', event => {
if (event.matches) {
document.body.style.backgroundColor = '#303030';
} else {
document.body.style.backgroundColor = '#f0f0f0';
}
});
上述代码监听了媒体查询 (prefers-color-scheme: dark)
的变化,当系统暗黑模式开启时,将背景颜色设置为 #303030
,否则设置为 #f0f0f0
。如此,当用户开启暗黑模式时,页面的背景颜色也会随之变化。