1. 默認(rèn)配色：
: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 = '切換粉色主題';
}
});
