How to create an Admin theme in Magento 2.4

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!

1.) Create theme directory

In the app/design/adminhtml directory create a new Vendor/theme directory.

app/design/adminhtml/M2e/dev/

Inside theme directory create theme.xml file


<?xml version="1.0" ?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>M2e admin </title> <!-- your theme's name -->
<parent>Magento/backend</parent> <!-- the parent theme-->
</theme>

2.) Create registration.php inside theme directory


<?php

use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'adminhtml/M2e/dev', __DIR__);

Now we have to Apply admin theme

3.) Create custom module to apply your admin theme

i)M2e/Dev/registration.php


<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'M2e_Dev', __DIR__);

ii)M2e/Dev/etc/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="M2e_Dev"/>
<sequence>
<module name="Magento_Theme"/>
</sequence>
</config>

iii) M2e/Dev/etc/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">M2e/dev</item>
</argument>
</arguments>
</type>
</config>

final step install the module

php bin/magento setup:upgrade

php bin/magento setup:di:compile

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!

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.

How to create module in magento 2

(I). Create your module basic folder structure

app/code/Magentoservices
app/code/Magentoservices/Tutorial

Module Block
app/code/Magentoservices/Tutorial/Block

Module Controller
app/code/Magentoservices/Tutorial/Controller

Module Configuration in etc folder
app/code/Magentoservices/Tutorial/etc
app/code/Magentoservices/Tutorial/etc/frontend

Module view files
app/code/Magentoservices/Tutorial/view
app/code/Magentoservices/Tutorial/view/layout
app/code/Magentoservices/Tutorial/view/templates

you can use your namespace  and module name at the place of Magentoservices(namespace) and Tutorial(modulename)

(II). First  create module.xml inside etc folder

(a) app/code/Magentoservices/Tutorial/etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
   <module name="Magentoservices_Tutorial" setup_version="1.0.0" schema_version="1.0.0"></module>
</config>

(b).To register the module, create a registration.php file inside app/code/Magentoservices/Tutorial/

&lt;?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
	'Magentoservices_Tutorial',
		__DIR__
	);

Now your Basic module is registered

Run basic commands to enable the module and run setup upgrade.you have to login to SSH and navigate to root directory and the run below commands

php bin/magento module:enable Magentoservices_Tutorial

php bin/magento setup:upgrade

(c). Create your module Controller router file
open app/code/Magentoservices/Tutorial/etc/frontend and create routes.xml for frontend controller and for admin controller create app/code/Magentoservices/Tutorial/etc/adminhtml
folder and the inside app/code/Magentoservices/Tutorial/etc/adminhtml create routes.xml

Route’s in magento are divided into 3 parts:
Route_id
controller
action
your module url depends on this
for example http://Tutorial.com/index.php/route_id/controller/action
our module url will be http://Tutorial.com/index.php/tutorial/index

 app/code/Magentoservices/Tutorial/etc/frontend/routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
<router id="standard">
  <route id="tutorial" frontName="tutorial">
        <module name="Magentoservices_Tutorial" />
   </route>
</router>
</config>

(d).Creating controller file
app/code/Magentoservices/Tutorial/Controller/Index.php
create Index.php file inside app/code/Magentoservices/Tutorial/Controller/Index/
for admin controller you can to create Adminhtml folder app/code/Magentoservices/Tutorial/Controller/Adminhtml

<?php
 
namespace Magentoservices\Tutorial\Controller\Index; 
use Magento\Framework\App\Action\Context; 
class Index extends \Magento\Framework\App\Action\Action{
	protected $_resultPageFactory;
			 
    public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
	{
		$this->_resultPageFactory = $resultPageFactory;
		parent::__construct($context);
	}
	public function execute()
		{
		$resultPage = $this->_resultPageFactory->create();
		return $resultPage;
		}
}

(e). Creating a block  for your module
Create a tutorial.php file in the app/code/Magentoservices/Tutorial/Block folder with the following

<?php
namespace Magentoservices\Tutorial\Block; 
class Tutorial extends \Magento\Framework\View\Element\Template{
	public function getCustomcontent()
		{
			$content = "This is custom content of block";
			return $content;
		}
	}

(f).Now last layout and Template files are left so create them and your first modulee is ready
Create layout and templates folder inside app/code/Magentoservices/Tutorial/view/

app/code/Magentoservices/Tutorial/view/frontend/layout
app/code/Magentoservices/Tutorial/view/frontend/templates
Create tutorial_index_index.xml inside app/code/Magentoservices/Tutorial/view/frontend/layout/

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
	<body>
		<referenceContainer name="content">
		    <block class="Magentoservices\Tutorial\Block\Tutorial" name="Tutorial" template="tutorial.phtml" />  
		</referenceContainer>
	</body>
</page>

Create template file inside app/code/Magentoservices/Tutorial/view/frontend/templates/tutorial.phtml

<div class="customcontent">
<h1><?php echo $this->getCustomcontent(); ?></h1>
</div>