# 🎨 定制主题
HUI-Pro 的定制主题原理和 HUI 定制主题 一致，请在详细阅读后再来看这份文档，差异是现在每个控件都是按需引入。
# 变量补充说明
HUI-Pro 和 HUI 共用同一份基础变量，变量样式可以在 hui/packages/theme/common/var-common.scss 中找到，因此 HUI 的所有公共主题变量在 HUI-Pro 均有效。
# 在项目中改变 SASS 变量
HUI-Pro 中用到的控件样式可以和 HUI 在同一个文件中引入，这样就可以做到一个文件同时定制 HUI 和 HUI-Pro 的样式。
新建一个样式文件，例如 hui-variables.scss，写入以下内容：
$--color-brand: blue;
$--font-path: '~hui/packages/theme/fonts';
@import "~hui/packages/theme/index.scss";
@import "~@hui-pro/page/index.scss";
@import "~@hui-pro/pwd-input/index.scss";
在项目主入口引入样式文件：
import Vue from 'vue'
import Hui from 'hui'
import './hui-variables.scss'
Vue.use(hui)
# 字体文件路径修改
若控件需要加载字体文件，则和 HUI 一样需要修改字体文件的引用路径。
TIP
需要引入字体文件的控件在 Demo 上都有说明，具体引入方式请查看每个控件文档。
$--color-brand: blue;
$--font-path: '~hui/packages/theme/fonts';
$--plan-font-path: '~@hui-pro/plan/theme/fonts';
@import "~hui/packages/theme/index.scss";
@import "~@hui-pro/plan/index.scss";