当前位置: 首页 > news >正文

vue实现换肤功能

1、使用scss定义几种需要进行换肤的颜色,例如:

.font-color-theme{[color-theme="black"] & {color: #000}[color-theme="white"] & {color: #fff}
}

2、使用以下代码控制变化;

 	let colorType = localStorage.getItem('__color_theme__') || 'black';colorType = colorType == 'black' ? 'white' : 'black'document.documentElement.setAttribute('color-theme', colorType);localStorage.setItem('__color_theme__', colorType);

3、注意点!!!

如果想要让样式在css里面生效,例如改变底部tabbar的颜色,就需要使用@include,以vant的tabbar为例,其他按钮等样式同理

.van-tabbar-item--active{@include font-color-theme
}
http://www.lryc.cn/news/215463.html

相关文章:

  • 嵌入式软件工程师面试题——2025校招社招通用(八)
  • 背包笔记
  • 【Redis 速通】Redis 在 Linux 上的单机服务快速搭建与部署(附完整流程步骤及命令代码)
  • 前端JavaScript
  • C语言程序设计(第五版)谭浩强 第三章课后题答案
  • uni-app 解决钉钉小程序日期组件uni-datetime-picker不兼容ios问题
  • 【C++入门 三】学习C++缺省参数 | 函数重载 | 引用
  • 视频增强修复软件Topaz Video AI mac中文版支持功能
  • C# 使用Thread类建线程
  • asyncio协程框架
  • TSINGSEE智慧安防:AI人员入侵检测算法的工作原理及应用场景概述
  • Python:PDF转长图像和分页图像
  • 第48天:内置对象方法、 前端基础之BOM和DOM
  • CMake系列EP02: 构建可执行程序和库
  • 比亚迪今年的薪资。。
  • 【OpenCV实现图像找到轮廓的不同特征,就像面积,周长,质心,边界框等等。】
  • 数仓建模—数仓建设概论
  • Docker dnmp 多版本php安装 php8.2
  • Distilling the Knowledge in a Neural Network【论文解析】
  • 基于深度学习的自动驾驶汽车语义分割与场景标注算法研究。
  • 国内可用超丝滑ChatGPT4.0(附网址及微信入口)
  • linux入门---线程的同步
  • UI设计一定不能错过的4款常用工具
  • JavaScript 基础 - 第2天
  • MyBatis和JDBC异同点
  • 关于yarn安装一些东西报错时的处理方法
  • datagrip 使用自定义参数
  • css实现平行四边形按钮
  • Jmeter只能做性能测试吗?
  • Jmeter调用测试片段 —— 模块控制器