JZTXT

如何跟随系统主题切换

发布时间 2023-05-23 16:37:12作者: 10后程序员劝退师

主题切换的css写法 利用vue的全局性响应式，将当前主题放在localstroge，

利用根元素 document.doucumentElement.dataset.theme = theme.value

//暗色主题
html[data-theme='dark'] {
   --test-color: #000;
   --bg:#000
}

//默认亮色主题
：root {
   --test-color: #fff;
   --bg:#fff
}

如果需要根据系统来切换

第一种：css中提供了一个媒体查询功能

@media (prefers-color-scheme: dark){  //如果匹配上系统的颜色为 深色的话就执行下面的样式
  --bg：#000
  ...
}
  @media (prefers-color-scheme: light){  //如果匹配上系统的颜色为 深色的话就执行下面的样式
  --bg：#fff
  ...
}

 第二种：js 

const match = matchMedia('(prefers-color-scheme:dark)')

matches:false 表示没有被匹配

const match = matchMedia('(prefers-color-scheme:dark)')

function followOs(){
  if(match.matches){
      document.documentElement.dataset.theme = 'dark'
  }else{
      document.documentElement.dataset.theme = 'light'
  }
}

watchEffect(() => {
   localStorage.setItem('key', theme.value)
    if(theme.value == 'os'){  //如果用户选择的跟随系统
        followOs()
        match.addEventListener('change',followOs)
    } else {
        document.documentElement.dataset.theme = theme.value
        match.removeEventListener('change',followOs())
    }
   
})