CSS 夜间模式配置：如何从蓝色和红色主题切换到更舒适的夜间体验

要换成夜间模式，可以使用以下配置：

将原本的明亮模式的颜色改为深色，比如将蓝色改为深蓝色，将红色改为深红色。可以使用以下 CSS 代码：

body {
  background-color: #222;
  color: #eee;
}

a {
  color: #e6e6e6;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff;
}

.button {
  background-color: #444;
  color: #eee;
}

.blue {
  color: #00bfff;
}

.red {
  color: #ff3333;
}

添加夜间模式的开关。可以使用 JavaScript 在页面上添加一个按钮，点击按钮可以切换夜间模式和明亮模式。代码如下：

<button id='mode-switch' onclick='toggleMode()'>夜间模式</button>

<script>
function toggleMode() {
  var body = document.querySelector('body');
  var button = document.querySelector('#mode-switch');
  if (body.classList.contains('night-mode')) {
    body.classList.remove('night-mode');
    button.innerText = '夜间模式';
  } else {
    body.classList.add('night-mode');
    button.innerText = '明亮模式';
  }
}
</script>

在 CSS 中添加夜间模式的样式。可以使用以下 CSS 代码：

body.night-mode {
  background-color: #111;
  color: #ccc;
}

a {
  color: #999;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff;
}

.button {
  background-color: #333;
  color: #ccc;
}

.blue {
  color: #00ffff;
}

.red {
  color: #ff6666;
}

这样就可以实现夜间模式和明亮模式的切换了。可以根据自己的喜好调整颜色和样式。