要保存网站的暗模式偏好,可以使用浏览器的本地存储功能(LocalStorage 或 Cookie)来存储用户的选择。下面是一个使用 JavaScript 和 LocalStorage 的示例代码:
// 检查用户之前是否选择了暗模式
function checkDarkModePreference() {
// 检查本地存储中是否存在 'darkMode' 键
if (localStorage.getItem('darkMode')) {
// 如果存在,获取存储的值并设置暗模式样式
const darkMode = localStorage.getItem('darkMode');
setDarkMode(darkMode);
}
}
// 设置暗模式样式
function setDarkMode(darkMode) {
// 根据用户选择的值设置相应的样式
if (darkMode === 'true') {
// 将网站的样式设置为暗模式
document.body.classList.add('dark-mode');
} else {
// 将网站的样式设置为默认模式
document.body.classList.remove('dark-mode');
}
}
// 切换暗模式
function toggleDarkMode() {
// 检查当前是否处于暗模式
const isDarkMode = document.body.classList.contains('dark-mode');
// 切换样式并保存用户选择到本地存储
if (isDarkMode) {
// 从暗模式切换到默认模式
document.body.classList.remove('dark-mode');
localStorage.setItem('darkMode', 'false');
} else {
// 从默认模式切换到暗模式
document.body.classList.add('dark-mode');
localStorage.setItem('darkMode', 'true');
}
}
// 初始化
checkDarkModePreference();
上面的代码中,checkDarkModePreference
函数首先检查本地存储中是否存在 'darkMode' 键,如果存在则获取存储的值并设置暗模式样式。setDarkMode
函数用于根据用户选择的值设置相应的样式。toggleDarkMode
函数用于切换暗模式,如果当前处于暗模式,则切换到默认模式,并将用户选择保存到本地存储中;如果当前处于默认模式,则切换到暗模式,并将用户选择保存到本地存储中。最后,在初始化时调用 checkDarkModePreference
函数来加载用户之前的选择。