1. Liferay Help Center
  2. Liferay DXP 7.2 Frameworks
  3. Front-End Development

Documentation

Creating Color Schemes for Your Theme

Color schemes give your theme additional color palettes. With just a small amount of changes to your theme’s CSS, you can subtly change the look of your theme, while maintaining the same design and feel to it.

Figure 1: Color schemes give administrators some choices for your themes look.

Figure 1: Color schemes give administrators some choices for your theme's look.

Follow these steps to create color schemes for your theme:

  1. Open the theme’s WEB-INF/liferay-look-and-feel.xml file and follow the pattern below to add the default color scheme. If your default styles are in _custom.scss, use the default <css-class> as shown in the example below. See the liferay-look-and-feel DTD for an explanation of each of the elements used below:

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

  2. Add the remaining color schemes below the default color scheme, using the pattern below. Note that the IDs, names, and CSS classes must be unique for each color scheme.

    <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 configuration is shown below:

    <look-and-feel>
	<compatibility>
		<version>7.2.0+</version>
	</compatibility>
	<theme id="my-great-theme" name="My Great 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="Dark">
			<css-class>dark</css-class>
		</color-scheme>
		<color-scheme id="03" name="Light">
			<css-class>light</css-class>
		</color-scheme>
		<portlet-decorator ...>
			...
	</theme>
</look-and-feel>

  3. Create a folder for your color schemes (color_schemes for example) in the theme’s css folder, and add a .scss file to it for each color scheme your theme supports, excluding the default color scheme since those styles are included in _custom.scss.

  4. The color scheme class is added to the theme’s <body> element when the color scheme is applied, so add the class to the color scheme’s styles to target the proper color scheme. The example below specifies styles for a color scheme with the class day:

    body.day { background-color: #DDF; }
.day a { color: #66A; }

  5. Import the color scheme .scss files into the theme’s _custom.scss file. The example below imports _day.scss and _night.scss files:

    @import "color_schemes/day";
@import "color_schemes/night";

  6. Create a folder for each color scheme in your theme’s images folder, and add a thumbnail preview for them. The folder name must match the color scheme’s CSS class name.

There you have it. Now you can go color scheme crazy with your themes!

« Creating a Thumbnail Preview for Your ThemeMaking Configurable Theme Settings »
Was this article helpful?
0 out of 0 found this helpful