This post will cover some of what I’ve learned about the way Magento 2 (version 2.1) handles style sheets.
I’ve been upgrading a Magento store installation for a client who was using an older version of it along with a custom theme. After going through the data and code upgrade, it came time for the theme. From what I could tell, there’s no simple way to take an old Magento theme and apply it to the newest store. Plus, I didn’t want to do that anyway since the old theme wasn’t responsive. So, I decided to use the default Magento Luma theme and to adjust the styles to fit the branding of the store I was upgrading.
Theme
The new theme had to be created under the /app/design/frontend/{my_company_name}/{customer_theme_name} folder. The {my_company_name} variable serves as a namespace, allowing me to create multiple themes under one folder that I can switch back-and-forth from. That way, I can install a theme that overrides my main theme temporarily for any purpose I want; maybe something like a “Christmas” version of the theme.
Under the {customer_theme_name}/web/css/source/ folder is where all of the styles reside. These .less files correlate to those found in the parent theme. Since I’m extending the Luma theme, the styles for it can be found in the /vendor/magento/theme-frontend-luma/web/css/source folder. But, the Luma theme overrides the Blank Magento theme. The styles for that can be found in the /vendor/magento/theme-frontend-blank/web/css/source folder. And finally, all of the themes have a fallback style location, which can be found in the /lib/web/css/source/lib/ folder. From what I can tell, styles are loaded from that last folder, and then overridden and added on by each subsequent theme.
LESS Styles
The .less style sheets in the folder listed above can override or extend the parent theme styles. I didn’t want to override any of the style sheets since I didn’t want to lose any of the styles in them. Instead, I just wanted to add a few styles to them. If I were to install the following file: /app/design/frontend/{my_company_name}/{customer_theme_name}/web/css/source/_colors.less. It would override the entire file of all the parent themes. Instead, I found a way to add to the _colors.less file by using an _extend.less file. The _extend.less file is recognized and executed by Magento. Using it, you can call import statements like this:
@import '_colors_extend.less'; @import '_layout_extend.less'; @import '_navigation_extend.less';
Each of my new .less files has the name of the original file (e.g. _colors) plus and extra _extend.less added to it. So _colors.less becomes _colors_extend.less. Within the _colors_extend.less file, I can either override individual lines lf LESS code, or add new ones.
Buried LESS Files
Not all of the styles are found within the root of the themes under /web/css/source. Some of them seem to be buried within the modules folders of the themes. For example, I was looking for a way to modify the @minicart-icons-color variable. I first found this variable inside of the /vendor/magento/theme-frontend-luma/Magento_Checkout/web/css/source/module/_minicart.less file. In that file, there was a reference to the @minicart-icons-color variable, but no declaration anywhere I could find.
After some folder browsing, I finally ran a grep command on the /vendor folder, looking for “minicart-icons-color.” It turned up in the /vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source/_module.less file.
I thought I would create a Magento_Theme folder in my own theme, and then copy the directory structure followed by an addition of the _module.less file in order to override my parent them. But, it didn’t work. When I created this structure in my own theme, /{customer_theme_name}/Magento_Theme/web/css/source/_module.less, it seemed to be completely ignored. When I added the following CSS to it, it wouldn’t change the color of the icons in my theme header:
@header-icons-color: #ff0000; @header-icons-color-hover: #ffffff;
However, when I would go into the Luma theme and change these colors in the _module.less file, then they would show up on my next browser refresh. So, rather than try and figure out why this wasn’t overriding the parent like I thought it would, I decided to just add it to my _colors_extend.less file. This kind of bugs me since I’m trying to go along with the way Magento handles LESS files and keep my theme in line with it, but I don’t want to spend too much time digging into the problem.
Consideration
One thing to remember with all this is that you need to have your Magento installation set to develop mode. Otherwise, when you refresh your browser you won’t see any of the style changes since they all get cached in production mode.
