Color schemes give your theme additional color palettes. They only require a small amount of changes to your theme’s CSS. This is an easy way to subtly change the look of your theme, while maintaining the same design and feel to it.
Follow these steps to create color schemes for your theme:
-
Create a folder to hold color schemes (
color_schemesfor example) in the theme’scssfolder and add a.scssfile to it for each color scheme your theme supports. -
Choose a CSS class to identify each color scheme, and specify this class in the color scheme’s styles. The color scheme’s name is a good choice. This class is added to the site’s
<body>element when the color scheme is applied, so you must specify this class in the color schemes styles for them to work. For example, you could specify.dayfor a color scheme CSS file named_day.scss:body.day { background-color: #DDF; } .day a { color: #66A; } -
Import the color scheme
.scssfiles into the theme’s_custom.scssfile. The example below imports_day.scssand_night.scssfiles:@import "color_schemes/day"; @import "color_schemes/night"; -
Create a folder for each color scheme in your theme’s
imagesfolder, and add a thumbnail preview for each color scheme. The folder name must match the color scheme’s CSS class name you specified in step 2. -
Open the theme’s
liferay-look-and-feel.xmlfile and follow the pattern below to add the default color scheme. A default color scheme is required so users can return to the theme’s default look and feel after choosing a different color scheme. Note that the color scheme’snamevalue is arbitrary, but the<css-class>element’s value must match the CSS class you specified in step 2. If the default color scheme styling is in the theme’s_custom.scssfile, usedefaultfor the<css-class>. Also note the inclusion of the<color-scheme-images-path>element. This specifies the theme thumbnail image location. Place this element in the first color scheme to configure the images path for all the color schemes:<theme id="my-theme-id" name="My Theme Name"> <color-scheme id="01" name="My Default Color Scheme Name"> <default-cs>true</default-cs> <css-class>default</css-class> <color-scheme-images-path> ${images-path}/my_color_schemes_folder_name/${css-class} </color-scheme-images-path> </color-scheme> ... </theme> -
Add the remaining color schemes below the default color scheme, using the pattern below:
<color-scheme id="id-number" name="Color Scheme Name"> <css-class>color-scheme-css-class</css-class> </color-scheme>
An example liferay-look-and-feel.xml file is shown below:
<look-and-feel>
<compatibility>
<version>7.1.0+</version>
</compatibility>
<theme id="my-liferay-theme" name="My Liferay Theme">
<template-extension>ftl</template-extension>
<color-scheme id="01" name="Default">
<default-cs>true</default-cs>
<css-class>default</css-class>
<color-scheme-images-path>
${images-path}/color_schemes/${css-class}
</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Red">
<css-class>red</css-class>
</color-scheme>
<color-scheme id="03" name="Green">
<css-class>green</css-class>
</color-scheme>
</theme>
</look-and-feel>
Figure 1: Color schemes give administrators some choices for your theme's look.
There you have it. Now you can go color scheme crazy with your themes!