How to create Magento 2 theme?

Question

I have given tasks in Magento to create a custom theme. My task is to create Magento Theme from scratch. I want a source that I can refer to. If anyone did this before please help me.

Thank You

Answer 1

you can easily checking it in Magento 2 Documentation is there chapter about it https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-create.html – every single step is described with file structure.

Answer 2

I believe this cover it in detail link

And this is one of the best videos covering this topic link

This might be useful for you- link

Answer 3

You need to below require steps for creating a new theme in the Magento 2:-

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

Example: app/design/frontend/Custom/Default

2. Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory

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

3. Add a composer.json file (Optional)

{
     "name": "custom/theme-frontend-default",
     "description": "N/A",
     "config": {
         "sort-packages": true
     },
     "require": {
         "php": "~7.2.0||~7.3.0||~7.4.0",
         "magento/framework": "*",
         "magento/theme-frontend-blank": "*"
     },
     "type": "magento2-theme",
     "license": [
         "OSL-3.0",
         "AFL-3.0"
     ],
     "autoload": {
         "files": [
             "registration.php"
         ]
     }
 }

4. Add registration.php

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

5. Add preview image following path: app/design/frontend/Custom/Default/media/preview.jpg

6. Create directories for CSS, JavaScript, images, and fonts here: app/design/frontend/Custom/Default/web

7. Configure your theme in the Admin panel and activate the new theme

   Admin panel > Content > Design > Configuration > Select theme and Edit > Default Theme > Applied Theme > Select "Custom Magento Theme" from the dropdown > Save Configuration

   Screenshot: [https://www.awesomescreenshot.com/image/19172983?key=22fab33dc5226af2ee39586a53effa28][1]

8. Clear cache.

   Now you can see your Custom Magento Theme is installed and activated.

I hope this is useful.

Thank you :) [1]: https://www.awesomescreenshot.com/image/19172983?key=22fab33dc5226af2ee39586a53effa28

Answer 4

You can check out this link for the Magento front-end theme creation process https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-overview.html

Thanks.