Magento 2 What is the best practices to override the luma theme

Question

I have created a custom theme, parent theme is luma. I want to override the luma theme and implement a new design on custom theme.I know the _extend.less is the file to write extended css, I have added @layout__max-width:1170px; in _extend.less and it's working, but not sure that how to override the top category navigation, should I override the existing less files such as _navigation.less or just add regular css code in the _extend.less file?

Answer 1

When creating any new theme or module you need to define registration.php file at root of your module or theme folder.

Always use theme name in lowercase, Because Magento used this standard for theme name declaration.

You haven't any problem for keep Theme name in camelcase but use standard way is much appreciated.

You have to define registration.php file inside Magento_Theme folder, its in wrong place.

Correct diagram of theme structure will be below,

magento2
 |_ app
   |_ design
      |_ frontend
        |_ Custom
            |_theme
              |_Magento_Theme
                |_templates
                  |_root.phtml     - Copy of Luma
              |_registration.php
              |_theme.xml

Your path for registration.php is app\design\frontend\Custom\theme\registration.php

registration.php file :

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

your theme.xml file path will be,

app\design\frontend\Custom\theme\theme.xml

theme.xml file :

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

After all setup is completed, don't forget to run deploy command for the theme,

php bin/magento setup:static-content:deploy

Check inside your admin panel,

Content -> Design -> Configuration

for set your custom theme.

Remove cache and check in the frontend.

Hope it works!!