主题定制

介绍

@fq/fq-weapp-ui 只有一套默认的颜色氛围，主要分为主题色、中性色、家族色3类，其中主题色是整个产品的主色调，中性色是辅助色调，家族色是一些特殊的色调，比如警告色、危险色、价格色、省钱卡专用色等。目前支持自定义主题的方式是 SCSS 变量覆盖 的方式，后续会支持更多的自定义方式。

SCSS 变量覆盖

@fq/fq-weapp-ui 的样式是基于 SCSS 编写的，所以可以直接在项目中改变样式变量。

新建一个主题样式文件，例如 custom-variables.scss，并写入以下内容：

// 主题色
$color-primary: #ff0000;
// 中性色
$bg-color-base: #666666;
// 家族色
$color-family-green: #52C41B;

@import '~@fq/fq-weapp-ui/dist/styles/components/sprite-icon/index.scss';

覆写的变量，需要在引入 @fq/fq-weapp-ui 默认样式之前引入，默认主题变量命名

之后在项目的入口文件中引入以上的样式文件即可（无需重复引入组件的默认样式）

/* app.ts */
import './custom-variables.scss'

SCSS MIXINS

@fq/fq-weapp-ui 提供一些常用的样式MIXIN，方便开发者使用，具体可以查看 MIXINS