如何实现页面颜色的自动切换：白天和黑夜都适应的技巧

要实现页面在白天和黑夜之间自动切换颜色，可以使用CSS中的@media查询和JavaScript来实现。

首先，使用@media查询来检测设备当前的亮度模式（light或dark）。例如，要检测当前的亮度模式是否为暗黑模式，可以使用以下CSS代码：

@media (prefers-color-scheme: dark) {
  /* 在此添加元素的CSS代码，以反映暗黑模式下的颜色 */
}

接下来，在JavaScript中，可以使用window.matchMedia()方法来检测当前的亮度模式，并根据模式设置相应的样式。例如，下面的代码将包装在一个立即执行函数中，它在页面加载时初始化页面颜色，并且每当亮度模式更改时，都会更新页面颜色：

(function() {
  var darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  
  function toggleDarkModeColors(e) {
    if (e.matches) {
      // 当前为暗黑模式，应用暗黑模式的样式
      document.documentElement.setAttribute('dark-mode', 'true');
    } else {
      // 当前不是暗黑模式，应用正常模式的样式
      document.documentElement.removeAttribute('dark-mode');
    }
  }
  
  darkModeMediaQuery.addEventListener('change', toggleDarkModeColors);
  toggleDarkModeColors(darkModeMediaQuery);
})();

其中，代码使用document.documentElement.setAttribute()方法应用dark-mode属性来切换页面的颜色方案。然后，在CSS中，使用以下代码来根据该属性选择正确的颜色方案：

/* 默认（正常）颜色方案 */
body {
  background-color: #fff;
  color: #222;
}

/* 暗黑颜色方案 */
html[dark-mode] body {
  background-color: #222;
  color: #fff;
}

当dark-mode属性存在于HTML元素上时，将应用暗黑颜色方案。