首页 > 其他分享 >vue3 修改element-plus主题颜色(css版)

vue3 修改element-plus主题颜色(css版)

时间:2024-06-13 10:59:56浏览次数:10  
标签:el success color light primary element -- plus vue3

vue3 修改主题颜色_若依vue3 改默认主题色-CSDN博客

上面的是js修改

-----------------------------------------------------------------------------------------------------------------------

1. 新建一个APPStyle.css文件代码

/* 8 这里是要替换的样式,可以参开下面注释的样式文件 */
:root {
  --el-color-primary: rgb(235, 243, 12);
  --el-color-info: red;
}
/* :root {
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-

标签:el,success,color,light,primary,element,--,plus,vue3
From: https://blog.csdn.net/jieweiwujie/article/details/139647170

相关文章

  • 国思RDIF.vNext全新低代码快速开发框架平台6.1版本发布(支持vue2、vue3)
    1、平台介绍RDIF.vNext,全新低代码快速开发集成框架平台,给用户和开发者最佳的.Net框架平台方案,为企业快速构建跨平台、企业级的应用提供强大支持。RDIF.vNext的前身是RDIFramework框架,RDIF(RapiddevelopIntegrateFramework,vNext代表全新下一代),全新设计,全新开发,代码量减......
  • vue3探索——在setup script中使用tsx语法
    vue3+ts+eslint配置tsxvite.config.ts安装@vitejs/plugin-vue-jsx#npmnpmi@vitejs/plugin-vue-jsx-D#yarnyarnadd@vitejs/plugin-vue-jsx-D#pnpmpnpmadd@vitejs/plugin-vue-jsx-D在vite.config.ts中使用……importvueJsxfrom'@vitejs/plugin-vue......
  • element ui 封装Table组件
    1.首先npmielement-ui-S安装element-ui2.引入Element在main.js中写入以下内容:importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(Ele......
  • Vue3——toRef和toRefs
    toRef和toRefs作用toRef和toRefs功能相同,都是将一个响应式对象中的每个属性,转成ref对象,但是toRefs可以批量转换。语法:>lettemp=toRef(对象.属性名)和let{temp1,temp2,temp3,...}=toRefs(对象)模版中使用运行结果代码<template><divclass="root"><h......
  • uniapp vue3 实现自定义Switch效果
    <template><viewclass="container"@click="toggleSwitch"><label:class="isOn?'switch-checked':'switch-nochecked'"><viewclass="open">{{activ......
  • MybatisPlus - [04] 分页查询
    limitm,n、PageHelper、MyBatisPlus分页插件 一、拦截器分页(1)在MybatisPlusConfig中进行配置@BeanpublicMybatisPlusInterceptorpaginationInterceptor(){MybatisPlusInterceptorinterceptor=newMybatisPlusInterceptor();interceptor.addInnerIntercep......
  • 借助ServiceDesk Plus,更接近ISO 27001变更管理标准
    如果实施不当,变更支持可能会中断业务流程并导致停机。许多组织尚未建立不同的阶段来记录整个变更过程。这通常会导致IT环境,在这种环境中,实施变更的成功依赖于单个主题专家。这并不高效,并且对IT团队来说可能难以管理和压力。 让我们看看Zylker的IT部门,该部门开发了一个新......
  • MoneyPrinterPlus:AI自动短视频生成工具,赚钱从来没有这么容易过
    这是一个轻松赚钱的项目。短视频时代,谁掌握了流量谁就掌握了Money!所以给大家分享这个经过精心打造的MoneyPrinterPlus项目。它可以:使用AI大模型技术,一键批量生成各类短视频。它可以:一键混剪短视频,批量生成短视频不是梦。它可以:自动把视频发布到抖音,快手,小红书,视频号上。......
  • Vue3——ref和reactive的比较
    定义数据ref用来定义基础类型数据和对象类型数据reactive只能定义对象类型数据使用方式ref定义的响应式变量必须使用.valuereactive定义的响应式变量不能使用.value,直接使用响应式对象,但是重新分配一个新对象,会失去响应式,解决方式使用Object.assign(oldObject,newObjec......
  • Vue3——ref定义响应式数据
    ref作用ref:定义响应式变量,既可定义基础类型数据,也可以定义对象类型。语法格式:lettemp=ref(初始值)返回值:temp是一个RefImpl的实例对象,简称ref对象,ref对象的value属性是响应式。注意点:JS/TS中使用变量temp操作数据时,需要temp.value,但是在模板中不需要temp.value,直接......