General Properties
Reference documentation for Servoy Theme General Properties
Last updated
Reference documentation for Servoy Theme General Properties
Last updated
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.
Some properties have an additional button: Select Color, which opens the color chooser wizard.
Here's an in-depth look at each property:
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).
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).
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%)).
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%)).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
The inverse of the body background color. Useful for sections or components that require a contrasting background.
Value: Hex color code (e.g., #DDD).
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).
Sets the default width for borders. Consistent border widths help maintain a unified appearance.
Value: CSS size value (e.g., 1px).
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).
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).
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).
Defines the default color for text elements. This color should ensure good readability against the background colors.
Value: Hex color code (e.g., #777777).
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).
Sets the standard text color used across the application, ensuring a consistent and legible appearance.
Value: Hex color code (e.g., #333).
The inverse of the standard text color, used for contrast on darker backgrounds.
Value: Hex color code (e.g., #333).
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).
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).
Background color for disabled input fields, indicating they are not interactive.
Value: Hex color code (e.g., @field-bg).
Text color for input fields, ensuring readability within input areas.
Value: Hex color code (e.g., @text-color).
Background color for addons to input fields, such as icons or buttons embedded within the field.
Value: Hex color code (e.g., @field-bg).
Specifies the width of input fields, providing a standard size across the application.
Value: CSS size value (e.g., 1px 1px @border-width 1px).
Defines the border radius for input fields, giving them rounded corners to align with the overall design.
Value: CSS size value (e.g., 2px).
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).
