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

日期：2023年8月12日 分类：教程  说明书 评论：发表评论 浏览：40

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

可以使用媒体查询来适配黑暗模式，利用 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);
}