Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – antd Global Theme Color Setting

I am new to antd and need to set the global theme to one of the antd colour palettes.
I am building an app using Django, React and antd.

I have installed the colours package:

npm install @ant-design/colors --save

Then I added the palette to my Layout.js file, my default layout:

import { purple } from '@ant-design/colors';

Which shows up in the console

console.log(purple);
console.log(purple.primary);

I am struggling with how to make this override the default colours and display the purple ones.

I have tried to include in the theme:

const theme = { primary: purple[5] };

I have also tried to add to the token:

const {
    token: { purple, colorBgContainer, borderRadiusLG },
} = theme.useToken();
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out from the antd website:

    https://ant.design/docs/react/customize-theme#customize-design-token

    By wrapping the layout in a ConfigProvider:

    <ConfigProvider
        theme={{
        token: {
            // Seed Token
            colorPrimary: purple.primary,
        },
        }}
    >
<Layout>
  ...
</Layout>
</ConfigProvider>

    This sets the Global colour theme. If there is a better way please let me know.


  2. 0

    To set the global theme to one of the antd color palettes, you can use the ConfigProvider component provided by antd. Here’s how you can achieve that:

    import { ConfigProvider } from 'antd';
import { purple } from '@ant-design/colors';

// Wrap your entire application with ConfigProvider
ReactDOM.render(
  <ConfigProvider theme={{ primary: purple[5] }}>
    <App />
  </ConfigProvider>,
  document.getElementById('root')
);

    By wrapping your entire application with ConfigProvider, you can set the theme prop to define the primary color. In this case, purple[5] is set as the primary color.

    This approach will override the default colors used by antd components with the selected palette. Now, all antd components within your application will use the purple color palette as their primary color.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search