CODEWITHSUNDEEP
javascriptantd
Pandorque
Pandorque

Reputation: 396

Antd ConfigProvider not generating same colors as provided on color palettes

I'm working with antd at the moment while trying to use the color palette they provided (https://ant.design/docs/spec/colors) along with the ConfigProvider Dynamic Theme (https://ant.design/docs/react/customize-theme-variable).

I'm trying to use the Neutral Color Palette as my primary color, but I don't get the same colors as shown in the examples.

My code looks like this :

ConfigProvider.config({
  theme: {
    primaryColor: "#bfbfbf" // gray-6
  }
});

I'm ok with getting only 10 colors instead of 13, but why are they different from the colors initially shown in the palette ? Even the 10 colors I get (generated) from the ConfigProvider aren't the same as the 10 first colors shown in the Neutral Color Palette.

I have tried changing the primaryColor to use gray-5 or gray-7 instead of gray-6, but this doesn't generate me the same colors shown in the Neutral Color Palette.

Is it possible to generate the original colors from the Neutral Color Palette by using the ConfigProvider Dynamic Theme ?

Upvotes: 5

Views: 1261

Answers (1)

Marijn Degen
Marijn Degen

Reputation: 31

I could not find the gray pallet as well, I created a workaround. Instead of using useToken, use useAppToken, I have not tested it, hope this works :)

import { ConfigProvider, ThemeConfig, theme } from "antd";
import { PropsWithChildren } from "react";
import { AliasToken } from "antd/es/theme/interface/alias";
const { defaultAlgorithm, useToken } = theme;

// Antd doesn't generate gray classes, this is a workaround to hack them in anyway:
// https://stackoverflow.com/questions/71372137/antd-configprovider-not-generating-same-colors-as-provided-on-color-palettes
interface AppAliasToken extends AliasToken {
  gray1: string;
  gray2: string;
  gray3: string;
  gray4: string;
  gray5: string;
  gray6: string;
  gray7: string;
  gray8: string;
  gray9: string;
  gray10: string;
  gray11: string;
  gray12: string;
  gray13: string;
  hoverColor: string;
}

interface AppThemeConfig extends ThemeConfig {
  token: Partial<AppAliasToken>;
}

export const regularTheme: AppThemeConfig = {
  algorithm: defaultAlgorithm,
  token: {
    colorSuccess: "#1ca510",
    colorInfo: "#1677f1",
    // ... your other style customization
    gray1: "#ffffff",
    gray2: "#fafafa",
    gray3: "#f5f5f5",
    gray4: "#f0f0f0",
    gray5: "#d9d9d9",
    gray6: "#bfbfbf",
    gray7: "#8c8c8c",
    gray8: "#595959",
    gray9: "#434343",
    gray10: "#262626",
    gray11: "#1f1f1f",
    gray12: "#141414",
    gray13: "#000000",
    hoverColor: "rgba(255, 255, 255, 0.616)",
  },
};

const AntdProvider: React.FC<PropsWithChildren> = ({ children }) => {
  return <ConfigProvider theme={regularTheme}>{children}</ConfigProvider>;
};

interface useAppTokenReturn extends Omit<ReturnType<typeof useToken>, "token"> {
  token: AppAliasToken;
}

export const useAppToken: () => useAppTokenReturn = () => {
  const originalReturn = useToken();

  return {
    ...originalReturn,
    token: {
      ...(originalReturn.token as AppAliasToken),
      ...regularTheme.token,
    },
  };
};

export default AntdProvider;

Use it like this:

import { useAppToken } from "../your_path/AntdProvider";
const { token } = useAppToken();
console.log(token.gray1)

Upvotes: 2

Related Questions