Magento 2 Create a Demo With Custom Themes

If you want create a custom theme please follow below steps

Create a theme directory

To create the directory for your theme:

1. Go to <your Magento install dir>/app/design/frontend.
2. Create a new directory named according to your vendor name like: /app/design/frontend/myvendor.
3. Under the myvender directory, create a directory named according to your theme. (e.g. mytheme) theme directory structure looks like below

app/design/frontend/

├── myvender/

│   │   ├──mytheme/

│   │   │   ├── etc

│   │   │   ├── media

│   │   │   ├── web

|   |   |   |    ├── css

|   |   |   |    ├── images

|   |   |   |    ├── js

│   │   │   ├── registration.php

│   │   │   ├── theme.xml

*etc/media/web folder copy to install magento directory

vendor/magento/theme-frontend-blank

Declare your theme

First need create mytheme/theme.xml to your theme directory

app/design/frontend//

Configure it using the following example:

<!--

/**

 * Copyright © 2015 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */

-->

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">    <title>My Custom Theme</title>

    <parent>Magento/blank</parent>

    <media>

        <preview_image>media/mytheampreview.jpg</preview_image>

    </media>

</theme>

Register your theme

Your theme directory add a mytheam/registration.php file with the following content:

<?php

/**

* Copyright © 2015 Magento. All rights reserved.

* See COPYING.txt for license details.

*/

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::THEME,

    'frontend/myvender/mytheme',

    __DIR__

);

Configure Your theme

Default theme.js file

<your Magento install dir>dev\tools\grunt\configs\themes.js

/**

 * Copyright © 2015 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */

'use strict';

/**

 * Define Themes

 *

 * area: area, one of (frontend|adminhtml|doc),

 * name: theme name in format Vendor/theme-name,

 * locale: locale,

 * files: [

 * 'css/styles-m',

 * 'css/styles-l'

 * ],

 * dsl: dynamic stylesheet language (less|sass)

 *

 */

module.exports = {

    blank: {

        area: 'frontend',

        name: 'Magento/blank',

        locale: 'en_US',

        files: [

            'css/styles-m',

            'css/styles-l',

            'css/email',

            'css/email-inline'

        ],

        dsl: 'less'

    },

    luma: {

        area: 'frontend',

        name: 'Magento/luma',

        locale: 'en_US',

        files: [

            'css/styles-m',

            'css/styles-l'

        ],

        dsl: 'less'

    },

    backend: {

        area: 'adminhtml',

        name: 'Magento/backend',

        locale: 'en_US',

        files: [

            'css/styles-old',

            'css/styles'

        ],

        dsl: 'less'

    }

};

After add mytheme code.

/**

 * Copyright © 2015 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */

'use strict';

/**

 * Define Themes

 *

 * area: area, one of (frontend|adminhtml|doc),

 * name: theme name in format Vendor/theme-name,

 * locale: locale,

 * files: [

 * 'css/styles-m',

 * 'css/styles-l'

 * ],

 * dsl: dynamic stylesheet language (less|sass)

 *

 */

module.exports = {

    blank: {

        area: 'frontend',

        name: 'Magento/blank',

        locale: 'en_US',

        files: [

            'css/styles-m',

            'css/styles-l',

            'css/email',

            'css/email-inline'

        ],

        dsl: 'less'

    },

    luma: {

        area: 'frontend',

        name: 'Magento/luma',

        locale: 'en_US',

        files: [

            'css/styles-m',

            'css/styles-l'

        ],

        dsl: 'less'

    },

    mytheme: {

        area: 'frontend',

        name: 'myvender/mytheme',

        locale: 'en_US',

        files: [

            'css/styles-m',

            'css/styles-l'

        ],

        dsl: 'less'

    },

    backend: {

        area: 'adminhtml',

        name: 'Magento/backend',

        locale: 'en_US',

        files: [

            'css/styles-old',

            'css/styles'

        ],

        dsl: 'less'

    }

};

**flush your cache

After add this file. We can see the theme in backend admin side. Content >> Theme

Now theme is created and displayed at admin side store >> Configuration >> General >> Design to change the theme.

Hope this will help full.