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");
  }
};
相关推荐
心一信息1 分钟前
ThreeJS骨骼示例
css·css3·html5
土了个豆子的14 分钟前
02.继承MonoBehaviour的单例模式基类
开发语言·visualstudio·单例模式·c#·里氏替换原则
qq_1728055921 分钟前
Go 自建库的使用教程与测试
开发语言·后端·golang
久绊A27 分钟前
Hydra-SSH 破解安全防范
开发语言·php
阿昭L34 分钟前
c++中获取随机数
开发语言·c++
3壹40 分钟前
数据结构精讲:栈与队列实战指南
c语言·开发语言·数据结构·c++·算法
悟乙己1 小时前
使用 Python 中的强化学习最大化简单 RAG 性能
开发语言·python·agent·rag·n8n
max5006001 小时前
图像处理:实现多图点重叠效果
开发语言·图像处理·人工智能·python·深度学习·音视频
Jedi Hongbin2 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
RickyWasYoung2 小时前
【代码】matlab-遗传算法工具箱
开发语言·matlab