Step by step to add a new color scheme to your theme

For example: Inspire theme

To add a new color scheme please follow these steps :

1- Preparing the color file under /inspire-theme/docroot/diffs/css/color_schemes Folder

- Note: you need to prepare a background image and put it under  /inspire-theme/docroot/diffs/images/color_schemes/ Folder with a name for example bg-mycolor.jpg.

- create a new file for example mycolor.css and put all these lines with your colors:

.aui{  {
     background: #08BEF1 url(../../images/color_schemes/skin-mycolor/bg-mycolor.jpg) no-repeat top;
.skin-mycolor .aui-menu-content li a.aui-focus, .skin-black .lfr-menu-list ul .taglib-icon.aui-focus,.skin-black .lfr-menu-expanded li a:focus {
background-color: #08BEF1;
color: #FFFFFF;
text-shadow: -1px -1px #08BEF1;


2- Add the line bellow to custom.css file under  /inspire-theme/docroot/diffs/css/ Folder :

/* ---------- color schemes import ---------- */

@import url(color_schemes/green.css);
@import url(color_schemes/black.css);
@import url(color_schemes/brown.css);
@import url(color_schemes/darkgreen.css);
@import url(color_schemes/grey.css);
@import url(color_schemes/lightblue.css);
@import url(color_schemes/lightred.css);
@import url(color_schemes/pink.css);
@import url(color_schemes/red.css);
@import url(color_schemes/violet.css);
@import url(color_schemes/mycolor.css);
3- Add your new color scheme to theme settings:
- Note: you need to prepare an image thumbnail and put it under  /inspire-theme/docroot/diffs/images/color_schemes/skin-mycolor/Folder with a name for thumbnail.png( that's for showing your color scheme in theme settings).
- Go to /inspire-theme/docroot/web-inf/ Folder and open the liferay-look-and-feel.xml file 
- you will see that there are many color scheme
- Add these lines bellow the last color scheme:
<color-scheme id="12" name="mycolor">