Brand colors Properties
Reference documentation for Servoy Theme Brand colors Properties
Last updated
Reference documentation for Servoy Theme Brand colors Properties
Last updated
The Brand colors Properties defines the various color settings associated with the brand identity of the application. These colors are used to maintain consistency and ensure that the application adheres to the visual guidelines of the brand.
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 main color used to represent the brand. It is often used for primary buttons, links, and other key elements.
Value: Hex color code (e.g., #428bca).
This is a secondary color that complements the primary brand color. It’s used for secondary actions or less prominent elements.
Value: Hex color code (e.g., #E8E6E6).
This color is used to indicate success or positive action. Commonly used for success messages, validation highlights, or positive indicators.
Value: Hex color code (e.g., #5bc85c).
Used for informational messages or icons, providing a neutral tone that stands out from the primary and secondary colors.
Value: Hex color code (e.g., #5bc0de).
Indicates warnings or cautionary messages. It’s typically used to draw attention to potential issues that require user attention.
Value: Hex color code (e.g., #f0ad4e).
This color is used for error messages or destructive actions, such as deletions or critical errors.
Value: Hex color code (e.g., #d9534f).
This is the color used for less prominent text, often for placeholders or secondary information.
Value: Hex color code (e.g., #999999).
The inverse color of the primary brand color, used for text or elements that appear on a background of the primary brand color.
Value: Hex color code (e.g., #FFF).
The inverse color of the tertiary brand color, ensuring readability against tertiary-colored backgrounds.
Value: Hex color code (e.g., @text-color).
The inverse color of the success color, used for text or icons on success-colored backgrounds.
Value: Hex color code (e.g., #FFF).
The inverse color of the informational color.
Value: Hex color code (e.g., #FFF).
The inverse color for warning messages, ensuring text or icons are readable on a warning background.
Value: Hex color code (e.g., #FFF).
The inverse color of the danger color, ensuring readability on error backgrounds.
Value: Hex color code (e.g., #FFF).
A slightly darker version of the primary brand color, used to highlight active or focused elements.
Value: Derived using a function like darken(@brand-primary, 5%).
A darker version of the tertiary color for highlighting purposes.
Value: Derived using a function like darken(@brand-tertiary, 5%).
A darker shade of the success color used for emphasis on success-related elements.
Value: Derived using a function like darken(@brand-success, 5%).
A darker shade of the informational color for highlighting informational elements.
Value: Derived using a function like darken(@brand-info, 5%).
A darker version of the warning color for emphasis.
Value: Derived using a function like darken(@brand-warning, 5%).
A darker shade of the danger color, used for emphasizing critical or dangerous actions.
Value: Derived using a function like darken(@brand-danger, 5%).
The inverse color of the highlighted primary brand color.
Value: Hex color code (e.g., #FFF).
The inverse color of the highlighted tertiary brand color.
Value: Hex color code (e.g., @text-color).
The inverse color of the highlighted success color.
Value: Hex color code (e.g., #FFF).
The inverse color of the highlighted informational color.
Value: Hex color code (e.g., #FFF).
The inverse color of the highlighted warning color.
Value: Hex color code (e.g., #FFF).
The inverse color of the highlighted danger color.
Value: Hex color code (e.g., #FFF).
