Child Theme Change Colors - Less Mixins in Magento 2

Question

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:

http://magento2-demo.nexcess.net/pub/static/frontend/Magento/blank/en_US/css/docs/index.html

@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?

Answer 1

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.