<!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>
