In this article. we will explain how to create admin theme and how to apply the admin theme in Magento 2. Let’s find out how you can do it.
php bin/magento deploy:mode:set developer
Now, we will start to learn step-by-step.
Step 1: First create a <VendorName>/<theme name> folder at the app/design/adminhtml path for the new Magento admin theme.
Step 2: In order to define Magento themes, in the theme root folder.
<?xml version="1.0"?> <!-- /** * Created By: Dolphin Web Solution Pvt. Ltd. */ --> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Dolphin Admin Theme</title> <parent>Magento/backend</parent> </theme>
Step 3: In order to register a theme in the system, in the theme folder.
<?php /** * Created By: Dolphin Web Solution Pvt. Ltd. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'adminhtml/Dolphin/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/Dolphin/backend/web/images folder to save the media file.
We are going to follow the steps for Module Development.
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.
Step 2: create a registration.php file.
<?php /** * Created By: Dolphin Web Solution Pvt. Ltd. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Dolphin_Backend', __DIR__ );
Step 3: create a module.xml and di.xml file.
Add below code for the app/code/Dolphin/Backend/etc/module.xml file.
<?xml version="1.0"?> <!-- /** * Created By: Dolphin Web Solution Pvt. Ltd. */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Dolphin_Backend" setup_version="0.0.1"> <sequence> <module name="Magento_Theme"/> </sequence> </module> </config>
Similarly, add the below code for the app/code/Dolphin/Backend/etc/di.xml file.
<?xml version="1.0"?> <!-- /** * Created By: Dolphin Web Solution Pvt. Ltd. */ --> <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">Dolphin/Backend</item> </argument> </arguments> </type> </config>
Step 4: Create layout files for the admin login page and admin home page in Magento 2.
<?xml version="1.0"?> <!-- /** * Created By: Dolphin Web Solution Pvt. Ltd. */ --> <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"?> <!-- /** * Created By: Dolphin Web Solution Pvt. Ltd. */ --> <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>
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
Result:
After the run upgrade and deploy command, you can see the logo to be changed on the Admin Login Page and Admin Panel Home page.
That’s it!
I hope this technical blog will help you to find what you were looking for.
If you have any further questions about Magento 2 theme development or if need any help from our Magento 2 expert, contact us now for a free consultation.
Bookmark it for your future reference. Do comment below if you have any other questions.
P.S. Do share this note with your team.
Click one of our contacts below to chat on WhatsApp