How to create custom theme in Magento 2.3 – Dmytro Poperechnyy

Here are steps how to create your custom theme in Magento 2.3. This instruction is based on steps from this article with slight modifications. To create a new theme in Magento 2.3 you need to:

Create folder for your frontend theme: app/design/frontend/Vendor_Name
Create your theme’s folder: app/design/frontend/Vendor_Name/theme_name

Create your theme configuration file: app/design/frontend/Vendor_Name/theme_name/theme.xml with the following content:

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

<title>Your Theme Title</title>

<parent>Magento/luma</parent>

<media>

<preview_image>media/preview.jpg</preview_image>

</media>

</theme>

Our theme extends Magento luma theme.

Create app/design/frontend/Vendor_Name/theme_name/registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Vendor_Name/theme_name', __DIR__);

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Vendor_Name/theme_name', __DIR__);

Create app/design/frontend/Vendor_Name/theme_name/composer.json

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

{

"name": "vendor_name/theme-frontend-theme-name",

"description": "N/A",

"config": {

"sort-packages": true

"require": {

"php": "~7.1.3||~7.2.0||~7.3.0",

"magento/framework": "*",

"magento/theme-frontend-luma": "*"

"type": "magento2-theme",

"license": [

"OSL-3.0",

"AFL-3.0"

"autoload": {

"files": [

"registration.php"

]

}

Create app/design/frontend/Vendor_Name/theme_name/media folder and place preview.jpg inside of it.
Create app/design/frontend/Vendor_Name/theme_name/web folder with following subfolders: css, js, imagesLet’s place our theme logo.png to app/design/frontend/Vendor_Name/theme_name/web/images folder

Create app/design/frontend/Vendor_Name/theme_name/Magento_Theme/layout folder with our theme layout default.xml file.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/logo.png</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="report.bugs" remove="true"/>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="logo_file" xsi:type="string">images/logo.png</argument>

</arguments>

</referenceBlock>

</body>

</page>

Here in app/design/frontend/Vendor_Name/theme_name/Magento_Theme/layout/default.xml file we declare referenceBlock with our logo app/design/frontend/Vendor_Name/theme_name/web/images/logo.png

You can also create app/design/frontend/Vendor_Name/theme_name/etc/view.xml file with your frontend theme related properties like size of images, list of files that need to be excluded from JS bundling etc.
Here is the structure of your frontend theme:
Check if your theme appeared in admin/system_design_theme url
Now apply new theme in Admin -> Content -> Design -> Configuration (admin/theme/design_config/ url)
Run php bin/magento setup:static-content:deploy
Check storefront of your new theme

You Might Also Like

How to customize Magento 2 shipping and billing steps on checkout?

Magento 2 developer VS production mode

Magento ui-select component filter rate limit extender customization