Default Theme Properties

Overview

Your Servoy solution can be styled using LESS as dynamic style sheet language and/or unprocessed CSS (3.0). When creating a Servoy NG Client solution, the solution is created with the Servoy default less theme ( is possible to opt-out ); the theme offers configurable styles for commonly used components and a set of utility classes.

Quick Start

When creating a new solution the Servoy default less theme is included by default. To opt-out, in the Create a new solution wizard, click on Show advanced solution settings; uncheck the option "Add default servoy .less theme".

For existing Servoy solution instead, the less theme can be added using the solution's property styleSheet; click on "Add Less Theme Support" in the solution's styleSheet picker and follow the wizard.

To configure the Theme colors and properties open the custom_servoy_theme_properties.less in the solution's Media node. The file should not be edited directly, it can be opened with the Servoy Theme Properties editor (on double click).

You can further enhance and customize the solution's style writing your own CSS/LESS in the solution's .less file, also present in the solution's Media node of the solution.

How it works

The custom_servoy_theme_properties.less file can be used to configure the theme properties, which are defined as less variables. The file should not be edited directly; it can be opened with the Servoy Theme Properties editor. To open the Servoy Theme Properties editor select in the context menu ( right-click ) of the active solution the entry "Configure the theme". Alternatevely you can find the custom_servoy_theme_properties.less in the solution's Media node; double-click it to open the Theme editor.

Theme version

Every new version of Servoy may come with an updated version of the Theme, offering theme enhancements and fixes; note the theme enhancements may affect the overall style of your solution, particoularly if you have heavily customized the solution's style with your own CSS/LESS. To prevent breaking changes for your solution you can select a specific version of the Servoy Theme and decline the new enhancements. If you select 'latest' instead, you will always use the latest version of Servoy Theme.

Theme editing

Using the Servoy Theme Editor you can customize colors and properties to your preference. Theme properties are grouped in different categories; General properties affects the style globally, Brand colors affects the branding utilities ( e.g. btn-danger ), some of the most advanced Servoy components like sidenav, tabs etc.. have their own properties section.

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. If the property value is different than the default, the label color of the property is blue.

To reset the value to the default, right click the property name. In case you upgrade the theme to a newer version, and there are conflicts between properties values (so a value that was changed in the editor was also changed in the theme), the labels will be colored in red.

You can also view the actual content of the custom_servoy_theme_properties.less file, in the Source tab of the editor.

Custom style

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

Example

@import 'custom_servoy_theme_properties.less';

// Add your custom less/css to this file you can use the same less properties that are specified in the above properties.less 

/* Secondary background color, re-use theme variables to create new styles */
.bg-secondary {
	background-color: @secondary-color;
	color: @secondary-color-inverse;
}

a.bg-secondary:hover {
	background-color: @secondary-color-light;
	color: @secondary-color-inverse;
}

// new less variable
@brand-fourth: #F6B900;

/* Fourth variation for a background-color using new less variables */
.bg-fourth {
	background-color: @brand-fourth;
	color: @text-color;
}

a.bg-fourth:hover {
	background-color: @brand-fourth;
	color: @text-color;
}

Theme classes

The Servoy themes provides a set of utilities classes which can be applied to Servoy elements ( styleClass property ). See below the list of classes which can be used when the LESS theme is enabled.

General

These classes can be used on any Servoy element or Servoy layout container ( in Advanced forms )

Advanced Forms

These classes are esclusevely designed for Servoy Advanced Forms type ( Responsive ); can be used on any layout container and several component types ( Labels, Buttons )

Colors & Branded classes

Most of the classes supports branded colors (see branded classes). Branded colors defines the color schema for the branded classes selector; use branded selectors to highlight specific elements of your solutions, for instance you can use the selector .btn-danger on the delete button to color it as red. For each branded color variable there is a @brand-color-inverse which is used to create a color contrast between the background and foreground.

Branded Classes

Branding colors can be used in different class selectors, the following class selectors supports the branded colors.

Background colors

Typography

Selector applicables on labels and icons

Buttons

Selector applicables on buttons

Input Fields

Checkgroups

Tables

NG Grids

12 Grid Layout Containers

Bootstrap 12Grid and Margins

When nesting responsive form using tab/tabless panels, the inner form usually have an extra 15px margin left & right. To remove the margin set the styleClass margin-reset

Theme Properties

Theme properties are grouped with the following categories

General properties to configure global properties affecting main colors and default style for text, input fields.
Sidenav properties to configure the style of the Servoy Sidenav component.
Navbar properties to configure the style of the Servoy Navbar component.
Tabs properties to configure the style of the Tabpanel component.
Windows properties to configure the style of Window dialogs.
Dialogs properties to configure the style of the dialogs created with the dialogs plugin.
Tables properties to configure the style of the Tables.
Breadcrumb properties to configure the style of the Breadcrumb component.
Brand colors properties to define the color schema for the branded classes selectors, ( e.g. btn-info ).
Validation properties to configure style related to validation selectors (e.g. form-required )
Margin and Padding properties to configure the margins & paddings dimensions set by the helper classes: margin-10, margin-20, margin-30, padding-10 etc...

General Properties

Use these properties to configure global look & feel of your soluction. You can define the main colors and default style for text, input fields.

Sidenav Properties

Override these properties to customize the look & feel of the Servoy Sidenav component, commonly used as navigation menu.

Override these properties to customize the look & feel of the Servoy Navbar component, commonly used as top bar in your menu.

Tabs Properties

Override these properties to customize the look & feel of the Servoy Tabpanel component.

Windows Properties

Override these properties to customize the look & feel of the Servoy Window dialogs created with application.createWindow(...).

Dialogs Properties

Override these properties to customize the look & feel of the Servoy dialogs created with plugins.dialogs... .

Table Properties

Override these properties to customize the look & feel of the Servoy Tables. While the Table properties affects any type of Servoy Table component, note the NGGrids properties are specific to the NG Grid components having the ag-theme-servoy. The ag-theme-servoy theme can be set in the NG Grid element's styleClass property.

Override these properties to customize the look & feel of the Servoy Breadcrumb component.

Brand colors Properties

Define the color schema for the branded class selectors. Branded colors defines the color schema for the branded classes selector; use branded selectors to highlight specific elements of your solutions, for instance you can use the selector .btn-danger on the delete button to color it as red. For each branded color variable there is a @brand-color-inverse which is used to create a color contrast between the background and foreground.

Validation Properties

Define style related to validation selectors

Margins and Padding Properties

The theme classes margin-10, margin-20, margin-30, padding-10 etc... they set margin and padding of the element or layout container they are applied to. Default value are respectevely 10px, 20px, 30px. Changing the box size properties to any value of your preference.

PreviousStyling and Themes NextCSS / LESS

Last updated 10 months ago

Overview

Quick Start