Back to Top

Create an admin theme in Magento 2

Updated 13 June 2024

Today we will understand how to create an admin theme in Magento 2 and what it will look like.

Prerequisites

  1. You should have a custom theme.
  2. A custom module to apply the custom admin theme.

Overview To create a custom Admin theme, take the following steps:

  1. Create a theme directory.
  2. Add a declaration theme.xml.
  3. Add registration.php.
sidebar

Create a theme directory-:-

  1. You must create a custom theme at the location app/design/adminhtml/Webkul/AdminTheme.
  2. Add declaration theme.xml containing the theme name and parent theme name.
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>Webkul Admin Theme</title>
     <parent>Magento/backend</parent>
</theme>

3. Add a registration.php to register your custom theme.

 <?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'adminhtml/Webkul/AdminTheme', __DIR__);

Once you open the Admin or reload any Admin page having added the theme files to the files system, your theme gets registered and added to the database.

Apply an admin theme in Magento 2

  • Added a basic module (etc/module.xml and registration.php) so here We have created Webkul_AdminTheme.The module must load after the Magento_Theme module so you need to add into the sequence.
  • Specify the new Admin theme in your module’s di.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <!-- Admin theme. Start -->
    <type name="Magento\Theme\Model\View\Design">
        <arguments>
             <argument name="themes" xsi:type="array">
                 <item name="adminhtml" xsi:type="string">Webkul/AdminTheme</item> 
             </argument>
         </arguments>
    </type>
    <!-- Admin theme. End -->
</config>
  • Install the module by running the set:up command to make changes.

Logo Admin theme in Magento 2

In the default Magento/backend theme lib/web/images/magento-logo.svg is used as theme logo. To override it, in your theme directory, create a web/images sub-directory, and add your custom file named magento-logo.svg

Make CSS changes

Once the module is installed, You can make changes to the CSS and it will be effect at the admin end. You need to add the css at app/design/adminhtml/Webkul/AdminTheme/webkul/css/source/_theme.less

Searching for an experienced
Magento 2 Company ?
Find out More
result

Override the core modules

Now you can override the core module’s file at the admin end. Here we have overridden Magento_Analytics‘s section .phtml file and added a custom text.

copy the .phtml file from Vendor/Magento/Analytics/view/adminhtml/template/dashboard/section.html to app/design/adminhtml/Webkul/AdminTheme/Magento_Analytics/templates/dashboard/section.phtml

override custom module

Uninstallation

There is no such option so we have to disable the custom module which used to apply the admin theme it will remove the custom admin theme being working.

You may also check our quality Magento 2 Extensions.

Happy Coding

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home