Variables and icons/images

To modify one theme, you have to customize the value of some variables in the platform-ui\platform-ui-skin\src\main\webapp\skin\less\variable.less file.

Basic variables

There are 4 main color variables. These are used to define color for majority of component.






Color of text, border, and other UI elements.



Color of background displaying content.



Color of primary buttons and links.



Color of main background, for example, of header popup and tab items.

The other colors are dependant on the 4 main colors above and can automatically adapt to the value of the @baseColor variable (dark or light). In particular:


Inheritance/Value if base color (@baseColor) is dark (lightness(@baseColor) < 50%)

Inheritance/Value if base color (@baseColor) is light (lightness(@baseColor) >= 50%)



lighten(@baseColor, 20%) (#333333)

lighten(@baseColor, 60%);

Default color of title, text, text input, and label.


lighten(@baseColor, 50%) (#808080)

lighten(@baseColor, 50%)

Text color of navigation links when being selected.


lighten(@baseColor, 60%) (#999999)

darken(@baseColor, 20%)

Default color of small text, subtitle, and text field explanation.


lighten(@baseColor, 80%) (#cccccc)

darken(@baseColor, 20%)

Default border color of box, container, and text input.


darken(@primaryBackground, 4%)

darken(@primaryBackground, 3%)

Background color of table row, disabled input field, ready-only form, gray tab in a page when being hovered.


lighten(@primaryBackground, 3%)

lighten(@primaryBackground, 4%)

Background color of table accent, hr line, well, and active pagination.


darken(@primaryColor, 10.5%) (#224469)

darken(@primaryColor, 18.5%)

Border color of primary button, and left navigation.


lighten(@primaryColor, 18.5%) (#578dc9)

lighten(@primaryColor, 10.5%)

Background color of primary button, and dropdown when being hovered.




Background color of default button.




Background color of highlight button.


darken(@baseBackground, 20%) (#aac5e3)

lighten(@baseBackground, 90%)

Background color of arrow on the right of dropdown.


lighten(@quotePrimaryBorder, 18%)

darken(@primaryColor, 10%)

Background color of primary quote.

Advanced variables

For each component, some own variables are defined. They may be new values, or be inherited from base variables. To modify these components, change value of these ones, or change the variables inherited (be careful if it impacts the others).


Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus