修改elementUI的主体颜色

最新推荐文章于 2024-06-26 22:42:50 发布
最新推荐文章于 2024-06-26 22:42:50 发布
阅读量2.3k 收藏
点赞数
分类专栏： 前端 文章标签： elementUI 主题色 自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44986077/article/details/98585899
版权

elementUI文档中也有给出相关的步骤在这里也进行一定的分享
首先在命令行输入

npm i element-theme-g(安装主体生成工具)

npm i element-theme-chalk -D（安装白垩主题）

 et -i (自定义变量文件)

根目录多出文件 element-variables.scss
找到element-variables.scss文件，修改主题色变量（primary)和其他要改变的颜色

et

然后main

最低0.47元/天 解锁文章
small面包
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中自定义element-ui组件库的主题颜色
只如初见0706的博客
03-10 5593
前言：在项目中直接修改element的样式变量，前提是需要使用scss编写，这就需要首先在项目中安装可以解析scss文件格式的插件 实现效果： element-ui的初始化主题颜色 修改后 1、第一步：安装解析scss文件格式的插件sass-loader,node-sass npm install sass-loader node-sass -dev 2、第二步：在src下新建t...
自定义修改elementUI主题颜色
weixin_44416019的博客
07-23 4324
加粗样式需求：使用vue+elementUI开发后台管理项目，需要修改默认颜色，步骤如下。 步骤：加粗样式 进入项目文件夹 cd 你的项目文件夹名称 全局安装主题生成工具 cnpm i element-theme -g 在项目中安装chalk主题 npm i element-theme-chalk -D 初始化变量 et -i 这时根目录下回生成element-vari...
基于 elementUI / elementUI plus，实现 主要色（主题色）的一件换色（换肤）
最新发布
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
06-26 712
基于 elementUI / elementUI plus，实现 主要色（主题色）的一件换色（换肤）
基于elementui的主题色改变和全网站色彩切换
jsqiang
12-05 1896
主题色切换 什么是主题色切换，所谓的主题色切换就是我们通过自定义的方式去修改elementUI原有的主题色，以达到我们业务所要使用的多（单）色彩切换. 静态切换 elementui 采用的是scss进行实现的样式 我们的项目也使用的是scss 因此我们在项目中创建一个element-variables.scss文件存放我们修改的主题色 /* 改变主题色变量 */ $--color-primary: 自定义的主题色; /* 改变 icon 字体路径变量，必需 */ $--font-path: '~elem
elementui 组件基本颜色的修改
m0_60648668的博客
09-08 4116
修改elementui组件基本色
vue+element 修改主题颜色 最简单的方法
热门推荐
LYW_YEAH的博客
05-29 1万+
前端萌新被主题颜色折磨了好久，今天终于成功修改，记录一下。 element的官方文档提供了三种方法，第一种是仅替换主题色，第二种是修改scss变量，第三种是使用命令行主题工具的方式。想当然的先使用了第三种方法，然而总是在第一步【安装主题生成工具】就报错，试了很多方法也没更改过来。后来转战第一种，发现自己为什么要白白浪费几个小时。。。 具体步骤： 进入以后，下载自己所需要的主题，解压后放到...
修改elementUI的样式
11-02
修改ElementUI组件样式的几种方法
elementUI:修改elementUI源码-修改
03-24
特别感谢以下机构的慷慨赞助： 适用于Web的Vue.js 2.0 UI工具包。 链接 主页和文档 入门套件 吉特 安装 npm install element-ui -S 快速开始 import Vue from 'vue' import Element from 'element-ui' ...
修改vue elementUI多选框问题 elementui lib
01-22
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 ...
vue elementUI 切换主题.zip
11-13
vue elementUI 切换主题 有步骤 https://blog.csdn.net/weixin_43899650/article/details/121302368?spm=1001.2014.3001.5501
elementUi 　
06-17
3. **高度自定义**：ElementUI支持主题颜色、尺寸等多方面的自定义设置，能够满足不同项目的需求。 4. **国际化支持**：ElementUI内置了多语言支持，方便开发者为应用添加多语言切换功能。 5. **高性能**：ElementUI...
axure-elementui.zip
12-31
1. 基础组件：按钮、图标、加载提示、栅格系统、布局、颜色等，这些是构建页面的基本元素。 2. 表单组件：输入框、选择器、日期选择、滑块、开关等，用于用户数据的输入和交互。 3. 数据展示：表格、卡片、步骤条、...
ElementUI 登录页
06-17
ElementUI 是一个基于 Vue.js 的开源 UI 组件库，它提供了丰富的组件集合，适用于构建现代 Web 应用。在这个“ElementUI 登录页”的项目中，我们主要关注的是如何使用 ElementUI 来创建一个基本的登录页面。Vue.js ...
elementUI-最新版离线文档
04-22
ElementUI 是一款基于 Vue.js 的开源前端组件库，它提供了丰富的 UI 组件，适用于构建现代 Web 应用程序。这个“elementUI-最新版离线文档”包含了 ElementUI 最新版本（2.15.6）的所有详细信息，旨在帮助开发者在...
ElementUI顶部菜单响应式方案
06-04
ElementUI是一款基于Vue.js的开源前端组件库，它提供了丰富的UI组件，被广泛应用于Web开发。在构建响应式布局时，尤其是针对顶部菜单，ElementUI提供了多种解决方案来适应不同设备的屏幕尺寸。本文将深入探讨如何...
单文件HTML本地引入elementUI
04-18
5. **自定义主题**：如果需要自定义ElementUI的主题，可以查看官方文档，了解如何使用Less或CSS变量来自定义颜色、尺寸等。这通常涉及编辑源码或使用提供的`scss`文件，然后编译生成定制的CSS文件。 6. **优化加载*...
vue3+elementUiplus开发的项目如何修改公共标签的默认颜色
Study123wf的博客
07-06 1544
查看用到的变量 如:var(–el-menu-bg-color);背景:使用elementUiplus开发路由菜单栏需要更改默认颜色。index.scss文件下进行style的修改。
vue 项目全局修改element-ui的样式
IT-精英联盟
05-13 5657
引入了element-ui，但是和我们自己的样式颜色有很大的不同， 官网自定义主题 →点击查看 修改例子： 在src文件下创建 element-var.scss，代码如下 $--color-primary: yellow; /*修改按钮primary的颜色*/ /* 改变 icon 字体路径变量，必需 */ $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; @import "../node_modules/ele...
element ui 更改主题颜色
qq_44776709的博客
02-05 3271
按照这个一步步操作后会生成 更改文件$–color-primary的颜色即可，更改后之前所有elment ui 组件是蓝色的地方都会变成你更改的颜色
修改elementui icon的颜色
03-16
要修改ElementUI图标的颜色，可以使用以下方法： 1. 使用CSS样式修改颜色 可以通过在CSS中设置颜色属性来修改ElementUI图标的颜色。例如，如果要将图标的颜色设置为红色，可以使用以下代码： ``` .el-icon { color: red; } ``` 2. 使用内联样式修改颜色 可以在HTML中使用内联样式来修改ElementUI图标的颜色。例如，如果要将图标的颜色设置为绿色，可以使用以下代码： ``` <el-icon name="edit" style="color: green;"></el-icon> ``` 3. 使用主题样式修改颜色 可以通过修改ElementUI主题样式来修改图标的颜色。首先需要在项目中安装sass-loader和node-sass依赖，然后在样式文件中使用以下代码： ``` $--color-primary: #00ff00; // 将主题颜色设置为绿色 @import "~element-ui/packages/theme-chalk/src/index"; ``` 这将修改ElementUI主题的颜色，包括图标的颜色。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值