首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

使用lessu002Fcss 动态的切换主题色实现换肤功能

这是我参与「掘金日新计划 · 8 月更文挑战」的第11天,点击查看活动详情 >> 前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 看需求是什么 一般来说换肤的需求分为两种...一个全局class控制样式切换 切换的时候js控制样式的切换 JS改变href属性值切换样式表,例如: <link id="skincolor" href="skin-default.css"...实现 demo 对于制定动态色值换肤的实现# 如果是要实现动态换肤,自定义色值,那上面的几种方式就不适合了。...把关键词再换回刚刚生成的相应的颜色值:链接 直接在页面上加 style 标签,把生成的样式填进去:链接 看这个实现,还是比较麻烦的,想看看还有没有更优雅的方法来实现 Ant Design 的更换主题色功能是用...src/less/public.less" /> 更改主题色事件 // color 传入颜色值 handleColorChange (color) { less.modifyVars({ // 调用

1.1K60

实战教程 | 微信小程序动态换肤解决方案

方案和问题 一般来说,有两种解决方案可以解决小程序动态换肤的需求: 小程序内置几种主题样式,通过更换类名来实现动态改变小程序页面的元素色值; 后端接口返回色值字段,前端通过 内联 方式对页面元素进行色值设置...type: String, value: '' }, // 是否为辅助按钮,更换辅色皮肤 secondary: { type: Boolean...解决思路就是: 将接口获取到的皮肤色值属性,动态设置到需要换肤的元素的某个属性上,本质上就是替换元素的css属性的属性值,方法就是通过给当前Page和Component对象的js文件嵌入提前设置好的css...padding: 20px; color: var(--main-color); } .skinBtn { margin-top: 10px; float: left; } 【初始化】—— 接口调用...这里就是在小程序的启动文件 app.js 调用皮肤请求接口,初始化皮肤 // app.js const { getSkinSettings } = require('.

2.1K30
领券