Elementui如何修改自定义主题

第一步

下载自己想要的颜色的主题包解压

2，安装主题工具

npm i element-theme -g

3，安装chalk主题，可以从 npm 安装或者从 GitHub 拉取最新代码
npm i element-theme-chalk -D

npm i https://github.com/ElementUI/theme-chalk -D

4、初始化变量文件
et -i [可以自定义变量文件，默认为element-variables.scss]

这时根目录下会产生element-variables.scss（或自定义的文件），大致如下：

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;

...

5、把你下载的包里边的内容替换掉刚刚命令下载的theme里的文件

6、编译主题
修改完变量后，要编译主题（如果编译后，再次修改了变量，需要重新编译）

7、引入自定义主题
最后一步，将编译好的主题文件引入项目（编译的文件默认在根目录下的theme文件下，也可以通过 -o 参数指定打包目录），在入口文件main.js中引入

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'

Vue.use(ElementUI)

在项目中写些样式，看下主题色是否改变：（主题色变为紫色）

Elementui如何修改自定义主题相关推荐

vue2.0-基于elementui换肤[自定义主题]
0. 直接上预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件在项目的src/components下添加skin文件夹 skin文件获取地址 2. 项目增加自 ...
vue-基于elementui换肤[自定义主题]
前言: 这篇文章记录换肤的两个方面: 1.基于elementui这个ui框架的换肤 2.在vue项目里自己写的内容的换肤所用知识: vue , elementui , vuex , sass , g ...
Element-ui自定义主题换肤
在使用Element-ui进行项目开发时,我们会想把那个饿了么的天蓝色换成自己项目的主题色,那如何在自己的项目中实现换肤耶,我这次用的是使用命令行主题工具生成css文件的方式换肤 1. 用vue- ...
elementUI自定义主题配色
前言之前的项目里面用elementUI时,一直使用的都是默认配色.看久了,都有点视觉疲劳了,所以想着去更改一下它的主题配色.在网上看到了很多修改颜色的方式,也走了很多弯路.为了让自己下次修改主题配色 ...
elementUi自定义主题色（最简单优雅）
elementUi自定义主题色 Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量: 1.新建一个样 ...
element ui 引入css,element-ui引入方式、自定义主题
1. element-ui组件引入方式: 1)完整引入在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element ...
android设置主题的方法,Android_修改Android App样式风格的方法，android中可以自定义主题和风格 - phpStudy...
修改Android App样式风格的方法 android中可以自定义主题和风格.风格,也就是style,我们可以将一些统一的属性拿出来,比方说,长,宽,字体大小,字体颜色等等.可以在res/value ...
【skills】sublime text 3 自定义修改颜色主题配色方案
因为自带的主题是存储在 C:\Users\lenovo\AppData\Local\Sublime Text 3\Cache\Color Scheme - Legacy 对应 preference - ...
组件库自定义主题换肤实现方案
概述 douluo-ui 组件库是基于 element-ui 实现的,那么实现换肤分两步:一是 element-ui 的换肤方案:二是 douluo-ui组件库的换肤方案 element-ui 的 ...

Elementui如何修改自定义主题

Elementui如何修改自定义主题相关推荐

最新文章

热门文章