vue 一键更换主题颜色

这里提供简单的实现步骤,具体看自己怎么加到项目中

我展示的是vue2 vue3同理

在 App.vue 添加 入口处直接修改

html 复制代码
#app { // 定义的全局修改颜色变量
  --themeColor:#008cff;
}
// 组件某些背景颜色需要跟着一起改变,其他也是同理
/deep/ .ant-btn-primary{
  background-color: var(--themeColor);
}

在某个页面,写一个方法或者是颜色选择器,提供修改的颜色

html 复制代码
updColor () {
                      // 修改app下的                   这个变量        这个颜色
      document.getElementById('app').style.setProperty('--themeColor', 'red')
    },

如果是单页面修改的颜色,或者是单个地方使用, 直接这样修改就可以了

html 复制代码
<style lang="less" scoped>
	.wrapper{
	  background-color: var(--themeColor);
	}
</style>

如果要实现保留修改颜色记录,可以放到vuex或者缓存去加载

相关推荐
田本初几秒前
浏览器缓存与协商缓存
前端·javascript·缓存
类人_猿1 小时前
ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布
前端·iis·asp.net·.net·http站点服务器
组态软件4 小时前
web组态软件
前端·后端·物联网·编辑器·html
前端Hardy5 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
汪小白JIY5 小时前
【VUE3】VUE组合式(响应式)API常见语法
vue.js·vue3·语法
loey_ln5 小时前
观察者模式和发布订阅模式
javascript·观察者模式·react.js
cnsxjean7 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5677 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海8 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆8 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程