自定义主题

组件库支持自定义主题功能，有如下两种方式：

采用css变量的方式

如下图所示，在线调整好合适的颜色后，点击复制 css 变量按钮即可获得 css 主题变量组，之后将复制内容放在 style 标签中并插入head 标签中即可（需放在组件库样式引用之前）。

此方式适用于采用组件库提供的CDN样式资源。另外，为保证css变量的浏览器兼容性，推荐采用css-vars-ponyfill。

采用scss变量的方式

如下图所示，在线调整好合适的颜色后，点击复制 scss 变量按钮即可获得 scss 主题变量组，之后将复制的 scss 变量放在引入主题包 @txdfe/at-theme/teambition/scss/index.scss 变量之前。

此方式适用于采用组件按需加载，将组件加入到项目构建场景。

为适配组件库的定制主题，业务开发时使用的主题变量（详见这里）也需要进行css变量转换。为此我们提供了@txdfe/sass-loader，扩展了sass-loader的功能，使用方式如下：

// webpack.config.js

const themeVars = require('@txdfe/at-theme/teambition/js/index.js');

const cssvarWhiteList = Object.keys(themeVars).filter(k => (k.toLowerCase() === k || /^S\d{1,2}$/.test(k)));

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'css-loader',
          {
            loader: '@txdfe/sass-loader',
            options: {
              cssvar: {
                mode: 'append', // 插入模式，append或replace，默认append
                whiteList: cssvarWhiteList, // 需要转换的变量，默认转换所有变量，空数组表示不进行任何变量转换
                blackList: [], // 不需要转换的变量，若设置了whiteList，则该配置项失效
              },
            },
          },
        ],
      },
    ],
  },
};

其功能是将scss变量最终转换成css变量的形式：

// 转换前
a {
	color: $primary-brand;
	font-size: $S40;
}

// 转换后
a {
	color: #006cfa;
	color: var(--primary-brand, #006cfa);
	font-size: 40px;
	font-size: var(--S40, 40px);
}