Missing variable @copyright__background-color when deploying new Child Theme

Magento 2 Frontend Design
1

Hi Craig,

Recently I spent some time learning how to build a custom store theme.

In order to do so I created a directory for my theme under app/design/frontend/MyTheme/makemoney

Then I declared my theme adding a theme.xml file, made my theme composer package creating composer.json file and finally added registration.php file.

custom theme
custom theme1560Ă—850 190 KB

Next, I applied the new theme in the M admin panel Content > Configuration > Default Theme/Applied Theme.

I can see that the theme has been applied, also registered and it depends on Luma.

mytheme2
mytheme21240Ă—400 42.5 KB

Save the configurations and flash my cache.

Now I wanted to do some customization with the theme changing default M colours.
In order to do it I added an overriding _theme.less file in the app/design/frontend/MyTheme.makemoney/web/css/source directory with the following content.

//  Color nesting
@page__background-color: @color-gray20;
@sidebar__background-color: @color-gray40;
@primary__color: @color-gray80;
@border-color__base: @color-gray76;

@link__color: @color-gray56;
@link__hover__color: @color-gray60;

//  Buttons
@button__color: @color-gray20;
@button__background: @color-gray80;
@button__border: 1px solid @border-color__base;

//  Primary button
@button-primary__background: @color-orange-red1;
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__color: @color-white;
@button-primary__hover__background: darken(@color-orange-red1, 5%);
@button-primary__hover__border: 1px solid @color-orange-red2;
@button-primary__hover__color: @color-white;

//  Navigation
@navigation-level0-item__color: @color-gray80;
@submenu-item__color: @color-gray80;

@navigation__background: @color-gray40;
@navigation-desktop-level0-item__color: @color-gray80;
@navigation-desktop-level0-item__hover__color: @color-gray34;
@navigation-desktop-level0-item__active__color: @navigation-desktop-level0-item__color;

//  Tabs
@tab-control__background-color: @page__background-color;

//  Forms
@form-element-input__background: @color-gray89;
@form-element-input-placeholder__color: @color-gray60;

//  Header icons
@header-icons-color: @color-gray89;
@header-icons-color-hover: @color-gray60;

To start with I wanted to test it with the Magento official documentation content so I won’t make any mistakes.

Next, I cleared static files cache running the following commands

rm -rf pub/static/*
rm -rf var/view_preprocessed/*

I also flush the cache.

After all the page brakes.

customtheme
customtheme1295Ă—837 65.2 KB

If you have time can you please give me a tip what am I doing wrong?

To start with I would like to change colours of my buttons. Then I may play with navigation, links and so on. All should be manageable in the _theme.less file but at present, it doesn’t work for me for some reason.

Thank you.

Regards,
Pawel

2

Did you try deploying the static content?

bin/magento setup:static-content:deploy en_US en_GB -f

(replace en_US and en_GB with relevant locales)

bin/magento cache:clean

If that doesn’t work, package the theme into a zip and I’ll have a look tonight. It would be useful to establish some sort of case study on this afterwards. As no doubt others will find this useful.

3

Hi Craig,

I tried to run the command and I got this.

content deploy
content deploy1896Ă—453 184 KB

I zipped the theme but how can I send it to you?

4

I’ve enabled the attachment of .zip files to posts now. Either attach to this post or PM me with it.

5

ApmFashion.zip (13.1 KB)

My vendor name is actually ApmFashion, not MyTheme but I’m not going to re-do it.
The theme is very simple. Just new logo, composer.json, registration.php and _theme.less under web directory.

I hope I provided you with enough information.
Once again thank you for your time.
Pawel

6

Ok, so this is what’s going on…

One of the parent theme files (_module.less) refers to a variable called “@copyright__background-color”. This variable is stored inside of a parent theme file called _theme.less.

When you created your new Child Theme, you added an override file (_theme.less) to “replace” the core version of this file. The quick solution is to add a variable for “@copyright__background-color” so that the reference is no longer broken. Think if it like a broken link.

The fix

Step 1: Add the below code to the top of _theme.less in your Child Theme. This recreates the missing variable:

//  Variables
@copyright__background-color: #000000;

Step 2: Manually remove any processed files that has already been generated (as Magento user from the Magento root directory):

rm -rf pub/static/frontend/ var/view_preprocessed/

Step 3: Then redeploy your static content:

bin/magento setup:static-content:deploy en_US -f

Final result from following these 3 steps…

themetest
themetest1306Ă—296 16.9 KB

Further reading

I’m not a frontend developer… However, it might be worth looking into the _extend.less file. As I’m pretty sure that this file is used to makes changes (i.e. extend) where as the other .less files are used to replace files (i.e. override). Working on the extend file may result in avoiding these issues in the future. It’s entirely possible that you did everything correctly and “by the book” - And this simply might be down to an oversight from Magento or one of its other modules. But please fact check this before taking my word for it.

1 Like
7

:clap: Great! Thank you very much.
I’m not a frontend developer and I’ll probably never be but I want to understand what I am doing. It will be useful in dealing with any theme.

Now I can start changing colours of different site elements, buttons, navigation, links and such.

Guys, please contribute to this post how you change things and where.
Thank you.

Pawel

1 Like