---
title: "How to Create a Custom Theme in Magento 2"
url: "https://dolphinwebsolution.com/how-to-create-a-custom-theme-in-magento-2"
date: "2021-07-09T05:07:23+05:30"
modified: "2023-08-28T07:08:09+05:30"
author:
  name: "Jayesh Makwana"
categories:
  - "Magento"
word_count: 494
reading_time: "3 min read"
summary: "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, JavaSc..."
description: "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 pan..."
keywords: "custom theme in magento,create a custom theme in magento 2,create a custom theme,custom theme in magento 2,custom theme, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Add condition field like Catalog Price Rule in custom Ui component Form Magento 2 [Part-2]"
    url: "https://dolphinwebsolution.com/add-condition-field-like-catalog-price-rule-in-custom-ui-component-form-magento-2-part-2"
  - title: "How to Add Dynamic Custom Tab in Product Page Magento 2"
    url: "https://dolphinwebsolution.com/add-dynamic-custom-tab-in-product-page-magento-2"
  - title: "Create, Update and Remove Custom Category Attributes Using UpgradeData.php In Magento 2"
    url: "https://dolphinwebsolution.com/create-update-and-remove-custom-category-in-magento-2"
---

# How to Create a Custom Theme in Magento 2

_Published: July 9, 2021_  
_Author: Jayesh Makwana_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/blog-post-3-1024x614.png)

In this article, we will [create a custom theme](https://dolphinwebsolution.com/shop/pwa-solution.html) 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](https://magento.stackexchange.com/questions/236265/why-is-media-preview-png-a-required-file-of-a-m2-theme) 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 :
```
/**
 * Created By : Dolphin Web Solution Pvt. Ltd.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Dolphin/custom_theme',
    __DIR__
);
```

#### **Step 4**: Adding Composer.json file

It’s not a necessity to file. But, you can create a **composer.json** file at
**app/design/frontend/Dolphin/custom\_theme/** for theme dependency information and paste the
below code :

```
{
    "name": "magento/dolphin-custom_theme",
    "description": "N/A",
    "require": {
        "php": "~7.2.*|7.3.*|7.4.*",
        "magento/theme-frontend-blank": "100.1.*",
        "magento/framework": "100.1.*"
    },
    "type": "magento2-theme",
    "version": "100.1.6",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
        "registration.php"
        ]
    }
}
```

#### **Step-5**: 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;
}
}

#### **Step 6**: Now, Just run Magento commands:

- php bin/magento s:up

- php bin/magento s:s:d -f

- php bin/magento c:c

#### **Step-7**: Applying theme in the admin panel

[![AI Integration in Magento: Benefits, Use Cases and Business Impact](https://dolphinwebsolution.com/wp-content/uploads/2023/04/themelist-1024x264-1.png)](https://dolphinwebsolution.com/wp-content/uploads/2023/04/themelist-1024x264-1.png)
Now, check your theme added in theme list or not.
**Go to Admin -> Content -> Design -> Themes**

To apply your custom theme :
**Go to Admin -> Content -> Design -> Configuration**

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


---

_View the original post at: [https://dolphinwebsolution.com/how-to-create-a-custom-theme-in-magento-2](https://dolphinwebsolution.com/how-to-create-a-custom-theme-in-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:53:38 UTC_