How to set a theme on a specific route or page


Web Development

Here you learn about how to set a theme on a specific route or page. Sometimes we have installed any theme on our front end and we need to check a page on the luma or blank theme while debugging any issue with the layout or functionality this might help you to do so.

Here we have a module named Webkul_Debug with routes.xml in Webkul/Debug/etc/frontend/routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="debug" frontName="debug">
            <module name="Webkul_Debug"/>

Then we create a controller to test the theme Webkul/Debug/Controller/Index/Index.php

<?php declare(strict_types=1);

namespace Webkul\Debug\Controller\Index;

use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Framework\View\Result\Page;
use Magento\Framework\View\Result\PageFactory;

class Index implements HttpGetActionInterface

    /** @var PageFactory */
    private PageFactory $pageFactory;

     * Index constructor.
     * @param PageFactory $pageFactory
    public function __construct(
        PageFactory $pageFactory
        $this->pageFactory = $pageFactory;

     * @return Page
    public function execute(): Page
        return $this->pageFactory->create();

Then we create an events.xml file to capture the layout load before event Webkul/Debug/etc/events.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="layout_load_before">
        <observer name="webkul_debug_set_theme_for_debug" instance="Webkul\Debug\Observer\SetThemeForDebug"/>

Then we create an observer file for our event named “webkul_debug_set_theme_for_debug” SetThemeForDebug.php Path : “Webkul/Debug/Observer/SetThemeForDebug.php”

<?php declare(strict_types=1);

namespace Webkul\Debug\Observer;

use Magento\Framework\App\Request\Http;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\View\DesignInterface;

class SetThemeForDebug implements ObserverInterface

    /** @var Http */
    private Http $request;

    /** @var DesignInterface  */
    private DesignInterface $design;

     * @param Http $request
     * @param DesignInterface $design
    public function __construct(
        Http $request,
        DesignInterface $design
        $this->request = $request;
        $this->design = $design;

     * @param Observer $observer
    public function execute(Observer $observer): void
        $pathInfo = $this->request->getPathInfo();

        if (substr($pathInfo, 0, 8) === '/debug') 

In the “setDesignTheme” function you can set any theme just like we passed the “Magento/blank” theme in the above code. And you can also change the condition on which the theme applies.

So that’s how to set a theme on a specific route or page. Now we can see the blank theme on our created route “base_url/debug” as shown in the below screenshot.

Here you check our other blogs:

Here you can check all about Magento 2 themes configuration, and development.

Please feel free to ask any questions we will try to answer them.

Leave a Reply

Your email address will not be published. Required fields are marked *