Customizing CSS in Jet Theme

How is CSS customization done in the Jet Theme?

Making style changes in any theme can be done in several different ways:
  1. by creating a child theme and using the backend configurations of it to experiment with different styles (this is the safest way);
  2. by extending the parent theme's styles through the _extend.less file (extending a theme using  _extend.less is the simplest option when you are happy with everything the parent theme has, don't need a child theme, but still want to add more styles to the parent theme);
  3. by overriding the parent theme styles (that is, overriding default Magento UI library variables). The drawback of this approach is that you need to monitor and manually update your files whenever the parent’s _theme.less file is updated.
With Jet Theme, we typically don't recommend using CSS and making edits through it, since our theme generates CSS from .less files. Also, these changes might disappear after the theme's update. To apply customizations to Jet Theme, we highly suggest creating a child theme and then making all the configuration changes there. This way, when a new version of Jet Theme is released, you will be able to update it with no worries.

Please refer to the Jet Theme User Guide for instructions on how to create a child theme in it.
     
However, if you still wish to apply new changes without creating a child theme, you can use the following instructions:

Step 1. Create a  _custom.less file inside the app/design/frontend/Amasty/JetTheme/web/css/source directory; 

Step 2. In the end of the app/design/frontend/Amasty/JetTheme/web/css/source/_extend.less file, add the following line:
​
@import '_custom.less'

Step 3. If you would like to customize a particular extension, you can do that by applying the files to this extension directly - app/design/frontend/Amasty/JetTheme/Module_Name/web/css/source/_module.less

Warning
Keep in mind that these changes will be lost after the update, so the backup of the files is highly advised.

If you have a child theme and still would like to customize your CSS files beyond the regular changes, you can do that through the Magento functionality. We advise you to refer to this Magento guide for further instructions.