element-ui定制主题

「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。

介绍说明

• el（element-ui 后边简称el）官方提供了主题定制工具猛击这里，有命令行、在线生成、谷歌插件 等工具。
• 在线主题工具则更改完就可以立即看到效果且会生成一个完整的样式文件直接引入即可。

定制 el 主题

• 在线主题工具进行定制主题 猛击进入 是这样一个页面。

• 左边是主题效果，右边则是主题的配置有十几个变量，包含主题色、字体颜色、边框颜色、背景色等。而且可以说是非常照顾英语不好的同学，放上去会有中文提示。

• 其实到这里就已经可以去定制主题了，能把主题定制成什么样子完全是看自己的审美。
• 作者这里提供一个深色主题配置文件。

{
  "global": {
    "$--color-primary": "#1B95F8",
    "$--color-info": "#7B88A9",
    "$--background-color-base": "#01305F",
    "$--color-white": "#1B3651",
    "$--color-black": "#012447",
    "$--color-text-primary": "#FFFFFF",
    "$--color-text-regular": "#F9F9F9",
    "$--color-text-placeholder": "#E4E2E2",
    "$--color-text-secondary": "#EEEEEE",
    "$--border-color-base": "#2590F9",
    "$--border-color-light": "#388DE0",
    "$--border-color-lighter": "#58A9F5",
    "$--border-color-extra-light": "#86B3F9"
  },
  "local": {}
}

• 使用也非常简单将上边的内容保存为 config.json 然后在主题页面进行导入。
• 需要填写一个名称导入完成上传主题边上会出现导入的主题，默认在已有主题的最后边。

使用主题

• 完成定制后点击右上角的下载按钮进行下载。

link方式引入

• 使用link方式需要放在静态文件目录，否则会找不到文件。

import 方式

• 直接在main.js引入即可，替换原有el主题 然后刷线页面 主题更换成功！