Documentation
Liferay provides a rich store of resources and knowledge to help our community better use and work with our technology.
Color Schemes
Color schemes are specified using a CSS class name, with which you can not only change colors, but also choose different background images, different border colors, and so on.
In your liferay-look-and-feel.xml, you can define color schemes like so:
<theme id="deep-blue" name="Deep Blue">
<settings>
<setting key="my-setting" value="my-value" />
</settings>
<color-scheme id="01" name="Day">
<css-class>day</css-class>
<color-scheme-images-path>${images-path}/color_schemes/${css-class}</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Night">
<css-class>night</css-class>
</color-scheme>
</theme>
Inside of your _diffs/css folder, create a folder called color_schemes. Inside of that folder, place a .css file for each of your color schemes. In the case above, we would could either have just one called night.css and let the default styling handle the first color scheme, or you could have both day.css and night.css.
Assuming you follow the second route, place the following lines at the bottom of your custom.css file:
@import url(color_schemes/day.css);
@import url(color_schemes/night.css);
The color scheme CSS class is placed on the <body> element, so you can use it to identify you styling. In day.css you would prefix all of your CSS styles like this:
body.day { background-color: #ddf; }
.day a { color: #66a; }
And in night.css you would prefix all of your CSS styles like this:
body.night { background-color: #447; color: #777; }
.night a { color: #bbd; }
You can also create separate thumbnail images for each of your color schemes. The <color-scheme-images-path> element tells Liferay where to look for these images (note that you only have to place this element in one of the color schemes for it to affect both). For our example, create the folders _diffs/images/color_schemes/day and _diffs/images/color_schemes/night. In each of these folders place a thumbnail.png and screenshot.png file with the same sizes as before.