在CSS和JS中應用深色模式

CSS應用深色模式

使用媒介查詢prefers-color-scheme，支持dark，light，no-preference三種模式。

@media (prefers-color-scheme: dark) { 
  body { 
    background: #121212;
  }
  article{
    color:rgba(255,255,255,.86);
  }
}

JS判斷深色模式

使用matchMedia判斷是否符合媒介。
返回一個MediaQueryList對象，該對象具備屬性matches和media，方法addListener和removeListener。
判斷是否支持主題色：

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  console.log('Browser doesn\'t support dark mode');
}

判斷是否處於深色模式：

if(window.matchMedia('(prefers-color-scheme: dark)').matches){
  //...
}

addListener接收一個MediaQueryList對象做爲參數。
爲深色模式添加監聽器，以響應系統切換到或切換出深色模式：

let listeners={
  dark:(mediaQueryList )=>{
    if(mediaQueryList.matches){
      alert('您切換到深色模式了！')
    }
  },
  light:(mediaQueryList)=>{
    if(mediaQueryList.matches){
      alert('您切換到淺色模式了！')
    }
  }
}

window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)

設計規範

參考設計規範：
Material Design的Dark Theme設計規範
iOS的Dark Mode設計規範