【代码】分享一个网页代码，根据时间自动切换开关灯效果

/* --- CSS 变量定义：默认是浅色模式 --- */
:root {
    /* 浅色模式变量 */
    --body-bg: #88d3e8;
    --body-color: #37474f; /* 主体文字颜色 */
    --nv-title-bg: #f8f5ffd6;
    --nv-title-link-color: #5f5f5f;
    --nv-title-a-hover: #fefffe;
    --album-category-active-color: #1d1d1f;
    --lightbulb-bg: #e9e9e9;
    --footer-bg:#f8f5ffd6;
    --login-1-bg: #efefef; /* 新增：登录按钮背景色 */
    --login-1-hover-color: #1d1d1f; /* 新增：登录按钮悬停文字颜色 */
}

/* 当 body 元素有 dark-mode-active 类时，覆盖上述变量为深色模式的值 */
body.dark-mode-active {
    /* 深色模式变量 */
    --body-bg: #3f4243;
    --body-color: #f9f9f9; /* 深色模式下主体文字颜色 */
    --nv-title-bg: #191919;
    --nv-title-link-color: #ffffff;
     --nv-title-a-hover: #3ec270;
    --album-category-active-color: #ffffff;
    --lightbulb-bg: #736f6f;
    --footer-bg: #232425;
    --login-1-bg: #35363a; /* 深色模式：登录按钮背景色 */
    --login-1-hover-color: #fff; /* 深色模式：登录按钮悬停文字颜色 */
}

body.dark-mode-active  {
    background-color: #212121;
    color: #c9c9c9;
    background-blend-mode: overlay;
}


/* --- 应用 CSS 变量到你的样式中，并添加过渡效果 --- */
body {
    font-family: sans-serif;
    margin: 0;
    min-height: 100vh;
    padding-bottom: 60px;
    box-sizing: border-box;
    /* 应用变量并添加过渡 */
   /* background-color: var(--body-bg);*/ 
    
    background-image: url(https://img.ximi.me/user/src/img.php?=1750729631_685a039f354f8.webp);
    background-size: cover; /* 让背景图片覆盖整个元素，可能会裁剪图片 */
    background-position: center center; /* 可选：确保图片居中显示 */
    background-repeat: no-repeat; /* 可选：防止图片重复 */
background-attachment: fixed;
    color: var(--body-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const modeToggleBtn = document.querySelector('.lightbulb'); // 确保选择器正确
        const body = document.body;
        const localStorageKey = 'themeMode';

        // 根据时间判断是否为夜晚（18:00 - 次日 6:00 视为夜晚）
        const isNightTime = () => {
            const now = new Date();
            const hour = now.getHours();
            return hour >= 18 || hour < 6;
        };

        // 应用主题的函数
        // isDark: true 为深色，false 为浅色
        // source: 标记主题来源 (用于调试，可选参数)
        const applyTheme = (isDark, source = 'manual') => {
            if (isDark) {
                body.classList.add('dark-mode-active');
            } else {
                body.classList.remove('dark-mode-active');
            }
            // 更新 localStorage 存储的用户偏好
            localStorage.setItem(localStorageKey, isDark ? 'dark' : 'light');

            // 调试输出：显示当前模式和来源
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const modeText = isDark ? '深色模式' : '浅色模式';
            console.log(`[主题] ${hours}:${minutes} - 已切换到 ${modeText} (来源: ${source})`);
        };

        // --- 页面加载时检查并应用主题逻辑 ---
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');

        if (isNightTime()) {
            applyTheme(true, '自动判断 (夜晚)');
            console.log(`[首次加载] ${hours}:${minutes} - 根据时间判断为夜晚 (${now.getHours()}h)，自动切换至深色模式。`);
        } else {
            applyTheme(false, '自动判断 (白天)');
            console.log(`[首次加载] ${hours}:${minutes} - 根据时间判断为白天 (${now.getHours()}h)，自动切换至浅色模式。`);
        }

        const savedTheme = localStorage.getItem(localStorageKey);
        if (savedTheme) {
            // 检查 localStorage 中是否有保存的偏好，如果有，覆盖时间设置
            applyTheme(savedTheme === 'dark', 'LocalStorage 偏好覆盖');
            console.log(`[加载] ${hours}:${minutes} - 检测到 LocalStorage 偏好 "${savedTheme}"，覆盖时间设置。`);
        }

        // --- 为灯泡图标添加点击事件监听器 ---
        if (modeToggleBtn) { // 检查按钮是否存在，避免空指针错误
            modeToggleBtn.addEventListener('click', () => {
                // 获取当前实际应用的模式（而不是从 localStorage 读，因为 applyTheme 已经更新了 localStorage）
                const isCurrentlyDark = body.classList.contains('dark-mode-active');
                // 切换到相反的模式，并标记为手动切换
                applyTheme(!isCurrentlyDark, '手动切换');
            });
        } else {
            console.error('错误：未找到主题切换按钮元素 (.lightbulb)。请检查 HTML 类名。');
        }


        // ... (确保这里包含所有其他您的 JS 代码，例如相册筛选和底部可见性逻辑)
    });
</script>