General Properties

Reference documentation for Servoy Theme General Properties

Overview

General Properties

The General Properties section provides foundational styling options that affect the overall visual presentation of your application. These settings cover primary and secondary colors, font specifications, border styles, and other essential design elements.

Properties

Some properties have an additional button: Select Color, which opens the color chooser wizard.

Here's an in-depth look at each property:

Main color

This is the primary color used throughout the application. It serves as the dominant color for key UI elements such as buttons, links, and active states. This color should align with the brand’s identity and be used consistently to create a cohesive look. Value: Hex color code (e.g., #E9702B).

Main color inverse

The inverse of the primary color. This is typically used for text or elements that are placed on backgrounds with the primary color, ensuring sufficient contrast and readability. Value: Hex color code (e.g., #FFF).

Main color light

A lighter shade of the primary color. This can be used for hover effects, borders, or secondary elements to maintain a visual hierarchy without deviating from the primary color scheme. Value: Derived using a lightening function (e.g., lighten(@main-color, 10%)).

Main color dark

A darker shade of the primary color. It is useful for shadows, active states, or to add depth to UI components, enhancing the visual structure. Value: Derived using a darkening function (e.g., darken(@main-color, 15%)).

Secondary color

An additional color used to complement the primary color. This secondary color is often used for less prominent elements and helps in creating a balanced color palette. Value: Hex color code (e.g., #18222C).

Secondary color inverse

The inverse of the secondary color. It is used for text or icons on secondary-colored backgrounds to ensure clear visibility and contrast. Value: Hex color code (e.g., #FFF).

Secondary color light

A lighter version of the secondary color. This can be applied to borders, backgrounds, or hover states of secondary elements to differentiate layers within the UI. Value: Hex color code (e.g., #464546).

Secondary color dark

A darker version of the secondary color, used to add depth and emphasis to secondary UI components, such as headers or active elements. Value: Hex color code (e.g., #364453).

Theme scrollbar

Toggles the use of custom scrollbar styling. When enabled, the scrollbar's appearance can be customized to align with the application’s theme. Value: Boolean (e.g., true or false).

Scrollbar background color

Sets the background color of the scrollbar track. This helps integrate the scrollbar with the overall color scheme of the application. Value: Hex color code (e.g., #FFF).

Scrollbar thumb color

Defines the color of the scrollbar thumb, the draggable part of the scrollbar. Ensuring a visible contrast with the track is essential for usability. Value: Hex color code (e.g., #DBDBDB).

Scrollbar border width

Specifies the width of the border around the scrollbar track and thumb. This property can add a refined edge to the scrollbar design. Value: CSS size value (e.g., 0 1px).

Font family

Determines the font family used for text throughout the application. It should be a web-safe font or a font included in your project's assets, chosen to enhance readability and aesthetic appeal. Value: Font family names (e.g., "Helvetica Neue", Helvetica, Arial, sans-serif).

rem to px

Sets the conversion ratio between rem units and pixels, which is crucial for responsive design. It allows the design to scale consistently across different screen sizes. Value: Numeric value (e.g., 10).

Font size h1

Specifies the font size for the h1 header. Each heading level should have a distinct size to establish a clear hierarchy and improve readability. Value: CSS size value (e.g., 36px).

Font size h2

Specifies the font size for the h2 header. Each heading level should have a distinct size to establish a clear hierarchy and improve readability. Value: CSS size value (e.g., 30px).

Font size h3

Specifies the font size for the h3 header. Each heading level should have a distinct size to establish a clear hierarchy and improve readability. Value: CSS size value (e.g., 24px).

Font size h4

Specifies the font size for the h4 header. Each heading level should have a distinct size to establish a clear hierarchy and improve readability. Value: CSS size value (e.g., 18px).

Font size h5

Specifies the font size for the h5 header. Each heading level should have a distinct size to establish a clear hierarchy and improve readability. Value: CSS size value (e.g., 14px).

Font size h6

Specifies the font size for the h6 header. Each heading level should have a distinct size to establish a clear hierarchy and improve readability. Value: CSS size value (e.g., 12px).

Body bg

The background color for the body of the application. This serves as the canvas on which all other elements are placed, so it should be a neutral or brand-consistent color. Value: Hex color code (e.g., #FFF).

Body bg inverse

The inverse of the body background color. Useful for sections or components that require a contrasting background. Value: Hex color code (e.g., #DDD).

Border color

Defines the default color for borders used throughout the application. This color should provide enough contrast to distinguish boundaries clearly. Value: Hex color code (e.g., #DBDBDB).

Border width

Sets the default width for borders. Consistent border widths help maintain a unified appearance. Value: CSS size value (e.g., 1px).

Border style

Specifies the default border style, such as solid, dashed, or dotted. This setting influences the overall aesthetic of borders. Value: CSS border style (e.g., solid).

Border radius

Defines the default border radius for rounded corners. Rounded corners can soften the appearance of elements and make the UI more approachable. Value: CSS size value (e.g., 2px).

Text font size

Sets the default font size for body text. It’s essential for ensuring readability across different devices and screen sizes. Value: CSS size value (e.g., @font-size-h5).

Text color

Defines the default color for text elements. This color should ensure good readability against the background colors. Value: Hex color code (e.g., #777777).

Text color inverse

The inverse color of the default text, used for text on dark or primary-colored backgrounds to maintain readability. Value: Hex color code (e.g., @text-color).

Text color default

Sets the standard text color used across the application, ensuring a consistent and legible appearance. Value: Hex color code (e.g., #333).

Text color default inverse

The inverse of the standard text color, used for contrast on darker backgrounds. Value: Hex color code (e.g., #333).

Field font size

Defines the font size for input fields. This size should match the overall typographic scale of the application. Value: CSS size value (e.g., @text-font-size).

Field bg

Sets the background color for input fields. This color should provide a clear input area that contrasts with the surrounding elements. Value: Hex color code (e.g., #FFF).

Field disabled bg

Background color for disabled input fields, indicating they are not interactive. Value: Hex color code (e.g., @field-bg).

Field color

Text color for input fields, ensuring readability within input areas. Value: Hex color code (e.g., @text-color).

Field addon bg

Background color for addons to input fields, such as icons or buttons embedded within the field. Value: Hex color code (e.g., @field-bg).

Field width

Specifies the width of input fields, providing a standard size across the application. Value: CSS size value (e.g., 1px 1px @border-width 1px).

Field border radius

Defines the border radius for input fields, giving them rounded corners to align with the overall design. Value: CSS size value (e.g., 2px).

Check and Radio Color

Sets the color for checkboxes and radio buttons, ensuring they match the overall color scheme of the application. Value: Hex color code (e.g., @brand-info).