Create Admin Theme in Magento 2

Here we will explain how to create admin theme and how to apply the admin theme in Magento 2.

First we need to switch the Magento 2 application to the developer mode.

php bin/magento deploy:mode:set developer

Create Admin Theme

Now, we will explain step-by-step that what should be done.

Step 1: First create a <VendorName>/<theme name> folder at the app/design/adminhtml path for the new Magento admin theme.

Here we use Magemonkeys as VendorName and backend as theme name so path would be like this app/design/adminhtml/Magemonkeys/backend/

Step 2: In order to define Magento themes in the theme root folder create a theme.xml file at app/design/adminhtml/Magemonkeys/backend/ and paste the below code:

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

Step 3: In order to register a theme in the system & theme folder create a registration.php file at app/design/adminhtml/Magemonkeys/backend/ and paste the below code :

<?php
MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::THEME,
    'adminhtml/Magemonkeys/Backend',
    __DIR__
);

Step 4: Now we changed the logo on the admin login page and in the dashboard. So put your images in the app/design/adminhtml/Magemonkeys/backend/web/images folder to save the media file.

Create a Module to apply an admin theme

Step 1: The theme has already been created, but it is still unconnected. We create a specialised <VendorName>/<ModuleName> module in the app/code/ folder to connect the admin theme.

We will show you an example of a Magemonkeys/Backend module for the following path: app/code/Magemonkeys/Backend

Step 2: create a registration.php file in the app/code/Magemonkeys/Backend folder with the following code:

<?php
    MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'Magemonkeys_Backend',
    __DIR__
);

Step 3: Create a module.xml and di.xml file in the app/code/Magemonkeys/Backend/etc folder.

copy below code and add in 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="Magemonkeys_Backend" setup_version="0.0.1">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>

copy below code and add in 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="MagentoThemeModelViewDesign">
        <arguments>
            <argument name="themes" xsi:type="array">
                <item name="adminhtml" xsi:type="string">Magemonkeys/Backend</item>
            </argument>
        </arguments>
    </type>
</config>

Step 4: Create a admin_login.xml file in the app/code/Magemonkeys/Backend/view/adminhtml/layout/ folder with the following code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-login" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles" />
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_image_src" xsi:type="string">images/dws_logo.jpg</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Step 5: Create a default.xml file in the app/code/Magemonkeys/Backend/view/adminhtml/layout/ folder with the following code:

<?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="header">
            <block class="MagentoBackendBlockPageHeader" name="logo" before="-">
                <arguments>
                    <argument name="show_part" xsi:type="string">logo</argument>
                    <argument name="logo_image_src" xsi:type="string">images/dws_admin.png</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Step 5: Now run the following command:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy –f
php bin/magento cache:clean

Fill the below form if you need any Magento relate help/advise/consulting.

With Only Agency that provides a 24/7 emergency support.

Let’s initiate a discussion!!

With Only Agency that provides a 24/7 emergency support.