I would like to know how to change colors and follow the proper naming conventions in my _theme.less file. I have grunt working on my local developer machine to compile the LESS files into css.

From the link below it states:


@btn__color: @color-brownie;
@btn-primary__color: @color-white;
@btn-secondary__color: @color-white;

I also have been successful at using:

@page__background-color: @color-gray20;

@primary__color: @color-gray90;

Where can I find a list of knowing all of the color options for the available mixings. For example @page__background-color: @color-red; does not work and @page__background-color: @color-black; works also @page__background-color: @color-white; works.

Is there a place to find all of these colors available to me by extending Luma? Also, what is the scenario (give example?) of proper way to define my own custom color as a mixin? Does this go in the _theme.less file?


You can get all color variables from the /lib/web/css/source/lib/variables/_colors.less file.

And you can add your own color variables into /app/design/frontend/Vendor/Theme/web/css/source/_variables.less or other less files.

  • Can you add an example of the Proper way to create a custom color? I have read the LESS documentation. Is it the same here? @base: #f938ab; Magento documentation states to please follow the accepted coding conventions. – camdixon May 26 '16 at 16:41
  • Yes, you can add your own color variables like, @header_bg_color: #f5f5f5; Then you can use this variable in your other less files, eg: .page-header { background-color: @header_bg_color; } – skynetch May 27 '16 at 0:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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