Virtual themes in Magento 2

A theme is a component of Magento which provides a custom look and feel for the entire application area (frontend, backend) using a combination of templates, layouts, styles, javascript, and images.

They are designed to override or make custom view resources, provided initially by modules or libraries. Also, your new theme can be a standalone new theme, or it can inherit from the default or any other existing one. This is because you can use the theme inheritance concept implemented in Magento, that allows you to change only certain theme files.

Sure you knew all of this… and now, What is a Virtual theme?

Magento 2 theme types

There are three different types of Magento 2 themes, as we can see in

Magento/Framework/View/Design/ThemeInterface

    /**
     * Physical theme type
     */
    const TYPE_PHYSICAL = 0;
    /**
     * Virtual theme type
     */
    const TYPE_VIRTUAL = 1;
    /**
     * Staging theme type
     */
    const TYPE_STAGING = 2;

Physical theme

A physical theme is a normal theme, it refers to the fact that those themes are defined by files. For example, the Blank and Luma themes that come by default in Magento 2, and are physically defined under:

app/design

Virtual theme

A virtual theme would be (if I am not mistaken) a theme that extends existing physical themes, but it is not fully implemented yet. Actually, when you select a virtual theme, you can see there’s two tabs available in the edit section. Then those tabs let you provide custom CSS and JS.

So you could create for example a virtual theme that extends from some physical theme with custom CSS and JS for Xmas or Sales.

Then, the only way to set up a virtual theme is directly from the database:

INSERT INTO `theme` (`theme_id`, `parent_id`, `theme_path`, `theme_title`, `preview_image`, `is_featured`, `area`, `type`, `code`) VALUES (NULL, '1', NULL, 'test', NULL, '0', 'frontend', '1', 'misco/jones');

Why my theme changes don’t show up in the front-end?

Your theme might have become virtual, check on the ‘theme’ table of your database the type of your theme, and change the type to ‘0’.

How did it happen? You are probably working with Git, you may end up for a moment in a branch without the theme folders and somehow loaded the front-end, for that moment. Therefore Magento saw there were no files, and change the theme to virtual.

Staging theme

And finally, what is a Staging theme? Well.. I have no idea 😀

Did you know it? Do you know what a Staging theme is? Leave a comment, and share the post!