
要实现网页暗黑模式切换,可以使用JavaScript代码。首先,需要获取当前页面的CSS样式,然后根据需要修改样式以实现暗黑模式。以下是一个简单的示例:
1. 在HTML文件中添加一个按钮,用于切换暗黑模式:
2. 在HTML文件的head标签内添加以下JavaScript代码:
javascript
document.addEventListener('DOMContentLoaded', function() {
var toggleButton = document.getElementById('toggle-dark-mode');
var body = document.body;
toggleButton.addEventListener('click', function() {
if (body.classList.contains('light-mode')) {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
} else {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
}
});
});
这段代码首先等待文档加载完成,然后获取ID为`toggle-dark-mode`的按钮和整个body元素。当点击按钮时,如果body元素当前是暗黑模式(`light-mode`),则移除`light-mode`类并添加`dark-mode`类;否则,移除`dark-mode`类并添加`light-mode`类。这样,用户可以通过点击按钮来切换网页的暗黑模式。