antd-color-replacer

antd 主题切换

Usage no npm install needed!

<script type="module">
  import antdColorReplacer from 'https://cdn.skypack.dev/antd-color-replacer';
</script>

README

一个 webpack 主题切换器

Build Status

食用方法

ant pro demo

  1. npm i antd-color-replacer
  1. 如果你使用 ant-pro

    1. 在 config/plugin 文件
    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';
  1. 其它
import AntdColorReplacer from 'antd-color-replacer';

const webpackConfig = {
  plugins: [
    new AntdColorReplacer({
      primaryColor: primaryColor,
    }),
  ],
};

import AntdColorReplacerClient from 'AntdColorReplacerClient/lib/client';

AntdColorReplacerClient.compile(newPrimaryColor);

配置项

  1. 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;
  1. 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;
}