Skip to content

Instantly share code, notes, and snippets.

@agmm
Last active December 10, 2018 17:45
Show Gist options
  • Save agmm/55cb272fd6b872d3c58f357f09735a9f to your computer and use it in GitHub Desktop.
Save agmm/55cb272fd6b872d3c58f357f09735a9f to your computer and use it in GitHub Desktop.

Move into the 'dist' directory inside the antd package.

Create a file with the following content and name it 'my-theme.less'

@import "./antd.less";   // Import Ant Design styles by less entry

@primary-color: #d228e9;                         // primary color for all components
@link-color: #1890ff;                            // link color
@success-color: #52c41a;                         // success state color
@warning-color: #faad14;                         // warning state color
@error-color: #f5222d;                           // error state color
@font-size-base: 40px;                           // major text font size
@heading-color: rgba(0, 0, 0, .85);              // heading text color
@text-color: rgba(0, 0, 0, .65);                 // major text color
@text-color-secondary : rgba(0, 0, 0, .45);      // secondary text color
@disabled-color : rgba(0, 0, 0, .25);            // disable state color
@border-radius-base: 4px;                        // major border radius
@border-color-base: #d9d9d9;                     // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // major shadow for layers

Execute the following command in the terminal:

lessc --js my-theme.less result.css

Example to compile it inside the project styles folder:

lessc --js my-theme.less ../../../src/style/custom-antd.css
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment