You must have come across websites where you can switch between themes. You also want to create one in your react app with very less effort? This blog cum tutorial will solve your problem.

Antd also known as Ant Design is an open source component library for React. Antd provides very large set of ready made components with built in styling. You can explore and play with it here.

Antd also supports customizing themes using less variables. We are not going to customize any theme, instead we will be using predefined light and dark theme in antd.

Creating new react app

Create new react…

You might be familiar with both terms, most people generally use it to give space between two html elements. But have you ever thought what’s the real difference between them?

Let’s understand what makes them different.


  • Margin is space between two html elements.
  • Margin can be applied to block elements(like div, header).
  • Margin is not calculated in element height.
  • Margin is transparent but the background colour and images applied to element will not be applied to margin.


  • Padding is space from element border to content.
  • Padding is calculated in element height.
  • Padding is also transparent and the background colour and…

Tushar Tambe

Application Developer at ThoughtWorks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store