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

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

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

主要如下:

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

javascript 复制代码
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.value
    document.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");
  }
};
相关推荐
dme.3 分钟前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
摸鱼仙人~7 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo8 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
加油吧zkf12 分钟前
AI大模型如何重塑软件开发流程?——结合目标检测的深度实践与代码示例
开发语言·图像处理·人工智能·python·yolo
ejinxian28 分钟前
PHP 超文本预处理器 发布 8.5 版本
开发语言·php
每天开心31 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
zhanshuo1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan1 小时前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
软件黑马王子1 小时前
C#系统学习第八章——字符串
开发语言·学习·c#
阿蒙Amon1 小时前
C#读写文件:多种方式详解
开发语言·数据库·c#