适用于 webpack 环境下 的 主题切换插件

ant pro demo

如果你使用 ant-pro

import AntdColorReplacer from 'antd-color-replacer'; import defaultSettings from '../src/defaultSettings'; config.plugin('antd-color-replacer').use(AntdColorReplacer, [ { primaryColor: defaultSettings.primaryColor, }, ]);

替换原来引入的插件

import AntdColorReplacerClient from 'AntdColorReplacerClient/lib/client'; 其它

import AntdColorReplacer from 'antd-color-replacer'; const webpackConfig = { plugins: [ new AntdColorReplacer({ primaryColor: primaryColor, }), ], }; import AntdColorReplacerClient from 'AntdColorReplacerClient/lib/client'; AntdColorReplacerClient.compile(newPrimaryColor); 配置项 AntdColorReplacer

class AntdColorReplacer { constructor(options?: AntdColorReplacerOptions); } interface AntdColorReplacerOptions { // 是否是 antd 使用 默认 true , 此时 colors 已经生成 antd?: boolean; // 主色 primaryColor?: string; // 要替换的颜色数组 colors?: string[]; // 生成的 css 名称 默认是 css/theme-color.css filename?: string; // production 环境时 filename 是否生成 hash 默认是 即 css/theme-color.[hash].css hash?: boolean; // 是否开启宽松模式 即 不在符合主题颜色的情况下 颜色亮度值 在 luminance 设定的范围内 即可保留 readonly loose: boolean; // 目标 css prop default ['border', 'color', 'background', 'outline', 'box-shadow'] looseProps: string[]; // 参照 https://github.com/misund/get-relative-luminance luminance: [number, number]; // css 选择适配器 参照 antd-color-replacer/src/adapter.antdSelectorAdapter] selectorAdapter?: AntdColorReplacerAdapter; } /** * 自定义 css node 节点处理器 * 参考 postcss api * Tips: 如果要增加新的节点 请添加在当前节点前面 */ type AntdColorReplacerAdapterCustomHandle = (node: postcss.Rule, postCss: typeof postcss) => void; type IAdapterResult = string | false | AntdColorReplacerAdapterCustomHandle | void; type AntdColorReplacerAdapter = (selector: string) => IAdapterResult; AntdColorReplacerClient.compile:

AntdColorReplacerClient.compile: (options?: string | AntdColorReplacerClientOptions) => Promise<void>; type IMeatFilenameCustomHandle = (metaFilename: string) => string; interface AntdColorReplacerClientOptions { // 保存编译时的数据 json 文件路径 metaFilename?: string | IMeatFilenameCustomHandle; // 主色 primaryColor?: string; // 颜色数组 colors?: string[]; // 是否是 antd antd?: boolean; }