Theme Editor
Reference documentation for Servoy Theme properties
Last updated
Reference documentation for Servoy Theme properties
Last updated
The Servoy Theme Editor is a tool designed to help developers and designers customize the visual appearance of Servoy applications. It provides a structured interface for modifying theme properties, ensuring that applications adhere to specific branding guidelines and maintain a consistent look and feel across various UI components.
The editor allows users to customize various properties of UI components such as navigation bars, tables, dialogs, and more. By centralizing the styling properties, it ensures a consistent design language throughout the application.
The Servoy Theme Editor is divided into two main tabs: Properties and Source. Each tab serves a distinct purpose in the customization process.
The Properties tab provides a user-friendly interface for setting various theme properties through dropdowns, color pickers, and input fields. It allows users to select the version of the Servoy theme they are working with. The properties are organized into categories, which makes it easy to find and adjust specific settings:
The Source tab in the Servoy Theme Properties editor provides a way to directly edit the underlying LESS (Leaner Style Sheets) code for customizing the theme properties. This allows for more advanced and specific styling adjustments that go beyond the options available in the graphical properties editor.
Users can write and edit LESS code to override default theme properties or add new styles. The tab supports comments, allowing users to document their changes and intentions within the code. Users can import other LESS files, enabling modular and maintainable stylesheets.
It indicates that this file is intended for overriding the theme properties defined in the default Servoy properties file.
This line imports the specified LESS file, which contains the theme properties for the specified version.
The @import directive in LESS is used to include the contents of another LESS file. In this case, it is importing the default theme properties so they can be overridden in the current file.
By using the source tab, developers can add new CSS rules or override existing ones defined in the imported servoy_theme.less file. This provides a high degree of flexibility for customizing the look and feel of the application.
The file uses LESS, a preprocessor for CSS, which extends CSS with dynamic behavior such as variables, mixins, and nested rules. This makes it easier to manage and maintain complex stylesheets.
To illustrate how you might use this tab to customize your theme, here’s an example of adding a custom property:
In this example the background color of the body is set to a lighter version of the main color and the font size and color for h1 headers are customized. This flexibility allows you to tailor the visual appearance of your application precisely to your needs.
The right-click context menu in the "Source" tab of the Servoy Theme Properties editor provides a variety of commands to assist with text editing, navigation, and code management. Below is a detailed description of each command:
keybinding: Alt+Shift+N
Opens a sub-list of available items: Opens a sub-list of available commands:
keybinding: Ctrl + Z
Reverts the last change made to the code, undoing the previous action.
Discards all changes made to the file and reverts it to the last saved state.
keybinding: Ctrl + S
Saves the current changes made to the file.
Provides options to open the file with different editors:
CSS Editor: Opens the file in the CSS editor.
Generic Text Editor: Opens the file in a basic text editor.
Servoy Theme Properties: Opens the file in the Servoy Theme Properties editor.
Text Editor: Opens the file in a standard text editor.
System Editor: Opens the file with the default system editor.
In-Place Editor: Opens the file in an inline editor.
Default Editor*: Opens the file with the default editor set in the IDE.
Other...: Allows selection of other available editors. Opens the editor selection dialog.
keybinding: Alt + Shift + W
Displays the file in various parts of the IDE:
Solution Explorer: Shows the file in the solution explorer.
Form Hierarchy: Shows the file in the form hierarchy view.
Minimap: Displays the file in a minimap view for quick navigation.
System Explorer: Opens the system file explorer to show the file location.
Properties: Displays the properties of the file.
keybinding: Ctrl + X
Cuts the selected text and places it in the clipboard.
keybinding: Ctrl + C
Copies the selected text to the clipboard.
keybinding: Ctrl + V
Pastes the text from the clipboard into the document.
keybinding: Ctrl + 1
Provides quick fixes for common coding issues or suggestions.
Shifts the selected text to the right.
Shifts the selected text to the left.
Adds the selected text or code to a collection of reusable snippets.
Runs the code using specific configurations:
Run Configurations...: Opens the Run configurations dialog.
Debugs the code using specific configurations:
Debug Configurations...: Opens the Debug configurations dialog.
Provides source code editing commands:
Toggle Line Comment: keybinding: Ctrl + Shift + C; Toggles comments on the selected line(s).
Add Block Comment: keybinding: Ctrl + Shift + /; Adds block comments around the selected text.
Remove Block Comment: keybinding: Ctrl + Shift + \; Removes block comments from the selected text.
Delete Line: keybinding: Ctrl + D; Deletes the selected line.
Copy Lines: keybinding: Ctrl + Alt + Down; Copies the selected line(s) and places the copy below.
Provides options for team collaboration and version control.
Compares the current file with another version or file.
Replaces the current file with another version or file.
Validates the current file to check for errors or issues.
Opens the Preferences dialog to adjust IDE settings.
