How to create themes in Magento 2. The right way.

Magento is an e-commerce framework built using php, based on symphony framework. With the support for Magento 1.x coming to and end by June 30, 2020.

A theme is a component of Magento application which provides a consistent look and feel for entire application area.

Often you find yourself working with templates, layouts and stylesheets. Magento come with two default themes called blank and luma.

Luma theme

Blank theme

Create a new theme which is not luma or blank.

1. Create a directory for the theme under app/design/frontend/<your_vendor_name>/<your_theme_name>.

1. Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory.
2. Add a composer.json file.
3. Add registration.php.
4. Create directories for CSS, JavaScript, images, and fonts in web folder.

Let's look into the theme.xml file

Your newly created theme extends blank theme, which has all necessary styles required for any theme development.
However if yout store is being developed from scratch, it's good to use blank as parent theme instead of luma as you would be overriding the existing styles to suite your store.

You can start applying styles based on modules or entire theme level using the _module.less and _theme.less files. However if you want to extend the parent styles and additional styles, you can use _extend.less.

You can check Magento's ui library for available less variables and mixins, which is available in lib folder in your Magento root directory, the library also comes with a guide.

Magento Ui library