H5页面系统深色模式适配

1. 在css中设置CSS 媒体查询

PC web模式适配，在css中通过media查询进行适配即可生效。

/*日间模式*/
@media (prefers-color-scheme: light) {
  :root {
    --ui-primary: #B36C0F;
    html,body, .page {
      background-color: #fff0c6;
    }
  }
}
/*暗夜模式 */
/*  arr[0] * 0.299 + arr[1] * 0.587 + arr[2] * 0.114; */
@media (prefers-color-scheme: dark) {
  :root {
    --ui-primary: #fff;
    html,body, .page {
      background-color: #2D2500;
    }
    // .img {
    //   filter: brightness(65%);
    // }
  }
}
/*缺省模式*/
@media (prefers-color-scheme: no-preference) {
  :root {
    // something todo 
  }
}

2.  然而手机端开启跟随系统模式后，并不如我们所期望的。若无声明主题模式，默认将当前深色字体进行反转/增加透明度处理。即时已在css中添加media查询仍不生效。

此时需要声明color-scheme

2.1 meta声明color-scheme

在head中声明<meta name="color-scheme" content="light dark">，声明当前页面支持 light 和 dark 两种模式；

2.2 CSS声明color-scheme

:root {

        color-scheme: light dark;

}

3. 图片的适配

3.1 css brightness将图片调暗

        img {
             filter: brightness(65%);
        }

3.2 css  不同模式下url源变化

3.3 html中source标签设置不同模式下的URL源

<!-- 深色模式下的图片 -->
    <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
    <!-- 默认模式下的图片 -->
    <img src="light.jpg"/>

4. JS 判断并监听模式变化

handleThemeChange() {
      const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');

      // 判断是否匹配深色模式
      if (darkMode && darkMode.matches) {
        document.body.classList.add('dark');
      }

      // 监听主题切换事件
      darkMode && darkMode.addEventListener('change', (e) => {
        console.log('=====>change mode:', e);
        if (e.matches) {
          console.log('=====>e.matches:dark');
          document.body.classList.add('dark');
        } else {
          console.log('=====>e.matches:light');
          document.body.classList.remove('dark');
        }
      });
    }