Child pages
  • Styling with LESS (using default shipped servoy less file)

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The solution .less file may contain your own css/less styles and using variables from the properties.less file is allowed. Here you can also add your own .less variables which can be used in your own less style.


For example you can change the value of the @main-color variable to use a different primary color applied to your theme. You can use any applicable CSS or LESS value as:  #E9720B, orange, lighten(#E9720B, 10%)...  You can also reference other less variables applicable to the same property, like @text-color-inverse: @text-color.


Code Block
languagecss
titleproperties.less
@main-color: #E9720B;							/* Main color */
@main-color-inverse: #FFF;						/* Main color inverse */
@main-color-light: lighten(@main-color, 10%); 	/* Main color light lighten(@main-color, 28%); #F9DB89 */
@main-color-dark: darken(@main-color, 15%); 	/* Main color dark EB8C39 */

@secondary-color: #18222C;						/* Secondary color */
@secondary-color-inverse: #FFF;					/* Secondary color inverse */
@secondary-color-light: #464E56;				/* Secondary color light*/
@secondary-color-dark: #364453;					/* Secondary color dark*/
....


@text-color : #777777;							/* Text color */
@text-color-inverse: @text-color;				/* Text color inverse */
....