Creating a custom admin theme in Magento 2 is great for branding and improving how your team uses the backend. A well-designed theme can make daily tasks smoother and more efficient.

This guide will walk you through creating your own custom admin theme. We’ll useMage2Developer as our Vendor Name andcustom_admin_theme as our Theme Name.

Step 1: Create Your Theme Folder

First, make a new directory for your theme insideapp/design/adminhtml/ directory.

Path:app/design/adminhtml/<VendorName>/<admin_theme_name>

Example:app/design/adminhtml/Mage2Developer/custom_admin_theme

This folder will hold all your theme’s files, including layouts, templates, and web assets.

Step 2: Declare Your Theme (theme.xml)

Next, tell Magento about your new theme by creating atheme.xmlfile. It defines your theme’s name and its parent theme. It’s best to inherit fromMagento/backend to get core styles and features automatically.

File:app/design/adminhtml/Mage2Developer/custom_admin_theme/theme.xml

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Mage2Developer - Admin Custom Theme</title>
    <parent>Magento/backend</parent>
</theme>

Step 3: Register Your Theme (registration.php)

For Magento to recognize your theme, it must be registered. Createregistration.phpdirectly in your theme’s root directory.

File:app/design/adminhtml/Mage2Developer/custom_admin_theme/registration.php

<?php
use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'adminhtml/Mage2Developer/custom_admin_theme',
    __DIR__
);

Step 4: Configure Theme Dependencies in Your Custom Module (module.xml)

To activate your theme, you’ll need a custom Magento module. Ensure your module’setc/module.xmlincludesMagento_ThemeandMagento_Backendin its<sequence>tag. This ensures the correct loading order.

Example module.xml forMage2Developer_CustomModule:

Path:app/code/Mage2Developer/CustomModule/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Mage2Developer_CustomModule" setup_version="0.0.1" >
        <sequence>
            <module name="Magento_Theme"/>
            <module name="Magento_Backend"/>
            <!-- For Magento Commerce (Enterprise) versions only: -->
            <!-- <module name="Magento_Enterprise"/> -->
        </sequence>
    </module>
</config>

Step 5: Specify Theme indi.xmlfor Adminhtml Area

Tell Magento’s Dependency Injection (DI) system to use your custom theme for the adminhtml area. Modify or create adi.xmlfile in your custom module’setc/adminhtmldirectory.

Path:app/code/Mage2Developer/CustomModule/etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Theme\Model\View\Design">
        <arguments>
            <argument name="themes" xsi:type="array">
                <item name="adminhtml" xsi:type="string">Mage2Developer/custom_admin_theme</item>
            </argument>
        </arguments>
    </type>
</config>

Step 6: Apply and Activate the Theme

Execute the following Magento commands from your root directory to register your module and theme, compile DI, and clear cache:

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:clean

Now, open your Magento admin panel in a browser. Your custom theme should be applied, though it will look like the default until you make visual changes.

Step 7: Customize Your Admin Theme (Example: Footer)

You can now modify your admin theme’s structure and styles, similar to frontend themes. For instance, remove the Magento version and copyright from the footer by overriding theMagento_Backendmodule’s layout XML.

File:app/design/adminhtml/Mage2Developer/custom_admin_theme/Magento_Backend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="copyright" remove="true"/>
        <referenceBlock name="version" remove="true"/>
    </body>
</page>

Clear your Magento cache again to see these changes:

bin/magento cache:clean

Conclusion

You’ve successfully set up a custom admin theme in Magento 2! This empowers you to tailor the backend experience for branding, usability, or specific features. You can now further customize CSS, JavaScript, templates, and layouts to create a unique and efficient admin interface.

We hope this blog may be understandable and useful to you. You can email us at mage2developer@gmail.com if we missed anything or if you want to add any suggestions. We will respond to you as soon as possible. Happy to help 🙂