Theming Ant Design : a detailed step by step basic guide

Applying the theming guidelines provided by Ant Design’s documentation in an actual application

A series of colored sheets of paper neatly arranged
Photo by Hamed Daram on Unsplash

Step 1: create project, install Ant Design and babel-plugin-import

Link to commit

yarn add antd
yarn add -D babel-plugin-import
"plugins": [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
import { Select } from "antd";
Example app with Ant Design default theme (blue)
Example app with Ant Design default theme (blue)
Example app after Step 1 is complete

Step 2: install less and less-loader, edit Webpack config, edit babel-plugin-import style option

Link to commit

yarn add less
yarn add -D less-loader
{ 
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader",
options: {
javascriptEnabled: true
}
}
}
"plugins": [
[
"import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]

Step 3: override less variables in Webpack config (inline)

Link to commit

{
loader: "less-loader",
options: {
modifyVars: {
"primary-color": "green",
"link-color": "green",
"font-family": "serif"
},
javascriptEnabled: true
}
}
Example app with Ant Design our first  theme (green and serif font)
Example app with Ant Design our first  theme (green and serif font)
Example app after Step 3 is complete

Step 4: override less variables with a theme.less file

Link to commit

@primary-color: red;                                            @link-color: red;                                            
@font-family: sans-serif;
{
loader: "less-loader",
options: {
modifyVars: {
hack: `true; @import "${path.resolve(
__dirname,
"../",
"theme.less"
)}";`
},
javascriptEnabled: true
}
}
Example app with our second theme (red and sans serif font)
Example app with our second theme (red and sans serif font)
Example app after Step 4 is complete

Optional step: dealing with Ant Design’s global styles

Link to commit

.App {
text-align: center;
margin: 0 30%;
font-family: 'Courier New', Courier, monospace;
}
a {
color: blue;
font-weight: bold;
}
a:hover {
color: blue;
text-decoration: underline;
}
p {
margin-bottom: 3em;
}
Example app with our final theme (red with Courier font and blue links)
Example app with our final theme (red with Courier font and blue links)
Example app after Optional step is complete

Developer at @TalonOne, JavaScript enthusiast, and enthusiast in general ✨ matand.dev