关注互联网应用及运维技术的个人博客

使用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)
赞(0)
未经允许不得转载:飞天狒狒 » 使用prefers-color-scheme为网站增加深色模式

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址