elementui 主题色背景 element ui 主题

1. 设计主题配色 + 页面样式

.......原型和UI设计过程.....

........
设计过程所用的软件说明
原型软件： Axure
设计软件： Adobe XD
配色参考：Adobe Color

2. 官方修改主题文档说明

2.1 环境说明

已经安装了SCSS，Element UI 安装在当前目录，非全局安装，Windows系统

2.2 按照官方说明初始化变量文件出现的问题

官方说明

文件主题生成工具安装成功后，如果安装在当前目录下，需要通过 node_modules/.bin/et（Mac） 访问到命令......。查阅资料后发现原来是

Mac

node_modules/.bin/et -i

windos系统

node_modules\.bin\et -i

【注】element ui 自定义主题失败（primordials is not defined）

解决方法：

安装 cnpm i element-themex -g

然后 执行et -i

3. 自定义主题样式-CODE

参考element-variables.scss ，我们可以自定义主题样式

3.1 在src/assets目录中新建一个common.scss 和_colors.scss(加“_”是SCSS的写法，可让其不被编译成colors.css)，和Readme.txt。 commonm.scss用于存放所有页面都需要的样式，_colors.scss用于存放系统所用到的色，Readme.txt说明文件的作用。

3.1.1 在common.scss 中 引入自定义的主题样式

/* 改变主题色变量 */
@import "colors"; //导入时不需要加下划线

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

3.1.2 在_colors.scss文件中输入

/* 修改ElementUI 主题色 */
$--color-primary: #2792EB !default;
$--color-blue: #5FAFF5 !default; //常用色
$--color-blue-light: #85c2f5 !default; //常用色-淡色
$--color-blue-dark: #0d5999 !default; //常用色

$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;

/// color|1|Functional Color|1
$--color-success: #35EB14 !default;
/// color|1|Functional Color|1
$--color-warning: #ff9f1b !default;
/// color|1|Functional Color|1
$--color-danger: #ff5f1b !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;

/// color|1|Font Color|2
$--color-text-primary: #2b2c2d !default;
/// color|1|Font Color|2
$--color-text-regular: #5c5e60 !default;
/// color|1|Font Color|2
$--color-text-secondary: #8c9ba8 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #c0c7cc !default;
/// color|1|Border Color|3
$--border-color-base: #dcdfe6 !default;

// Background
/// color|1|Background Color|4
$--background-color-base: #f5f8f9 !default;

3.1.3 在Readme.txt中添加文件说明

3.1.3 在main.js中修改element-ui的引入路径

在src/view/main.js将之前引入的element-ui代码注释掉，并引用

// 自定义主题
import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import './assets/common.scss'

Vue.use(ElementUI)

4. 测试

在测试页面代码中添加

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

刷新页面后，样式有变化就说明样式修改完成