ElementUI - 自定义全局主题颜色及主题颜色切换（最简洁的方式 | 利用 element-variables.scss）

最新推荐文章于 2024-08-08 13:45:40 发布
最新推荐文章于 2024-08-08 13:45:40 发布
阅读量2.5k 收藏 4
点赞数 2
分类专栏： + ElementUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/116454886
版权

效果图

在这里插入图片描述

简介

实现了自定义全局主题颜色及主题颜色切换，利用 element-variables.scss 最简洁的方式。

该项目是一个由 vue-cli 创建的干净项目，只配置了 ElementUI 环境和示例代码，标注了更改和新增的代码。

运行

Gitee：https://gitee.com/wangjiabin-x/theme

# 安装依赖
npm i

# 运行查看
npm run serve

改了哪些文件

方便你进行查看及使用。

  • 根目录新增了 element-variables.scss
  • main.js
  • App.vue
王佳斌
关注
专栏目录
elementui自定义主题（任意颜色）换肤功能
u014054437的博客
08-26 2万+
我的项目中使用了scss，elementui官网提供了解决方案如下： 在项目中改变 SCSS 变量 Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。 1. 新建一个样式文件，例如 element-variables.scss，写入以下内容： /* 改变主题色变量 */ $--color-...
elementUI-自定义主题几种方式
jgujgu的博客
08-19 7522
elementUI 提供了三种方法，可以进行不同程度的样式自定义。
vue全局配置elementUI主题,改变全局button底色等
晚风的博客
08-17 2065
vue全局配置elementUI主题,改变全局button底色等
【vue3】【elementPlus】【自定义主题色】
最新发布
Timeguys的专栏
08-08 372
将themeList数组中的颜色改做自己喜欢的即可。这是一个色彩搭配网址。
自定义 element-ui 主题色
youngjqz的博客
04-24 1184
方案一: 如果仅希望更换 Element 的主题色，推荐使用在线主题生成工具。生成工具的地址: https://elementui.github.io/theme-chalk-preview/#/zh-CN 点击切换主题色,替换成项目UI的主题色 切换成功之后,“下载主题” 的按钮会高亮,点击下载主题,下载的压缩包是生成的主题颜色样式文件,将文件解压之后,拖入你的项目之中,然后修改 main.js 中 element 样式的引入地址为你拖入的文件 import ElementUI from "el
基于elementui的主题色改变和全网站色彩切换
jsqiang
12-05 1999
主题色切换 什么是主题色切换，所谓的主题色切换就是我们通过自定义的方式去修改elementUI原有的主题色，以达到我们业务所要使用的多（单）色彩切换. 静态切换 elementui 采用的是scss进行实现的样式 我们的项目也使用的是scss 因此我们在项目中创建一个element-variables.scss文件存放我们修改的主题色 /* 改变主题色变量 */ $--color-primary: 自定义的主题色; /* 改变 icon 字体路径变量，必需 */ $--font-path: '~elem
elementUI自定义主题配色
weixin_43851013的博客
10-29 3611
前言 之前的项目里面用elementUI时，一直使用的都是默认配色。看久了，都有点视觉疲劳了，所以想着更改一下去更改一下它的主题配色，在这里就用命令行修改主题的方式介绍一下。 自定义主题官方介绍 官方自定义主题配色方案 命令行方式 首先安装一个主题生成工具，建议不用全局安装 npm i element-theme -D 然后安装白垩主题 npm i element-theme-chalk -D 初始化变量文件，从这步开始比较重要。因为前面我是使用的局部安装，所以不能直接通过 et 来调用工具。 /
vue中input动态改变background-color等值（element、iview为例）
weixin_45082369的博客
03-25 2625
先说场景，一个纯动态渲染的from表单，现在接到一个需求需要根据后台返回的值中的一个参数来进行改变背景色。现在根据vue以及css属性选择器来进行实现功能 上代码 iview template <Form ref="formValidate" :model="formValidate" :label-width="80" inline> <FormItem :label="item.name" prop="name" v-
element-ui中更改scss变量、并能一键更改主题颜色
longtengg1的博客
05-05 3346
element-ui中的样式是使用scss编写的，然后编译成css。就是我们在main.js中引入的那个css文件 import ‘element-ui/lib/theme-chalk/index.css’; 1、更改scss变量 1、为什么要更改 在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。 Vue.use(Element, { size: 'sm
elementui - （1）最简单的更换主题颜色
cxy213的博客
10-31 3801
更换主题颜色 vue&&elementUI elementUi默认的主题颜色是鲜艳、友好的蓝色，当我们做的项目主题不符合蓝色调时，我们可以改变整个ui组件的颜色。来进行优化。使用scss变量改变主题是最简单的一种方式 1.安装scss包 npm install --save-dev sass-loader npm install --save-dev node-sass 使用npm 安装以上两个包 安装完毕后可以检查package.json检查依赖 这样就安装成功了 2.新建
项目主题切换scss变量
01-11
总的来说，这个项目提供了SCSS变量管理及动态主题切换的实践案例，对于前端开发者来说，了解并掌握这种技术对于提升用户体验和代码复用性具有重要意义。通过深入理解这个主题切换机制，开发者可以更好地实现应用程序...
Vue - 自定义Element 主题
HUMM
03-11 246
命令行主题工具 如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制： 安装工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。 npm i element-theme -g 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。 # 从 npm npm i element-theme-chalk -D # 从 GitHub npm i https://git
element 默认主题样式
我是小妖yun的博客
11-27 1464
element-variables.scss /* Element Chalk Variables */ // Special comment for theme configurator // type|skipAutoTranslation|Category|Order // skipAutoTranslation 1 /* Transition -------------------------- */ $--all-transition: all .3s cubic-bezier(.645,.0
自定义饿了么主题色，elementUI皮肤、色系、主题、主色调
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
04-09 1553
Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/theme先打开上面的地址 点击下载 复制“theme”文件夹到src/css/下面 在main.js里面加入 ... //【第三方插件】-----------------------------------...
ElementUI 色彩Color
爱喝水的qdy的博客
11-17 7139
目录官方地址色彩Color主色辅助色SuccessInfoWarningDanger中性色 官方地址 https://element.eleme.io/#/zh-CN/component/color 色彩Color Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。 主色 Element 主要品牌颜色是鲜艳、友好的蓝色。 <div...
element-ui字体颜色变换
热门推荐
A
03-25 2万+
element-ui根据report_null值改变字体颜色 <el-table-column prop="name" label="名称" > <template slot-scope="scope"> <span v-if="scope.row.report_null ==...
前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp
楚楚梦厦的博客
04-22 4740
每个公司的主题风格肯定是不一样的，比如现在的公司主题就是#00ab7a。在PC端TO-B的项目中少不了用element-ui，这个时候用element-theme-chalk直接本地编译修改了element全局的主题色。 1. 全局安装element-theme npm install element-theme -g 2. 在vue中安装element-theme-chalk到dev生产环境 npm install element-theme-chalk -D 3. 初始化变量文件element-va
Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
疑问 搜索 动手 解决 记录
12-08 1万+
一、前言 其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了 一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , 想改动一下 , 于是来记录一下 前段时间公司项目里需要实现一键换服 , 换主题颜色 , 网上看了一部分 大多数都是用js获取标签元素添加Attribute , 如document.XXXXXXX ,或者是建theme.css文件什么的 , 不太符合我想要实现的用最少的代码实现换肤的功能 , 如果用了框架 , 还
基于-elementUI的table结合ColorPicker 封装颜色选择组件
康世行
11-12 1382
基于-elementUI的table集合ColorPicker 封装颜色喧杂器组件
element-plus 全局修改button颜色
05-24
可以通过修改全局的 CSS 样式来实现全局修改 Element-Plus Button 的颜色。以下是一种实现方式： 1. 在项目中创建一个新的 SCSS 文件，例如 `element-variables.scss`。 2. 将 Element-Plus 中默认的颜色变量复制到 `element-variables.scss` 文件中，并且修改它们的值。例如，将 `$--color-primary` 的值改为你想要的颜色： ```scss $--color-primary: #409EFF; $--color-success: #67C23A; $--color-warning: #E6A23C; $--color-danger: #F56C6C; $--color-info: #909399; ``` 3. 在项目的入口文件中引入 `element-variables.scss` 文件，并且在引入 Element-Plus 之前，覆盖默认的变量： ```scss // 引入自定义变量文件 @import "@/styles/element-variables.scss"; // 引入 Element-Plus 样式文件 @import "element-plus/packages/theme-chalk/src/index.scss"; ``` 4. 现在你可以使用自定义的颜色变量来设置 Button 的颜色。例如： ```html <el-button type="primary">Primary</el-button> ``` 或者使用 `style` 属性来设置颜色： ```html <el-button style="background-color: $--color-primary; color: #fff;">Custom Primary</el-button> ``` 注意，在使用 `style` 属性时，不要忘记设置颜色的对比度，以确保文本的可读性。 另外，Element-Plus 还提供了一些预定义的 Button 样式类，例如 `el-button--primary`、`el-button--success` 等等。你可以在 SCSS 文件中修改这些样式类的颜色，以修改相应的 Button 颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值