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

1	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>

<?xml version="1.0"?>

<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
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'adminhtml/Magemonkeys/Backend',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::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
    \Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magemonkeys_Backend',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::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>

<?xml version="1.0"?>

</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="Magento\Theme\Model\View\Design">
        <arguments>
            <argument name="themes" xsi:type="array">
                <item name="adminhtml" xsi:type="string">Magemonkeys/Backend</item>
            </argument>
        </arguments>
    </type>
</config>

<?xml version="1.0"?>

<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>

<?xml version="1.0"?>

<body>

<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="Magento\Backend\Block\Page\Header" 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>

<?xml version="1.0"?>

<body>

<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

php bin/magento setup:upgrade

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

php bin/magento cache:clean

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-64216c8d495c9452583411/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire B. Darji

Let’s have a call

Fill the form & Get Installation Support