@genee/theme-vars 给 React 框架提供动态换主题的操作

Installation

yarn add @genee/theme-vars

Usage

在开发的时候使用下面类似的配置来打包 antd

// config-overrides.js
import { override, addBabelPlugins, addLessLoader } from 'customize-cra';
import { webpackThemeVars: themeVars } from '@genee/theme-vars/dev';

const modifyVars = {
    'primary-color': '#2b9f7f',
};

module.exports = {
    webpack: override(
        addLessLoader({
            lessOptions: {
                javascriptEnabled: true,
                modifyVars,
            },
        }),
        themeVars([
            {
                library: 'antd',
                followedVars: ['primary-color'],
                modifyVars,
            },
        ]),
    ),
};

在使用的时候

import { setVars } from '@genee/theme-vars';

(async () => {
    await setVars({
        'antd-primary-color': '#2b9f7f',
        antdPrimaryColor: '#2b9f7f',
        antd_primary_color: '#2b9f7f',
    });
})();

键值用什么拼写方式都可以, 最后会转换成 xxx-xxx-xx 的方式