How to create an admin theme in magento 2

If you want to replace any of the existing theme or admin modules templates you should create an admin theme. Creating an admin theme in magento 2 is a bit more complicated that a regular frontend child theme because you can’t chose the admin theme in the backend. You need to do it by creating a module.

So, creating an admin theme is a three fold operation:

Step 1: Create the actual theme

This is pretty much the same as for a the frontend child theme: You will need to create the theme directory and add the xml declaration theme and the registration.php file.

First, create a folder in the app/design/adminhtml and name it as you which (for the sake of this article I’ll call it Webguru/AdminTheme).

Create a declaration theme.xml file specifing the parent theme from which you will inherit all functionality. In the example below I’m inheriting from the default Magento/backend admin theme:

# File app/design/adminhtml/Vendor_theme/Admin_theme/theme.xml

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

Next, create a registration.php file to register your theme in magento.

// File app/design/adminhtml/Webguru/AdminTheme/registration.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'adminhtml/Webguru/AdminTheme',
    __DIR__
);

Step 2: Apply the theme

To apply an admin theme in magento 2 you will need to create a new module or use an existing one to add the necessary statements to the di.xml file. I’ll create a new module here to make this solution totally independent of existing modules.

To create a new module in magento 2 you need to create a new folder under app/code. I’ll called it Webguru/CustomAdminTheme.

Inside this folder create a registration.php file to register your module in magento:

// File app/code/Webguru/CustomAdminTheme/registration.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Webguru_CustomAdminTheme',
    __DIR__
);

Then create folder etc with files module.xml

# File app/code/Webguru/CustomAdminTheme/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Webguru_CustomAdminTheme" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>

and file di.xml

# File app/code/Webguru/CustomAdminTheme/etc/di.xml

<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">Webguru/AdminTheme</item>
             </argument>
         </arguments>
    </type>
</config>

It is this di.xml file that assigns the new admin theme in line 7.

Step 3: Compile

Finally run the usual bin/magento setup:upgrade command to update the components. If you are running in production mode you will also need to run bin/magento setup:di:compile and bin/magento setup:static-content:deploy. Clear the cache and you should now see the new admin theme applied!