Extend Magento Luma theme less

Question

When extending Magento Luma less files in one children theme, what exactly is the name and the complete structure of the "parent" folder (mentioned at https://developer.adobe.com/commerce/frontend-core/guide/css/quickstart/customize-styles/#extend-parent-styles) ?

I find the documentation very fuzzy here and I need help with this. I only can assume at this point we don't want to add the new file _extend-child.less on core parent theme folder.

Thank you very much in advance! See below the diagram from the documentation link.

app/design/frontend/Vendor/
├── parent
│   └── web
│       └── css
│           └── source
│               ├── _extend-child.less (keep this file empty)
│               └── _extend.less
└── child
    └── web
        └── css
            └── source
                └── _extend-child.less
...

Answer 1

Since the Luma theme does not have <luma theme dir>/web/css/source/_extend.less, you don't need to do anything with Luma's theme folder, just create <your theme dir>/web/css/source/_extend.less, then your theme will extend Luma theme (and Blank theme which is the parent of Luma theme) properly.

The diagram and the case mentioned in the documentation you are mentioning are for the parent theme (called theme A) that extends theme Blank and has web/css/source/_extend.less + the child theme (called theme B) that extends theme A and has web/css/source/_extend.less

Answer 2

Extending the Magento Luma theme with LESS in Magento 2 involves creating a child theme that inherits from Luma and then customizing the LESS files. Here’s a step-by-step guide to help you set this up:

Step 1: Create Your Theme Directory

First, create the directory for your custom theme. For example, let's name the vendor YourVendor and the theme yourtheme.

mkdir -p app/design/frontend/YourVendor/yourtheme

Step 2: Create theme.xml

Create the theme.xml file to define your theme and its parent.

app/design/frontend/YourVendor/yourtheme/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Your Theme Title</title>
    <parent>Magento/luma</parent>
</theme>

Step 3: Create registration.php

Create the registration.php file to register your theme.

app/design/frontend/YourVendor/yourtheme/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/YourVendor/yourtheme',
    __DIR__
);

Step 4: Create composer.json

Create a composer.json file for your theme.

app/design/frontend/YourVendor/yourtheme/composer.json

{
    "name": "yourvendor/yourtheme",
    "description": "Your custom theme",
    "require": {
        "php": "~7.3.0||~7.4.0||~8.1.0"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Step 5: Create view.xml

Create the view.xml file for your theme's view configurations.

app/design/frontend/YourVendor/yourtheme/etc/view.xml

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="category_page_list" type="thumbnail">
                <width>240</width>
                <height>300</height>
            </image>
        </images>
    </media>
</view>

Step 6: Create _extend.less

To customize the LESS files, create a _extend.less file where you can add your custom LESS code.

mkdir -p app/design/frontend/YourVendor/yourtheme/web/css/source

app/design/frontend/YourVendor/yourtheme/web/css/source/_extend.less

// Custom LESS code goes here
body {
    background-color: #f4f4f4;
}

Step 7: Create Magento_Theme/layout/default_head_blocks.xml

Override or extend the default layout to include your custom styles.

mkdir -p app/design/frontend/YourVendor/yourtheme/Magento_Theme/layout

app/design/frontend/YourVendor/yourtheme/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-l.css" />
        <css src="css/styles-m.css" />
    </head>
</page>

Step 8: Deploy Static Content

After creating your theme, deploy the static content.

php bin/magento setup:static-content:deploy -f

Step 9: Clear Cache

Clear the cache to ensure your changes take effect.

php bin/magento cache:clean

Step 10: Set Your Theme as Active

Finally, set your new theme as the active theme in the Magento admin panel.

1. Go to Content > Design > Configuration.
2. Edit the Default Store View.
3. In the Applied Theme dropdown, select your new theme (YourVendor/yourtheme).
4. Click Save Configuration.

Additional Customizations

• Custom Variables: You can create a variables.less file in app/design/frontend/YourVendor/yourtheme/web/css/source/ to define custom variables and override Luma variables.
• Custom Components: You can create custom components or override existing ones by placing your custom LESS files in the appropriate directory.

By following these steps, you can extend the Magento Luma theme with your custom LESS styles. Make sure to test your changes thoroughly in different browsers and devices.