Vue使用scss变量控制主题色

原理将变量注入到body的样式里，改变主题色的时候修改变量的颜色即可。
scss变量 --color:red
放body的好处是全局可用。

if(sheme==="dark"){
 document.getElementsByTagName('body')[0].style.setProperty('--color', `#27202E`);
 }else{
 document.getElementsByTagName('body')[0].style.setProperty('--color', `#ffffff`);
 }

使用：

  div:hover {
    color: var(--color);
  }

法2：
scss 筛选器.
App.vue

<style lang="scss">
:root {
    
    
  --background-color: white;
  --text-color: black;
}
[theme="dark"] {
    
    
  --background-color: black;
  --text-color: white;
}
</style>

xxxpage.vue

    changeTheme() {
    
    
      this.theme = this.theme == "dark" ? "light" : "dark";
      document.documentElement.setAttribute("theme", this.theme);
    },

<style scoped lang="scss">
.home {
    
    
  background: var(--background-color);
}
</style>

[tips:scoped 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性]

跟随系统的做法，是否为深色模式。

	const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
	
	function darkModeHandler() {
    
    
	    if (mediaQuery.matches) {
    
    
	        console.log('现在是深色模式')
	    } else {
    
    
	        console.log('现在是浅色模式')
	    }
	}
	
	// 判断当前模式
	darkModeHandler()
	// 监听模式变化
	mediaQuery.addListener(darkModeHandler)

简易的颜色翻转，并剔除emoji 图片等影响。【prefers-color-scheme】是自动读取系统的主题是否为深色模式。跟随系统。

@media (prefers-color-scheme: dark) {
    
    
        body {
    
    
    filter: invert(100%);
    background-color: rgb(29, 32, 31) !important;
  }
  img,
  .astro-code,
  .emoji {
    
    
    filter: invert(100%);
  }
}