Create your own Hyvä theme in Magento 2

What is Hyvä?

Hyva is Magento 2 theme developed using alpine js and tailwind css . That is totally built from scratch using a completely blank theme. All layout and template files and all JavaScript have been removed in this theme; it’s running faster compared to the default Magento 2 theme.

Create Hyvä child theme step be step

We need to do similar steps to create Magento 2 child theme, But in Hyva theme we need to copy some extra files from the parent theme.

If we need to create our custom hyva theme than we need NPM for compile tailwind css.

lets create hyva child theme.

Register new theme in Magento 2

Using registration.php file we can register module, theme or any library. let’s register our custom theme in our application.

<?php
// FILE: app/design/frontend/RS/hyva/registration.php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/RS/hyva',
    __DIR__
);

Config your theme

For theme configuration we are use theme.xml file. This file configure the parent theme and theme title and theme preview image.

let’s create theme.xml file

<!--
// FILE: app/design/frontend/RS/hyva/theme.xml
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>CoolCodders Hyvä</title>
    <parent>Hyva/default</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

Create composer.json (optional file)

This file is optional to create custom theme in your application. let’s create composer.json file

/* FILE: app/design/frontend/RS/hyva/composer.json */
{
    "name": "rs/magento2-hyva-theme",
    "description": "Hyvä child theme",
    "minimum-stability": "dev",
    "require": {
        "magento/framework": ">=102.0.0",
        "hyva-themes/magento2-default-theme": "^1.3"
    },
    "type": "magento2-theme",
    "authors": [{
        "name": "Raju Sadadiya",
        "email": "rsadadiya@gmail.com"
    }],
    "license": "",
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Copy require files from parent theme

We need to copy etc and i18n directory from parent theme. If we do not have preview.png file then we need to copy media directory from parent theme.

We need to copy parent theme web/css and web/tailwind directory to our custom own theme.

Configure tailwind.config.js file

This file you can find from your_theme/web/tailwind/tailwind.config.js. My theme is RS/hyva so my tailwind.config.js path look like app/design/frontend/RS/hyva/web/tailwind/tailwind.config.js

This file provide configuration for template file path and layout file path. We are going to create child theme so we need to configure our theme file path as well as parent theme file path.

What you need to modify in this file.

  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
  // Examples for excluding patterns from purge
  content: [
    // this theme's phtml and layout XML files
    '../../**/*.phtml',
    '../../*/layout/*.xml',
    '../../*/page_layout/override/base/*.xml',
    // parent theme in Vendor (if this is a child-theme)
    //'../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
    //'../../../../../../../vendor/hyva-themes/magento2-default-theme/*/layout/*.xml',
    //'../../../../../../../vendor/hyva-themes/magento2-default-theme/*/page_layout/override/base/*.xml',
    // app/code phtml files (if need tailwind classes from app/code modules)
    //'../../../../../../../app/code/**/*.phtml',
  ]

Above code you can find this from line number 120 to 140 in tailwind.config.js file

We just need to remove comment line in parent theme path. Just like this

  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
  // Examples for excluding patterns from purge
  content: [
    // this theme's phtml and layout XML files
    '../../**/*.phtml',
    '../../*/layout/*.xml',
    '../../*/page_layout/override/base/*.xml',
    // parent theme in Vendor (if this is a child-theme)
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/*/layout/*.xml',
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/*/page_layout/override/base/*.xml',
    // app/code phtml files (if need tailwind classes from app/code modules)
    //'../../../../../../../app/code/**/*.phtml',
  ]

After this step. Goto your terminal and run the bellow steps.

cd app/design/frontend/RS/hyva/web/tailwind/

We require minimum npm 12.13.0 for compiling tailwind css.

Install require packages

For installing require packages we need to run this command.

npm install

/*For development you can use below command*/
npm run watch

/*For production you can use below command */
npm run build-prod

That’s all for create new you own hyva child theme in Magento 2.

Contact me(rsadadiya@gmail.com) know anyone need help in hyva theme or related to configure UI component.