Create an admin theme in Magento 2

Today we will understand how to create an admin theme in Magento 2 and what it will look like.

Prerequisites

1. You should have a custom theme.
2. A custom module to apply the custom admin theme.

Overview To create a custom Admin theme, take the following steps:

1. Create a theme directory.
2. Add a declaration theme.xml.
3. Add registration.php.

Create a theme directory-:-

1. You must create a custom theme at the location app/design/adminhtml/Webkul/AdminTheme.
2. Add declaration theme.xml containing the theme name and parent theme name.

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

3. Add a registration.php to register your custom theme.

 <?php
use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'adminhtml/Webkul/AdminTheme', __DIR__);

Once you open the Admin or reload any Admin page having added the theme files to the files system, your theme gets registered and added to the database.

Apply an admin theme in Magento 2

• Added a basic module (etc/module.xml and registration.php) so here We have created Webkul_AdminTheme.The module must load after the Magento_Theme module so you need to add into the sequence.
• Specify the new Admin theme in your module’s di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <!-- Admin theme. Start -->
    <type name="Magento\Theme\Model\View\Design">
        <arguments>
             <argument name="themes" xsi:type="array">
                 <item name="adminhtml" xsi:type="string">Webkul/AdminTheme</item> 
             </argument>
         </arguments>
    </type>
    <!-- Admin theme. End -->
</config>

• Install the module by running the set:up command to make changes.

Logo Admin theme in Magento 2

In the default Magento/backend theme lib/web/images/magento-logo.svg is used as theme logo. To override it, in your theme directory, create a web/images sub-directory, and add your custom file named magento-logo.svg

Make CSS changes

Once the module is installed, You can make changes to the CSS and it will be effect at the admin end. You need to add the css at app/design/adminhtml/Webkul/AdminTheme/webkul/css/source/_theme.less

Override the core modules

Now you can override the core module’s file at the admin end. Here we have overridden Magento_Analytics‘s section .phtml file and added a custom text.

copy the .phtml file from Vendor/Magento/Analytics/view/adminhtml/template/dashboard/section.html to app/design/adminhtml/Webkul/AdminTheme/Magento_Analytics/templates/dashboard/section.phtml

Uninstallation

There is no such option so we have to disable the custom module which used to apply the admin theme it will remove the custom admin theme being working.

Happy Coding