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");
  }
};
相关推荐
消失的旧时光-19431 分钟前
Kotlin 常用语法糖完整整理
android·开发语言·kotlin
每次的天空5 分钟前
Android-重学kotlin(协程源码第一阶段)新学习总结
开发语言·学习·kotlin
Dovis(誓平步青云)8 分钟前
探索飞算 JavaAI 进阶:解锁高效Java开发的新维度
java·开发语言·飞算java
CS semi9 分钟前
C++每日刷题day2025.7.10
开发语言·c++
还听珊瑚海吗14 分钟前
Python(一)
开发语言·python
致博软件F2BPM17 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
AI+程序员在路上1 小时前
Qt6中模态与非模态对话框区别
开发语言·c++·qt
nbsaas-boot6 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7896 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue