vite-plugin-theme主题切换问题

使用技术

vite-plugin-theme

用于动态更改界面主题色的 vite 插件。

在 vite 处理 css 后,动态解析 css 文本内符合插件配置的颜色值的时候,从所有输出的 css 文件提取指定的颜色样式代码。并创建一个仅包含颜色样式的app-theme-style.css文件，动态插入到指定的位置(默认 body 底部),然后将所使用的自定义样式/组件库样式颜色替换为新的颜色,以达到动态更改项目主题色的目的

问题表现

测试环境和生产环境下，切换主题色为暗黑主题时，页面部分样式并没有切换到暗黑主题所对应的样式上，例如影响样式属性background，字体color等

同样影响到的样式在本地环境中则不受影响。

问题原因

1，选择器层级：暗黑主题下生成的暗黑样式，所属的选择器层级，没有原本的层级高，因此暗黑样式未能正常生效

2，样式作用域scoped：在业务组件中写样式时，为了避免样式互相影响污染，大多采用样式作用域scoped来解决这个问题，添加上scoped后，在编译后的选择器上都会添加一个属性选择器，来确定该选择器的唯一性，在vite-plugin-theme处理css 后,动态解析 css后，输出的 css 文件中，只有业务组件编译前的选择器，并没有编译后带着data属性选择器的选择器，因此，即使添加了暗黑主题选择器，在层级上也无法压过原本的样式

解决方案

 

1，通过修改vite-plugin-theme的配置，尝试提升编译后的选择器层级，以达到覆盖原有样式的目的

根据文档，尝试了wrapperCssSelector，未能编译出想要的选择器，翻进源码发现，wrapperCssSelector的生效需要判断resolveSelector函数，没有resolveSelector函数时，默认在暗黑主题属性选择器前添加wrapperCssSelector，因此删除了resolveSelector函数，只有wrapperCssSelector情况下再次编译，仍然没有编译出想要的选择器。

 

尝试resolveSelector，在输出结果选择器前添加html元素选择器，结果仍然没有编译出想要的选择器。

 

该方案未能解决问题

 

2，通过把需要修改的样式改为公共样式，重新定义一个类名，在需要主题样式切换的地方使用这些类名，主题切换样式避免写在scoped中，以样式变量@component-background为例，其他样式同理解决 

该方案已解决问题