作者： 启鑫

1. 编辑主题的 functions.php 文件

1. 编辑到您当前使用的主题目录，通常位于 wp-content/themes/your-theme-name/
2. 找到 functions.php 文件并使用文本编辑器打开它。

2. 添加代码

将代码粘贴到 functions.php 文件的末尾，确保不要覆盖任何现有的代码

// Color Change
function add_dark_mode_toggle_script() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const toggleBtn = document.createElement("button");
            toggleBtn.id = "dark-mode-toggle";
            toggleBtn.innerHTML = "🌙"; // 默认显示月亮（暗色模式）
            toggleBtn.classList.add("dark-mode-btn");
            document.body.appendChild(toggleBtn);

            function toggleDarkMode() {
                if (document.body.classList.contains("dark-mode")) {
                    document.body.classList.remove("dark-mode");
                    localStorage.setItem("theme", "light");
                    toggleBtn.innerHTML = "🌙"; // 切换回暗色模式
                } else {
                    document.body.classList.add("dark-mode");
                    localStorage.setItem("theme", "dark");
                    toggleBtn.innerHTML = "☀️"; // 切换回亮色模式
                }
            }

            toggleBtn.addEventListener("click", toggleDarkMode);

            if (localStorage.getItem("theme") === "dark") {
                document.body.classList.add("dark-mode");
                toggleBtn.innerHTML = "☀️"; // 初始时使用亮色模式图标
            }
        });
    </script>

    <style>
        /* 风格切换按钮 */
        .dark-mode-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: #FF6F61; /* 温暖的橙色按钮背景 */
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            transition: background 0.3s, transform 0.2s;
        }

        .dark-mode-btn:hover {
            background: #FF4C29; /* 深橙色悬停 */
            transform: scale(1.1);
        }

        body.dark-mode {
            background-color: #000000; /* 黑色背景 */
            color: #FFFFFF; /* 白色文字 */
        }

        body.dark-mode a {
            color: #FF9F5F; /* 浅橙色链接 */
        }

        body.dark-mode h1, 
        body.dark-mode h2, 
        body.dark-mode h3, 
        body.dark-mode h4 {
            color: #FF6F61; /* 温暖的橙色标题 */
        }

        body.dark-mode blockquote {
            border-left: 5px solid #FF6F61; /* 温暖的橙色引用框 */
            background: rgba(255, 111, 97, 0.1); /* 橙色浅背景 */
            padding: 12px 15px;
        }

        /* 按钮样式 */
        body.dark-mode .dark-mode-btn {
            background: #FF6F61; /* 温暖的橙色按钮 */
            color: #FFF;
        }

        /* 按钮悬停效果 */
        body.dark-mode .dark-mode-btn:hover {
            background: #FF4C29; /* 深橙色悬停 */
        }
    </style>
    <?php
}
add_action('wp_footer', 'add_dark_mode_toggle_script');

3. 效果演示

• 清除您的浏览器缓存。
• 访问您的 WordPress 网站。
• 您应该会在页面右下角看到一个带有月亮图标的按钮。
• 点击按钮，网站应该切换到暗黑模式。再次点击，切换回亮色模式。