In this article, we will create a custom theme in Magento 2. We cover a few things like Magento theme declaration, registration, applying it in the admin panel, creating directories for CSS, JavaScript, images, and fonts, etc.

Please follow the below steps to know how to create a custom theme in Magento 2.

Step 1: Magento theme directory

• Magento 2 themes are located in the /app/design/frontend folder. First, it’s necessary to create a Vendor folder and then create a theme folder inside of it.
• For example: /app/design/frontend/Dolphin/custom_theme.

Step 2: Magento theme declaration

• In order to define Magento themes, in the theme root folder you should create a theme .xml file at app/design/frontend/Dolphin/custom_theme/ and paste the below code :

<!--
/**
 * Created By: Dolphin Web Solution Pvt. Ltd.
 */
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Dolphin Theme</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.png</preview_image> <!-- the path to your theme's preview image -->
    </media>

Note: Make sure you added preview.png file at app/design/frontend/Dolphin/custom_theme/media/ directory location.

Step 3: Magento theme registration

In order to register a theme in the system, in the theme folder you should create a registration.php file at app/design/frontend/Dolphin/custom_theme/ and paste the below code :

<?php
/**
 * Created By : Dolphin Web Solution Pvt. Ltd.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Dolphin/custom_theme',
    __DIR__
);

Step 4: Apply the custom style for your custom theme

You can create a _extend.less file at app/design/frontend/Dolphin/custom_theme/web/css/source/ like as below code:

& when (@media-common = true) {
    p {
    	font-size: 16px;
    }
}

Your theme directory structure will look like below.

app/design/frontend/<Vendor>/
├── <theme>/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├─css/
│   │   │   ├─source/
│   │   │       ├─_extend.less
│   │   │
│   │   ├─Fonts/
│   │   │   ├─font.ttf
│   │   │
│   │   ├─images/
│   │   │    ├── logo.svg
│   ├── registration.php
│   ├── theme.xml

Step 5: Now, Just run below Magento commands

php bin/magento s:up

php bin/magento s:s:d -f

php bin/magento c:c

Step 6: Applying theme in the admin panel

Now, check your theme is added to the theme list or not.

• Go to Admin -> Content -> Design -> Themes

To apply your custom theme :

• Go to Admin -> Content -> Design -> Configuration

That’s it!

I hope this technical blog will help you to find what you were looking for.

For more related to this blog is here:

1. use System Configuration and Helpers in Magento 2
2. Add custom variant checkout in Magento 2

That’s all, If you have any further questions about Magento 2 theme development or if need any help from our Magento 2 expert, contact us now for a free consultation.

Bookmark it for your future reference. Do comment below if you have any other questions.

P.S. Do share this note with your team.