Compilation mode

After you create a theme, you need to decide which LESS compilation mode to use before changing styles. You can choose between two modes:

• Server-side compilation mode (default): less file is compiled with PHP less library. In developer mode, PHP will generate the CSS files on the fly provided there is not one already. Running static content deploy will compile the stylesheet.

• Client-side compilation mode (recommended for theme development): Less files are compiled client-side on every page load, which results in slow response times and "flash of unstyled text" (FOUT) issues.

The examples in this topic use the simple approach for customizing theme styles. You make changes to the _extend.less file.

In our examples, we will change the color and font of the primary buttons. The default view of the primary buttons can be illustrated by the Create an Account button view on the Customer login page:

Before you begin

1. Create a theme. In your theme.xml file, specify Luma or Blank as the parent theme.
2. Apply your theme in the Admin.

Server-side compilation mode

The following is an illustration of how the process of making simple changes looks like with the server-side LESS compilation mode:

1. Navigate to your theme directory and add the web/css/source/_extend.less file.

2. Change the color of the buttons by adding the following code in the _extend.less file:

   Copy
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
       }
   }
   Copied to your clipboard
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
       }
   }

3. Clean static files cache.

4. Refresh the page and verify your changes.

   

5. Change the button font size by adding the following code in the _extend.less file:

   Copy
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
           font-size: 1.5em;
       }
   }
   Copied to your clipboard
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
           font-size: 1.5em;
       }
   }

6. Delete all files in the following directories:

   • pub/static/frontend/<vendor>/<theme>
   • var/view_preprocessed/pub/static/frontend/<vendor>/<theme>

7. Refresh the page and verify your changes.

   

Server-side compilation mode with Grunt

1. Navigate to your theme directory and create a web/css/source/_extend.less file.

2. Install Grunt and register your theme as described in Installing and configuring Grunt.

3. From your installation directory, run the following commands:

   • grunt exec:<your_theme>
   • grunt less:<your_theme>
   • grunt watch

4. Change the color of the buttons by adding the following code in the _extend.less file:

   Copy
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
       }
   }
   Copied to your clipboard
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
       }
   }

5. Refresh the page and verify your changes.

   

6. Change the button font size by adding the following code in the _extend.less file:

   Copy
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
           font-size: 1.5em;
       }
   }
   Copied to your clipboard
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
           font-size: 1.5em;
       }
   }

7. Refresh the page and verify your changes.

   

Client-side compilation mode

1. Navigate to your theme directory and create a web/css/source/_extend.less file.

2. Log in to the Admin.

3. Click STORES > Settings > Configuration > ADVANCED > Developer > Frontend development workflow > Workflow type.

4. Change the LESS compilation mode to client-side.

5. Clean static view files.

6. Change the color of the buttons by adding the following code in the _extend.less file:

   Copy
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
       }
   }
   Copied to your clipboard
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
       }
   }

7. Refresh the page and verify your changes.

   

8. Change the button font size by adding the following code in the _extend.less file:

   Copy
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
           font-size: 1.5em;
       }
   }
   Copied to your clipboard
   .action {
       &.primary {
           background-color: palevioletred;
           border-color: palevioletred;
           font-size: 1.5em;
       }
   }

9. Refresh the page and verify your changes.

   

Last updated 9/11/2023

Was this helpful?

Yes

No