Themes in Magento 2 are responsible for an attractive layout in the online store.
Similarly, one can create an admin theme in Magento 2.
A custom theme allows the admin to have a customized backend panel with custom logo, font, responsive design which makes it easier for the admin to administer!
One can create a custom admin theme in Magento 2 and include features like search tool, neat and clean panel arrangement, translation ready, custom colors, and much more!
Steps to create an admin theme in Magento 2:
Step 1: Set the Magento into developer mode. Refer Magento 2 modes: Default, Developer, Productionfor the steps.
Step 2: Create a theme directory
In the app/design/adminhtml directory create a new [Namespace]/[theme] directory.
Step 3: Add a declaration theme.xml
- Add theme.xml containing at least the theme name and the parent theme name in the theme directory. It is a good practice to inherit from the default Magento Admin theme: Magento/backend
- Add or copy from an existing theme.xml to your theme directory app/design/adminhtml/[Namespace]/[themename]
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Admin Custom Theme for Magento 2</title> <!-- your Custom theme's name -->
<parent>Magento/backend</parent> <!-- it must be parent theme. Example: Magento/backend -->
</theme>
Step 4: Create rregistration.php in app\design\adminhtml\[Namespace]\[themename] and add following code:
<?php use \Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register(ComponentRegistrar::THEME, 'adminhtml/[Namespace]/[themename]', __DIR__); // Example: 'adminhtml/Magento/backend'
Step 5: Create admin_login.xml in app\design\adminhtml\[Namespace]\[themename]\Magento_Backend\layout and add following code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-login" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_image_src" xsi:type="string">images/magento-icon.svg</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 6: Add magento-icon.svg in app\design\adminhtml\[Namespace]\[themename]\web\images folder
That’s it.
You can refer the method to apply an admin theme in Magento 2 once you have created your custom theme! Also you will need to create Magento 2 admin menu to access any custom page from the admin panel.
Do share the post with the Magento community via social media.
Also Read:
