Bob's Knowledge Garden

Create Theme based off Luma Theme

2 min read

Create theme files

Assuming theme vendor is ‘Webmoves’ and theme is named ‘sns’

mkdir -p app/design/frontend/Webmoves/sns
mkdir  app/design/frontend/Webmoves/sns/media
mkdir  app/design/frontend/Webmoves/sns/etc
mkdir  app/design/frontend/Webmoves/sns/i18n
mkdir -p app/design/frontend/Webmoves/sns/web
mkdir -p app/design/frontend/Webmoves/sns/web/css/source
mkdir -p app/design/frontend/Webmoves/sns/web/fonts
mkdir -p app/design/frontend/Webmoves/sns/web/images
mkdir -p app/design/frontend/Webmoves/sns/web/js

Create and copy files to theme

touch  app/design/frontend/Webmoves/sns/i18n/en_US.csv
cp vendor/magento/theme-frontend-luma/etc/view.xml app/design/frontend/Webmoves/sns/etc/
cp vendor/magento/theme-frontend-luma/media/preview.jpg app/design/frontend/Webmoves/sns/media/

Declare the theme

app/design/frontend/Webmoves/sns/theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>SNS Nails</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Composer File

app/design/frontend/Webmoves/sns/composer.json
{
    "name" : "Webmoves/sns",
    "description" : "Custom Magento 2 Theme for sns",
    "require" : {
        "php" : "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-luma" : "100.0.*",
        "magento/framework" : "100.0.*"
    },
    "type" : "magento2-theme",
    "version" : "100.0.2",
    "license" : [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload" : {
        "files" : [
            "registration.php"
        ]
    }
}

Registration file

app/design/frontend/Webmoves/sns/registration.php

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

Requirejs stub

app/design/frontend/Webmoves/sns/requirejs-config.js

var config = {
    
};

Create extend files

Override the defualt Luma theme less files. It is important that these file start with _ otherwise they get compiled individually which messes things up.

_extend.less

This overrides the luma theme

app/design/frontend/Webmoves/sns/web/css/source/_extend.less

& when (@media-common = true) {
    @import '_styles.less';
}

_styles.less

This is where I like to put the main styles for the theme

app/design/frontend/Webmoves/sns/web/css/source/_styles.less

// styles go here

Run magento setup to flush cache and install theme

bin/magento setup:upgrade

The new theme should show up in the magento backend under

Content > Design > Themes

Set new theme under Content > Design > Config

Set up grunt less compilation

mv Gruntfile.js.sample Gruntfile.js
mv grunt-config.json.sample grunt-config.json
mv package.json.sample package.json
cp dev/tools/grunt/configs/themes.js dev/tools/grunt/configs/local-themes.js

Modify dev/tools/grunt/configs/local-themes.js to include the new theme

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'
    },
    sns: {
        area: 'frontend',
        name: 'Webmoves/sns',
        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'
    }
};

Install deps with npm

npm install
npm update

Run grunt

Now that the theme is set it, it should be possible to compile it with the command below:

grunt clean && grunt exec:sns && grunt less:sns && bin/magento cache:flush

Graph View