If you want create a custom theme
please follow below steps
Create a theme directory
To create the directory for your
theme:
- Go to <your Magento
install dir>/app/design/frontend.
- Create a new directory named according to your vendor
name like: /app/design/frontend/myvendor.
- 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.
