使用prefers-color-scheme为网站增加深色模式

记录 | css, js, prefers-color-scheme, 深色模式, 夜间模式

前言

现如今已是2020年了,大部分手机APP(Android & iOS)都已经适配上了深色模式无缝衔接,那么网站能不能也弄上一个呢?prefers-color-scheme(CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色)恰能实现这个功能。

使用CSS判断

@media (prefers-color-scheme: dark)
@media (prefers-color-scheme: light)
@media (prefers-color-scheme: no-preference)

具体例子如下:

@media (prefers-color-scheme: dark) { 
  body { 
    background: #121212;
  }
}

使用JS判断

判断是否支持主题色:

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)

部分内容参考自:https://www.jianshu.com/p/06561bbb6118

吴尼玛

computer loser

可能感兴趣的文章

CSS 使图片水平居中

CSS 使图片水平居中

August 4th , 2019
点击撰写评论