实现主题颜色切换
components/theme.less,跟据@theme读取主题布局
@theme: dark;
.dark-theme (@transparency) when (@theme = default) {
color: rgba(0, 0, 0, @transparency);
}
.dark-theme (@transparency) when (@theme = dark) {
color: rgba(255, 255, 255, @transparency);
}
.dark-theme-color (@transparency) when (@theme = default) {
color: rgba(0, 0, 0, @transparency);
}
.dark-theme-color (@transparency) when (@theme = dark) {
color: rgba(255, 255, 255, @transparency);
}
引用theme.less
<style lang="less" scoped>
@import '~@comp/theme.less';
.title {
.dark-theme-color(0.85);
font-size: 16px;
font-weight: 500;
margin-bottom: 16px;
}
</style>
需先在vue.config.js做配置
chainWebpack: (config) => {
config.resolve.alias
.set('@$', resolve('src'))
.set('@api', resolve('src/api'))
.set('@assets', resolve('src/assets'))
.set('@comp', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@layout', resolve('src/layout'))
.set('@static', resolve('src/static'))
这样就可以实现主题化
------------------------------分割线--------------------------------------
这里有一个问题,就是有用到theme.less都要引入一次,很不方便
接下来实现全局加载theme.less
首先用npm或者yarn这三个
vue-cli-plugin-style-resources-loader
style-resources-loader
sass-resources-loader(前面两个装完不生效的话,可以尝试装它)
然后在vue.config.js新增pluginOptions配置
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, 'src/assets/css/theme.less')]
}
}
最后将theme.less移到src/assets/css/重新 run 一下就可以了
后面会讲如何通过点击切换主题
https://segmentfault.com/a/1190000016047076
https://blog.csdn.net/u013884068/article/details/78186798
https://blog.csdn.net/LuckyMon/article/details/89923822
https://segmentfault.com/a/1190000016061608
先备份一下参考资料