How to Create an Admin Theme in Magento 2
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:
- Set the Magento into developer mode. Refer Magento 2 modes: Default, Developer, Productionfor the steps.
- Create a theme directory
- In the app/design/adminhtml directory create a new [Namespace]/[theme] directory.
-
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]
1234<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>
- Create registration.php in app\design\adminhtml\[Namespace]\[themename] and add following code:
1234<?phpuse \Magento\Framework\Component\ComponentRegistrar;ComponentRegistrar::register(ComponentRegistrar::THEME, 'adminhtml/[Namespace]/[themename]', __DIR__); // Example: 'adminhtml/Magento/backend' - Create admin_login.xml in app\design\adminhtml\[Namespace]\[themename]\Magento_Backend\layout and add following code:
123456789<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> - 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.
Any doubts about the custom admin theme?
If so, feel free to mention them in the Comments section below.
I’d be happy to help.
Do share the post with the Magento community via social media.
Also Read:
2 Comments
How to add custom styles?
Hello Eduard,
In order to add custom CSS, please add the code in xml file.
Thank You