1. 默认配色:
:root {
--bg: white;
--text-color: #555;
--link-color: #639a67;
--link-hover: #205d67;
}
body {
background: var(--bg);
color: var(--text-color);
}
a,
a:link {
color: var(--link-color);
}
a:hover {
color: var(--link-hover);
}
2. 粉色主题配色
.pink-theme {
--bg: hotpink;
--text-color: white;
--link-color: purple;
--link-hover: orange;
}
3. 切换主题的代码:
const toggleBtn = document.querySelector('.toggle-theme');
toggleBtn.addEventListener('click', (e) => {
e.preventDefault();
if (document.body.classList.contains('pink-theme')) {
document.body.classList.remove('pink-theme');
toggleBtn.innerText = '切换正常主题色';
} else {
document.body.classList.add('pink-theme');
toggleBtn.innerText = '切换粉色主题';
}
});