Theme development workflow

Enable development mode

In the installation directory, run:

Copy
bin/magento deploy:mode:set developer
Copied to your clipboard
bin/magento deploy:mode:set developer

See:

• About application modes
• Get started with command-line configuration

Create basic theme files

In the <magento_root>/app/design/frontend/<Your_Vendor>/<your_theme> directory, create the following files:

• theme.xml
• registration.php
• (optionally) composer.json

For details, see Create a new storefront theme

Apply the theme

1. In the Admin Panel, go to CONTENT > Design > Configuration
2. Find the record corresponding to your store view and click Edit.
3. In the Applied Theme drop-down, select your newly created theme.
4. Click Save Configuration.

For details, see Apply and configure a storefront theme

Choose LESS compilation mode

Grunt (recommended)

• Setup Grunt
• Add the theme to Grunt configuration
• Track changes

Client-side compilation

See CSS preprocessing#client-side compilation mode

Server-side compilation (default)

See CSS preprocessing server-side compilation mode

Custom preprocessor

See Using custom CSS preprocessor

Create your styles

See:

• Quick start guide to working with styles
• All about styles in themes

Debug

See:

• Locate the CSS/Less file you need to change
• CSS source maps
• Track changes using Grunt

Clean cache and/or static files

• Certain changes in styles require cleaning previously pre-processed and published static view files. Run grunt clean <theme> or manually clear the pub/static and var/view_preprocessed directories. Do this after any changes in server-side compilation mode. For the client-side or Grunt compilation, see Clean static files for details.

• Changes in layout and templates requires cleaning cache. See Clean cache for details.

Make sure that the same styles are delivered to production (optional)

When you finish developing and your styles are ready to go to production, you can configure your Grunt/Gulp less compiler to minify compiled code, disable source maps generation and then copy the compiled files to /app/design/frontend/<Vendor>/<theme>/web/css directory next to source files. They will be used in static content deploy instead of running backend compilation (and static content deployment process will run faster).

Switch to production mode

In the installation directory, run:

Copy
bin/magento deploy:mode:set production
Copied to your clipboard
bin/magento deploy:mode:set production

See application modes for details.

Deploy static content

To publish your static files to the pub/static directory when your instance is set to production mode, run the static content deployment tool.

Last updated 12/13/2023

Was this helpful?

Yes

No