Overview

The first step is to create your Hyvä theme that will contain all your customizations.

Creating a Child Theme

Follow the instructions from The official Magento Docs to create a new theme.

Set the parent theme to Hyva/default or Hyva/default-csp according to the default theme you installed.

Theme Preview Image

Please note we ship with a preview.png file instead of preview.jpg, which is referenced in the theme’s theme.xml.

Child themes in app/design/

Copy the web directory

Copy the web directory with all files from the parent theme vendor/hyva-themes/magento2-default-theme/web/ to your own child theme app/design/frontend/Acme/default/web/.

Tailwind config parent theme path

Next, you must configure the parent theme path in the web/tailwind/hyva.config.json file of your child theme.

For example, if your child theme hyva.config.json file is app/design/frontend/Acme/default/web/tailwind/hyva.config.json, then configure the parent theme by adding the following JSON:

{
    "tailwind": {
        "include": [
            { "src": "vendor/hyva-themes/magento2-default-theme" }
        ]
    }
}

Hyvä 1.3.x and Tailwind v3

Tailwind 3 used a tailwind.config.js file instead of the current hyva.config.js and tailwind-source.css.
Tailwind v3 was used in Hyvä themes release 1.2.x and 1.3.x.

The path to the parent theme needed to be enabled in the config:

```js
module.exports = {
  ...
  // 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',
  ]
}
...
```

If your theme is based on hyva-themes/magento2-default-theme-csp, the parent theme path needs to be adjusted to include the -csp folder name suffix.

Hyvä 1.1.x and Tailwind v2

Older Hyvä versions 1.1.x use Tailwind v2. In the configuration for that version, the path to the content section is slightly different.
If your theme is based on an older 1.1.x version of Hyvä and you haven't upgraded it to Tailwind v3, you need to use that structure, where content is nested inside a purge parent object:

  module.exports = {
  ...
  // keep the original settings from tailwind.config.js
  // only add the path below to the purge > content settings
  ...
  purge: {
    content: [
      // this theme's phtml and layout XML files
      '../../**/*.phtml',
      '../../*/layout/*.xml',
      // parent theme in Vendor
      '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
      ...
    ]
  }
}
...

Extending your theme works just like with default Magento Themes. You can override .phtml files and extend layout xml the same way as you could with a default Magento theme based on Luma.

Generating your themes styles.css

Once you make a change to your theme, be aware that you have to regenerate your theme's styles.css file.
For more information please read all instructions on working with Tailwind CSS, generating the styles.css file, and Tailwind CSS content configuration.