basically i want to use the defined less variables in my custom theme.i have created a child theme of Luma .In child theme i have created a _theme.less file and by using the defined variables of less i changed the header panel background color by using

@header-panel__background-color: @color-black;

but i am confused where is the @header-panel__background-color is defined .i have searched also in lib folder but can't find any result.

1 Answer 1


You can check below file in vendor directory


Here in this file you can see this @header-panel__background-color.

Here in this less file Magento defines color for "@header-panel__background-color" so whenever we want to use this color code we will not add #4D926F there, we can use below line in our .less file to use same color.

#header {
  color: @header-panel__background-color;

So in Header I get this color "#4D926F".

You can check this for your reference link.

Hope this will help you!

  • Thanks for your reply,it will the change the header background color ,but my question is when i inspect header there is no class defined.how to guess header-panel class?
    – usman
    Commented Dec 4, 2019 at 6:16
  • Answer updated. Please review and let me know if you need any help then Commented Dec 4, 2019 at 6:25
  • Let me know if it helps. Thanks. :) Commented Dec 4, 2019 at 9:13
  • 1
    Thanks for your answer .its helps a lot.
    – usman
    Commented Dec 4, 2019 at 9:43
  • You're welcome Buddy :) Commented Dec 4, 2019 at 9:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.