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

js替换css主题变量并切换iconfont文件

iconfont不止有单色、双色的图标,还有很多【多色】的图标,于是不能【去色】,只能手动替换primary

新建一个iconfont,替换过主题色的,然后与旧的iconfont配合切换使用

主要如下:

reqiure之前必须【清除缓存】,否则无法生效,require加载机制如上图所示

const onChangeYellow = (index) => {if (appPrimary.value === "yellow") {// 重新设置主题色document.getElementsByClassName("skin-variant--semi-dark")[0].style.setProperty("--v-primary-base", "#EDE20B");document.getElementsByClassName("v-main")[0].style.setProperty("--v-primary-base", "#323232");vm.$vuetify.theme.themes.dark.primary = "#323232";// document.getElementsByTagName('html')[0].className = appPrimary.valuedocument.documentElement.className = appPrimary.value;// 清除缓存delete require.cache[require.resolve("@/assets/yellow-iconfont/iconfont")];delete require.cache[require.resolve("@/assets/yellow-iconfont/iconfont.css")];// 引入新的iconfont文件require("@/assets/yellow-iconfont/iconfont");require("@/assets/yellow-iconfont/iconfont.css");} else {document.getElementsByClassName("skin-variant--semi-dark")[0].style.removeProperty("--v-primary-base");document.getElementsByClassName("v-main")[0].style.removeProperty("--v-primary-base");// document.getElementsByTagName('html')[0].className = ''document.documentElement.className = "";// document.getElementsByClassName('yellow-iconfont')[0].remove()delete require.cache[require.resolve("@/assets/iconfont/iconfont")];delete require.cache[require.resolve("@/assets/iconfont/iconfont.css")];require("@/assets/iconfont/iconfont");require("@/assets/iconfont/iconfont.css");}
};

相关文章:

  • 11-pg内核之锁管理器(六)死锁检测
  • JavaScript中的输出方式
  • SSM框架学习(四、SpringMVC实战:构建高效表述层框架)
  • MAC的几个常见的快捷方式
  • Llama 3.2来了,多模态且开源!AR眼镜黄仁勋首批体验,Quest 3S头显价格低到离谱
  • LLM - 使用 vLLM 部署 Qwen2-VL 多模态大模型 (配置 FlashAttention) 教程
  • 测试面试题:请你分别介绍一下单元测试、集成测试、系统测试、验收测试、回归测试
  • CSS3 字体
  • 【matlab】读取.rec文件格式,脑电数据格式(Trodes)文件格式处理
  • 京东快递员的创新服务
  • 【网站打包app】Prime Web 1.0.10 – 将网站转换为 Flutter 应用程序 |Web View 应用程序 |Web 到 App
  • Tair简介
  • MySQL—触发器详解
  • rabbitMQ 简单使用
  • 9.29总结
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • Apache Spark Streaming 使用实例
  • create-react-app做的留言板
  • CSS3 聊天气泡框以及 inherit、currentColor 关键字
  • express如何解决request entity too large问题
  • java中具有继承关系的类及其对象初始化顺序
  • nginx 配置多 域名 + 多 https
  • nodejs调试方法
  • nodejs实现webservice问题总结
  • PAT A1092
  • Rancher如何对接Ceph-RBD块存储
  • Spring声明式事务管理之一:五大属性分析
  • underscore源码剖析之整体架构
  • 百度贴吧爬虫node+vue baidu_tieba_crawler
  • 从零开始的webpack生活-0x009:FilesLoader装载文件
  • 多线程事务回滚
  • 分布式任务队列Celery
  • 如何用vue打造一个移动端音乐播放器
  • 湖北分布式智能数据采集方法有哪些?
  • # Swust 12th acm 邀请赛# [ A ] A+B problem [题解]
  • (2/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (Charles)如何抓取手机http的报文
  • (MIT博士)林达华老师-概率模型与计算机视觉”
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (Redis使用系列) Springboot 在redis中使用BloomFilter布隆过滤器机制 六
  • (八)Flask之app.route装饰器函数的参数
  • (二刷)代码随想录第15天|层序遍历 226.翻转二叉树 101.对称二叉树2
  • (函数)颠倒字符串顺序(C语言)
  • (七)Appdesigner-初步入门及常用组件的使用方法说明
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...
  • (原創) 人會胖會瘦,都是自我要求的結果 (日記)
  • **Java有哪些悲观锁的实现_乐观锁、悲观锁、Redis分布式锁和Zookeeper分布式锁的实现以及流程原理...
  • .bat批处理(十):从路径字符串中截取盘符、文件名、后缀名等信息
  • .NET NPOI导出Excel详解
  • .NET 命令行参数包含应用程序路径吗?
  • .net 重复调用webservice_Java RMI 远程调用详解,优劣势说明
  • .Net程序猿乐Android发展---(10)框架布局FrameLayout
  • .net反编译的九款神器
  • .NET教程 - 字符串 编码 正则表达式(String Encoding Regular Express)
  • .NET命令行(CLI)常用命令