How to Create New theme in Magento 2.x with Sample Data Like Luma Theme

As previously I added bootstrap css file to luma theme . Now I tried to create new theme use blank theme instead of luma theme

THIS IS MY WAY TO LEARN : 1. HOW TO DO IT = > HOW IT'S WORK

This is first part of my journey how to do it.


1.Create theme directory

Firstly,I created folders in m2(my magento 2 folder)/app/design/frontend/Lalit (vendor/namespace)

app/design/frontend/                                             
├── <Vendor>/
│   │   ├──…<theme>/
│   │   │   ├── …
│   │   │   ├── …


compare to this structure I created folder like this 

app/design/frontend/
├── Lalit/
│   │   ├──…MyTheme/
│   │   │   ├── …
│   │   │   ├── …

2. Declare theme/ 

Create the theme.xml in app/design/frontend/Lalit/MyTheme

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Lalit - MyTheme</title> <!-- your theme's name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>

 </theme>


3.Registered theme

Add registration.php in app/design/frontend/Lalit/MyTheme folder

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Lalit/MyTheme',
    __DIR__

);

Additionally I created file view.xml in etc folder  app/design/frontend/Lalit/MyTheme/etc/   for configure my images sizes and  other configuration.
as in blank theme 
Now folder structure look like this 

app/design/frontend/Lalit/
├── MyTheme/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images
│   │   │   ├── logo.svg
│   ├── registration.php
│   ├── theme.xml
│   ├── composer.json

│   ├── media/
│   │   ├── preview.jpg

Create <etc> folder

etc folder contain view.xml is optional if you want to configure your theme like change images sizes. you can find similar file in blank theme m2\vendor\magento\theme-frontend-blank\etc\view.xml

you can add composer file composer.json

7 8 9 10 11 12 13 14 15 16 17 18

{     "name": "magento/sample-module-theme",     "description": "N/A",     "require": {         "php": "~5.5.0|~5.6.0|~7.0.0",         "magento/theme-frontend-blank": "~100.0",         "magento/framework": "~100.0"     },     "type": "magento2-theme",     "version": "1.0.0",     "license": [         "OSL-3.0",         "AFL-3.0"     ],     "autoload": {         "files": [ "registration.php" ]     } }

Create <media> folder

create folder with name “media” and place inside it an image “preview.jpg”

Create <web> folder

• Create “css“ folder inside
• Create an image folder to place images
  • In this folder we place an image “logo.png” inside => it’s the Logo of theme
• Create “js” folder that contains all js files

Theme settings:

1.  select theme

• From Admin Administration Menu Content => Themes =>  My theme has appeared in the Design panel

save and clear cache

php bin/magento cache:clean