WordPress 网站适配黑暗模式 WP 主题监听系统夜间模式变化自动响应切换

宝藏归属：教程  说明书 发表观点：前往评论 浏览次数：23 次 更新时间：2023年8月12日 15:53:38

WordPress 黑暗主题的主要优势在于弱光环境下具有更高的可读性，黑暗模式降低了设备屏幕的亮度改善了视觉工程学并能在特定的光照条件下得到更好的调节，黑暗模式应避免使用饱和色即深色背景下的正文文本至少为 4.5:1，饱和色在深色背景下会产生光学振动从而可能会导致眼部疲劳，荒岛本次带来 WP 主题监听系统夜间模式变化自动响应切换教程。宝藏来自荒岛 - 一座藏有宝藏的小岛-https://x-imagine.com/wordpress-automatically-switch-to-night-mode.html

可以使用媒体查询来适配黑暗模式，利用 CSS 加入媒体判断即可，这样的好处是适配快。宝藏来自荒岛 - 一座藏有宝藏的小岛-https://x-imagine.com/wordpress-automatically-switch-to-night-mode.html

 // 系统未支持或用户未开启 Dark Mode 
body {
    background-color: white;
    color: black;
}
@media (prefers-color-scheme: dark) {
    // 系统支持且用户开启了 Dark Mode 
    body {
        background-color: black;
        color: white;
    }
}
 // 荒岛一座藏有宝藏的小岛

通过监听 matchMedia 的 change 事件，可以在用户切换深色 / 浅色模式的时候，将浏览器中已打开的页面自动切换为系统对应的模式。宝藏来自荒岛 - 一座藏有宝藏的小岛-https://x-imagine.com/wordpress-automatically-switch-to-night-mode.html

let media = window.matchMedia('(prefers-color-scheme: dark)');
let callback = (e) => {
    let prefersDarkMode = e.matches;
    if (prefersDarkMode) {
        // 荒岛一座藏有宝藏的小岛
    }
};
if (typeof media.addEventListener === 'function') {
    media.addEventListener('change', callback);
} else if (typeof media.addListener === 'function') {
    media.addListener(callback);
}