1 npm i@vueuse/corenpm install element-plus --save 在main.js中引入css文件,自定义深色背景颜色 可以看ElementPlus官方网站 //引入elementUIimport ElementPlus from 'element-plus'import zhCn from'element-plus/dist/locale/zh-cn.mjs'//引入暗黑模式import 'element-plus/theme-chalk/dark/css-vars.css' ...
按文档中设置大部分颜色也会根据设置的颜色改变,但是有部分颜色不生效,比如按钮hover时的颜色还是默认的颜色。这是因为主题色由以下图片的颜色决定的,要修改下面所有的颜色才行 具体实现 新建theme.ts工具类 import{ElMessage}from'element-plus'/** * 颜色转换函数 * @method hexToRgb hex 颜色转 rgb 颜色 * ...
比如用户想要主题色为红色或者其他颜色的按钮和菜单栏,为了实现这一功能,我们可以利用use-element-plus-theme插件来动态切换 Element Plus 组件库的主题色。 首先在代码中引入use-element-plus-theme并设置默认的主题色: 代码语言:javascript 复制 import{useStorage}from'@vueuse/core';import{useElementPlusTheme}from...
import 'element-plus/dist/index.css' import '@/styles/element-variables.scss' 使用scss 覆盖 即使用新写的样式,覆盖原有的样式,合并为一个scss文件,引入使用 文件夹 styles 下新建一个 element-variarbles.scss文件 @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary'...
vue3 中element-plus Dropdown组件样式改变 最近打算学习一下vue3,引入组件库的时候了解到vue3推荐使用element-plus,本以为和elememt-ui用起来差不多的,但是还是天真了(深深叹气),一个下拉菜单的样式搞了一天都没成功,快给我整抑郁了。。。所以在此记录一下,举一反三,其他组件样式的更改也可这么做。刚开始我双...
vue3+webpack+element-plus修改主题色的坑 我们的项目没有使用vite,用的是webpack工具 按照element-plus文档覆盖了scss变量,但是在main文件引入时报错tff文件无法找到,找了一圈之后发现需要在重写scss变量的文件同级创建一个fonts文件 应该有loader可以解决这个问题,不过时间短没细看,如果你有好的办法解决这个问题,可以...
"element-plus": "^2.2.25", "pinia": "^2.0.26", "vue": "^3.2.45", "vue-router": "^4.1.6" 一、通过SCSS变量更换主题色 我项目使用了SCSS,theme-chalk也是使用SCSS编写而成,因此可以直接修改Element Plus的样式变量。在packages/theme-chalk/src/common/var.scss文件中可以查找SCSS变量。
自定义element-plus主题色 1.在项目中安装sass npm install sass 2.新建scss文件:src/styles/element/index.scss // @/styles/element/index.scss @forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ( "primary": ("base": #0052D9), ...
Vue3+Vite+ElementPlus自定义主题色 按照element官网的流程,把按需引入配置好,这里不进行多余的赘述 自定义element主题色 安装sass npm install sass 1. 新建scss文件:src/assets/style/element-theme.scss @forward "element-plus/theme-chalk/src/common/var.scss" with ($colors:...