网站深色浅色切换案例-单页面，非全局。
<!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>
原文地址：https://blog.csdn.net/weixin_52236586/article/details/142420558
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！