waft容器1.4版本开始支持
waft前端框架 0.6.x版本开始支持

waft提供了基于css的media query的主题模式能力。可以通过W3C的提案 prefers-color-scheme 字段来生效不同的主题，如夜间模式和白天模式。

prefers-color-scheme

该字段是用来形容当前应用的主题色，light：白天，dark：夜间，no-preference：默认。

CSS示例

  1. .wrapper {
  2.   width: 100%;
  3.   height: 100%;
  4.   display: flex;
  5.   flex-direction: row;
  6.   justify-content: center;
  7.   align-items: center;
  8.   background-color: red;
  9. }
  11. @media (prefers-color-scheme: light){
  12.   .wrapper {
  13.     background-color: wheat;
  14.   }
  15. }
  17. @media (prefers-color-scheme: dark){
  18.   .wrapper {
  19.     background-color: black;
  20.   }
  21. }
  23. @media (prefers-color-scheme: no-preference){
  24.   .wrapper {
  25.     background-color: red;
  26.   }
  27. }

修改设置

import { document, PrefersColorSchemeTypes } from 'waft';
document.setPrefersColorScheme(PrefersColorSchemeTypes.dark);