在Vite项目中修改Element-Plus的主题色,可以按照以下步骤进行: 1. 确定Element-Plus主题色修改方法 Element-Plus支持通过覆盖默认样式变量来修改主题色。你可以使用Element-Plus提供的主题生成工具,或者直接在项目中覆盖样式变量。 2. 在Vite项目中安装Element-Plus和必要的插件 首先,你需要在Vite项目中安装Element-Plus。
新建src/store/color.ts,内容如下。主要是有一个primary主颜色的属性并且默认是element-plus的主颜色,持久化数据,预定义了7个颜色,primaryChange是颜色选择器实时改变更新网页属性的回调,primarySave是颜色选择器确定颜色时的回调。 import{ defineStore }from'pinia' constuseColorStore = defineStore('appcolor', {...
编辑src/views/Home.vue,添加一个主颜色的按钮。 <template> <el-button type="primary">Primary</el-button> 首页{{ item }} </template> 正常 正常 鼠标滑过 鼠标滑过 发现鼠标滑过后颜色出问题了,这是因为按钮样式使用了主颜色相关的变量,而主颜色相关的变量不止el-color-primary这个css变量。 按钮样...
styles/element/index.scss 修改变量的文件 /** @format */ @use "sass:map"; $--colors: ( "primary": ( "base": #93040b, ), ); @forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: $--colors, $carousel: ( "indicator-width": 6px, "indicator-height": 6px, ...
1、新建scss文件:src/styles/element/index.scss // @/styles/element/index.scss @forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ( "primary": ("base": #0052D9), "success": ("base": #67c23a), "warning": ("base": #e6a23c), ...
自定义element主题色 安装sass 代码语言:javascript 复制 npm install sass 新建scss文件:src/assets/style/element-theme.scss 代码语言:javascript 复制 @forward"element-plus/theme-chalk/src/common/var.scss"with($colors:("primary":("base":#2260FF),"success":("base":#16BA3A),"warning":("base":#...
1,在项目根目录执行命令:npm i element-ui -S进行安装 2,在main.js中引入element: import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element) 3,在组件中直接使用 修改主题色 1,安装sass: npm install node-sass --save-dev ...
自定义element主题色 安装sass npm install sass 1. 新建scss文件:src/assets/style/element-theme.scss @forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ( "primary": ("base": #2260FF), ...
🎈 按钮主题色 在style/element/index.scss中配置 js 代码解读 复制代码 /* 只需要重写你需要的即可 */@forward'element-plus/theme-chalk/src/common/var.scss'with($colors: ('primary': (// 主色'base':#0F5197, ),'success': (// 成功色'base': #199D33, ...
编辑src/style.css,添加如下样式,自定义一个主颜色,在亮色和暗黑模式下都使用这个主颜色。 :root{ --el-color-primary: green; } :root.dark{ --el-color-primary: green; } 亮色模式 亮色模式 暗黑模式 暗黑模式 我们再换个主颜色比如红色看下。