使用javascript为网页增加夜间模式

为了实现一个基本的夜间模式功能，我们可以通过JavaScript来切换网页的背景色和文字颜色。以下是一个简单的示例，展示了如何根据用户的选择来切换网页的日间和夜间模式。

首先，在HTML中添加一个按钮用于切换模式，并给这个按钮设置一个特定的类名或ID以便JavaScript可以轻松地找到它。

<button id="toggleMode">切换模式</button>

然后，在CSS中定义日间模式和夜间模式的样式。这里我们使用简单的类来区分它们，并在JavaScript中动态地添加或删除这些类。

/* 默认日间模式样式 */
body {
    background-color: #ffffff; /* 白色背景 */
    color: #000000; /* 黑色文字 */
}

/* 夜间模式样式 */
body.night-mode {
    background-color: #333333; /* 深灰色背景 */
    color: #ffffff; /* 白色文字 */
}

最后，使用JavaScript来监听按钮的点击事件，并根据当前是否应用了`night-mode`类来切换样式。

document.getElementById('toggleMode').addEventListener('click', function() {
    // 检查body是否有night-mode类
    if (document.body.classList.contains('night-mode')) {
        // 如果有，则移除night-mode类，切换到日间模式
        document.body.classList.remove('night-mode');
    } else {
        // 如果没有，则添加night-mode类，切换到夜间模式
        document.body.classList.add('night-mode');
    }
});

这段代码实现了基本的夜间模式功能。用户点击按钮时，网页的背景色和文字颜色会根据当前模式进行切换。你可以根据需要调整CSS中的样式来适应你的网页设计。