如何为WordPress主题实现跟随系统/浏览器的自动明暗模式？

需求 #

已完成WordPress主题的深色/浅色模式开发，现需添加自动模式：根据用户浏览器/系统的主题偏好自动切换明暗，效果参考Stack Overflow的对应功能。现有代码如下，需补充自动模式的实现逻辑。

现有代码 #

HTML #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body id="pageMode">
    <div class="dropdown main-selectMode">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            页面模式
        </a>
        <ul class="dropdown-menu">
            <li class="SystemMode"><a class="dropdown-item">系统自动模式</a></li>
            <li class="LightMode"><a class="dropdown-item">浅色模式</a></li>
            <li class="DarkMode"><a class="dropdown-item">深色模式</a></li>
        </ul>
    </div>
</body>

CSS #

#pageMode {
  background: #eee;
}

.bodyDark {
  background: #000 !important;
}

.main-selectMode {
  position: absolute;
  top: 20%;
  left: 2%;
}

JavaScript（未完成自动模式） #

let bodyMode = document.querySelector("#pageMode");
let SystemMode = document.querySelector(".SystemMode");
let DarkMode = document.querySelector(".DarkMode");
let LightMode = document.querySelector(".LightMode");

SystemMode.addEventListener("click", function () {
    // 自动模式逻辑待补充
});

DarkMode.addEventListener("click", function () {
    $(bodyMode).addClass("bodyDark");
    $(bodyMode).removeClass("bodyHalfLit");
});

LightMode.addEventListener("click", function () {
    $(bodyMode).removeClass("bodyDark");
    $(bodyMode).removeClass("bodyHalfLit");
});

完整实现方案 #

核心思路 #

• 用window.matchMedia('(prefers-color-scheme: dark)')检测系统主题偏好
• 用localStorage保存用户手动选择的模式，优先使用用户设置，无设置时跟随系统
• 监听系统主题变化，仅在用户选择自动模式时同步切换

完整JavaScript代码 #

let bodyMode = document.querySelector("#pageMode");
let SystemMode = document.querySelector(".SystemMode");
let DarkMode = document.querySelector(".DarkMode");
let LightMode = document.querySelector(".LightMode");

// 初始化主题：优先用户保存的设置，无则跟随系统
function initTheme() {
    const savedMode = localStorage.getItem('themeMode');
    if (savedMode === 'dark') {
        setDarkMode();
    } else if (savedMode === 'light') {
        setLightMode();
    } else {
        setSystemMode();
        // 监听系统主题变化，仅在自动模式下生效
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (localStorage.getItem('themeMode') === 'system') {
                e.matches ? setDarkMode() : setLightMode();
            }
        });
    }
}

// 设置深色模式
function setDarkMode() {
    $(bodyMode).addClass("bodyDark");
    $(bodyMode).removeClass("bodyHalfLit");
}

// 设置浅色模式
function setLightMode() {
    $(bodyMode).removeClass("bodyDark");
    $(bodyMode).removeClass("bodyHalfLit");
}

// 设置系统自动模式
function setSystemMode() {
    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    isDark ? setDarkMode() : setLightMode();
    localStorage.setItem('themeMode', 'system');
}

// 绑定点击事件
SystemMode.addEventListener("click", () => setSystemMode());

DarkMode.addEventListener("click", () => {
    setDarkMode();
    localStorage.setItem('themeMode', 'dark');
});

LightMode.addEventListener("click", () => {
    setLightMode();
    localStorage.setItem('themeMode', 'light');
});

// 页面加载完成后初始化主题
document.addEventListener('DOMContentLoaded', initTheme);

优化建议 #

• CSS增强体验：在JS未加载时，用媒体查询直接渲染系统主题样式，避免闪烁：

/* 默认浅色 */
#pageMode {
  background: #eee;
}

/* 系统深色时的默认样式（用户未手动选择时） */
@media (prefers-color-scheme: dark) {
  #pageMode:not(.bodyDark) {
    background: #000;
  }
}

• WordPress集成：可以把主题模式的设置保存到WordPress用户元数据中，实现跨设备同步（需要后端配合）。

内容的提问来源于stack exchange，提问作者php