Magento 2 themes are located in app/design/ and vendor folders. Each Magento 2 theme is connected to a certain area. Themes for admin panel are located at app/design/adminhtml folder, while app/design/frontend contains themes for frontend.
Themes in app/design are located at <area>/<ThemeVendor>/<theme_name>
folders, where <ThemeVendor>
is written with a capital letter in camelCase format, <theme_name>
in lowercase. For example: app/design/frontend/RedChamps/my_theme
.
Themes in /vendor are located at the following path /vendor/redchamps/theme-frontend-my-theme
, where redchamps/theme-frontend-my-theme is the composer package name. Similar to modules, there are no requirements to composer package name, but for simplicity, it is better to name them as“<vendor-name>/theme-<area>-<theme-name>”
Further in the next, we will use <theme_dir> to define the theme root directory, for this directory can be located both in app/design and in the vendor.
1. registration.php
A mandatory file that registers a theme in Magento.
2. theme.xml
A mandatory file with the theme configurations, like the name of the theme and its parent.
3. etc
Contains theme configuration files.
4. composer.json
Contains composer package configuration.
5. requirejs-config.js
Contains RequireJS config.
6. web
Contains theme css/js/fonts files.
7. media
Contains theme media files.
8. <ModuleVendor>_<ModuleName>
Common template for override view module files. For example, RedChamps_CustomModule. Inside the directories and files, the structure is similar to view/<area>/ folder inside the module (for example, app/code/RedChamps/CustomModule/view/frontend)