要实现页面切换深色模式并记住用户使用的模式，可以结合使用 JavaScript 和本地存储（LocalStorage 或 Cookies）。以下是一个简单的示例：
HTML 页面结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="content">
<h1>Hello, Dark Mode!</h1>
<p>This is some content on the page.</p>
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>
</div>
<script src="darkmode.js"></script>
</body>
</html>
CSS 文件（styles.css）：
/* 默认的浅色模式样式 */
body {
background-color: #f8f9fa;
color: #343a40;
}
/* 深色模式下的样式 */
body.dark-mode {
background-color: #343a40;
color: #f8f9fa;
}
JavaScript 文件（darkmode.js）：
// 检查用户是否已启用深色模式
function isDarkModePreferred() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// 切换深色模式
function toggleDarkMode() {
var body = document.body;
body.classList.toggle('dark-mode', !body.classList.contains('dark-mode'));
// 存储用户的主题偏好
var userPrefersDarkMode = body.classList.contains('dark-mode');
localStorage.setItem('dark-mode-preference', userPrefersDarkMode);
}
// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
// 从本地存储中获取用户的主题偏好
var userPrefersDarkMode = localStorage.getItem('dark-mode-preference');
// 如果用户有存储的偏好，应用之
if (userPrefersDarkMode !== null) {
document.body.classList.toggle('dark-mode', userPrefersDarkMode === 'true');
} else {
// 否则，根据系统主题偏好切换
toggleDarkMode();
}
});
// 监听系统主题变化，动态切换深色模式
window.matchMedia('(prefers-color-scheme: dark)').addListener(function(event) {
// 仅当用户没有存储偏好时才切换
if (localStorage.getItem('dark-mode-preference') === null) {
toggleDarkMode();
}
});
darkmode.js 文件包含了用于切换深色模式的 JavaScript 代码。当页面加载时，它首先尝试从本地存储中获取用户的主题偏好，并根据用户的存储偏好或系统主题偏好切换样式。用户可以通过按钮手动切换深色模式，并存储用户的偏好到本地存储中。
本站原创内容，如需转载请注明来源：https://www.liutonghui.com/174.html
评论列表（2条）
不错
回复 雾中看月影：加油！