Override Default Magento2 Luma Theme with Custom Theme

magento2overridestheme

I created a custom Theme with "Luma" as its parent.

Now I want to override .less / css stylings. (for example "header" background color)
Thats the Folder structure I have:
Folder Structure

I did copy "_module.less" from "vendor/magento/theme-frontend-blank/Magento_Theme/web/css/source" to "Magento_Theme/web/css/source/" in my custom theme folder and changed the "_module.less" file but It didnt override styles, so it didnt apply on my webshop.

I deleted the theme files in "/pub/static" and flushed magento cache, with no results.

Does anyone know how to override ".less" / css stylings of the default / luma theme? I want to customize the luma theme, thats why I created my custom theme and now Id like to change some css styles.

Thanks alot!

Best Answer

To override parent styles, you should create the following:

  1. In your theme directory, create a web/css/source sub-directory.
  2. Create a _theme.less file there.
  3. Copy all variables you need from the parent <Magento_Luma_theme_dir>/web/css/source/_theme.less, including those which will not be changed.
  4. Make the necessary changes.

More info under: Magento Developer Docs

Related Topic