vue动态更改主题颜色的一些想法

 vue3 + vite引入scss全局变量

这篇文章是对上篇文章中的第一位评论者的问题的一些解决办法

​​​​​​​​​​​​​​

---

需求

上篇文章说了如何在已经引入element_ui的情况下设置自己的全局scss变量（globalStyle.scss）,但是评论区有位开发者说有些时需要在js中动态改变scss的变量，比如整体修改网页的主题颜色。

但是在vite.config.js中全局引入scss后再在单个文件中引入的话，系统就会提示重复load的错误。针对这种情况有了这篇文章。

一、出错情境

vite.config.js和vue的js片段中同时引入globalstyle.css

//vite.config.js


  css: {
    preprocessorOptions: {
      scss: {
                                          //👇这里已经引入了globalstyle.css
        additionalData: '@use "@/assets/css/globalstyle.scss" as *; @use "@/assets/css/test.scss" as *;'
      }
    }
  },

//test.vue 

//举个例子，代码不全

<script>
	import {onMounted,reactive,toRefs,ref,nextTick} from 'vue'
    //                            再次引入了👇
	import globalCss from '@/assets/css/globalstyle.scss'
	export default{
		setup(props,context) {
			BScroll.use(MouseWheel)
			const container = ref(null)
			const content = ref(null)
			let {scroll,contentScroller} = {}
			let srollY
			const tops = []
			const state = reactive({
				stepActivtIndex:1,
				tabIndex:1
			})
}
</script>

这种情形下就会出现重复引入的错误。

二、解决办法

1.设置一个全局存在的变量

在globalstyle.scss文件中加入:root属性

//globalstyle.scss
:root {
   --color-test-primary:#1B66FC;
}


$color-primary: var(--color-test-primary);

*,
*:before,
*:after {
  box-sizing: border-box;
}
span{
  color:$color-primary;
}

可以看到我们这里设置的是文章中所有的文字颜色都是主题色$color-primary

而$color-primary的值有来自于--color-test-primary的色值。

运行后，在styles一栏就会看到变量--color-test-primary：

2.动态更改root下的属性变量

如果要更改网站中所有文字的颜色，就要更改--color-test-primary的值。

代码如下

假设我们有个按钮，点击后会触发这个下面这个方法。将主题颜色从蓝色变为橙色

//这是个可以更换刚刚主题色的方法
function changePrimaryColor(){
				document.documentElement.style
				    .setProperty('--color-test-primary', '#FF4200');	
			}

---

总结

这个方法不算优雅，但是我目前也只能想出来这个方法了。就这样了，天要下雨了，我得撤了，bye