Magento – How does theme inheritance work in Magento 2 / How to modify Luma

magento2themetheme-fallback

As I understood it, in a derived theme I should overwrite web/css/source/_theme.less to add my one styles / variables.

When I extend Magento/blank it works fine. But when I extend Magento/luma and make a _theme.less file with a few custom settings, some styles are lost.

I think there is a fallback handling (as in Magento 1) which just "replaces" the themes _theme.less with mine.

How can I extend the luma theme and just add my one styles? Or should I always stick to blank when creating own themes?

Best Answer

As you suspected, your custom _theme.less file is overriding the _theme.less file for luma. The most obvious indicator of overriding luma's _theme.less file are the smaller icons. If you look in

pub/static/frontend/NAMESPACE/THEME/LOCALE/css/source/_theme.less

you will see your custom file instead of the one luma uses. You will see at the bottom of 'styles-l.less' and 'styles-m.less' the @import directive for 'source/_theme.less'. When you add your own custom less file in the source directory of your theme you will need to add your own import directive to these two files for the less compiler to know they exist. Then delete the entire pub/static/frontend directory and /var/view_preprocessed directory and clear your cache using bin/magento cache:flush. You will also want to make sure you are in developer mode so these static files will be regenerated on demand when you load new pages in your browser. You will also want to be sure to use grunt to recompile all your less files to add them to the pub/static/frontend directory. Otherwise you will only see .css files.

You may need to create symlinks to the less files in pub if you find your changes made in your theme directory are not persisting to the pub directory. If you only want to extend the theme with a few modifications the styles-l.less and styles-m.less files already include an import directive for the less file name _extend.less so you can add your changes in that file and your changes will modify the parent theme with no further changes.

Inchoo wrote a good article a year ago that covers much of the front end architecture works. Another great resource is the Magento Developer Documentation

Related Topic