网站深色浅色切换案例-单页面，非全局。

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark/Light Mode Example with Div Boxes</title>
    <style>
        /* 默认的浅色模式 */
        body {
            background-color: rgb(235, 240, 246); /* 浅色背景 */
            color: rgb(31, 41, 55); /* 浅色模式下的字体颜色 */
            transition: background-color 0.3s, color 0.3s;
            font-family: Arial, sans-serif;
        }

        /* 深色模式样式 */
        body.dark-mode {
            background-color: rgb(31, 41, 55); /* 深色背景 */
            color: rgb(235, 240, 246); /* 深色模式下的字体颜色 */
        }

        /* 按钮样式 */
        .theme-toggle-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #008CBA;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .theme-toggle-btn:hover {
            background-color: #005f73;
        }

        /* 盒子容器 */
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px;
        }

        /* 单个盒子样式 */
        .box {
            width: 150px;
            height: 150px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            font-size: 18px;
            color: white;
            transition: background-color 0.3s;
        }

        /* 浅色模式下的盒子颜色 */
        .box.box1 {
            background-color: #ff6f61; /* 浅色的红 */
        }
        .box.box2 {
            background-color: #6ec1e4; /* 浅色的蓝 */
        }
        .box.box3 {
            background-color: #ffd966; /* 浅色的黄 */
        }
        .box.box4 {
            background-color: #93c47d; /* 浅色的绿 */
        }

        /* 深色模式下的盒子颜色 */
        body.dark-mode .box.box1 {
            background-color: #b34747; /* 深色的红 */
        }
        body.dark-mode .box.box2 {
            background-color: #3b82f6; /* 深色的蓝 */
        }
        body.dark-mode .box.box3 {
            background-color: #f59e0b; /* 深色的黄 */
        }
        body.dark-mode .box.box4 {
            background-color: #10b981; /* 深色的绿 */
        }

    </style>
</head>
<body>
<button class="theme-toggle-btn" id="theme-toggle">当前是浅色模式</button>

<h1 style="text-align: center;">深色/浅色模式切换示例</h1>
<p style="text-align: center;">背景色和盒子颜色根据模式变化。</p>

<!-- 盒子模块 -->
<div class="container">
    <div class="box box1">盒子 1</div>
    <div class="box box2">盒子 2</div>
    <div class="box box3">盒子 3</div>
    <div class="box box4">盒子 4</div>
</div>

<script>
    const toggleButton = document.getElementById('theme-toggle');
    const bodyElement = document.body;

    // 检查用户上次选择的主题
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        bodyElement.classList.toggle('dark-mode', savedTheme === 'dark');
        updateButtonText();
    } else {
        // 如果没有保存的主题，则根据用户系统的主题偏好设置
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            bodyElement.classList.add('dark-mode');
        }
        updateButtonText();
    }

    // 切换主题模式的函数
    toggleButton.addEventListener('click', () => {
        bodyElement.classList.toggle('dark-mode');
        const isDarkMode = bodyElement.classList.contains('dark-mode');
        localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
        updateButtonText();
    });

    // 更新按钮的文字
    function updateButtonText() {
        const isDarkMode = bodyElement.classList.contains('dark-mode');
        toggleButton.textContent = isDarkMode ? '深色模式' : '浅色模式';
    }
</script>
</body>
</html>