Theme Editor

Reference documentation for Servoy Theme properties

Overview

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.

Properties Tab

Properties Tab

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:

• General Properties

• Sidenav Properties

• Navbar Properties

• Tabs Properties

• Windows Properties

• Dialogs Properties

• Tables Properties

• Breadcrumb specific style Properties

• Brand colors Properties

• Validations Properties

• Margins and Padding Properties

Source Tab

Source Tab

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.

Content

Comment Line

It indicates that this file is intended for overriding the theme properties defined in the default Servoy properties file.

Import Statement

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.

Usage and Customization:

Overwriting Default Properties

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.

LESS Syntax

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.

Example Customization

To illustrate how you might use this tab to customize your theme, here’s an example of adding a custom property:

@import 'servoy_theme.less?version=2023.3.0_ng2';

// Custom background color for the body
body {
    background-color: @main-color-light;
}

// Custom font size for headers
h1 {
    font-size: 36px;
    color: @main-color;
}

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.

Context Menu Commands

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:

Undo

keybinding: Ctrl + Z Reverts the last change made to the code, undoing the previous action.

Revert File

Discards all changes made to the file and reverts it to the last saved state.

Save

keybinding: Ctrl + S Saves the current changes made to the file.

Open With

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.

Show In

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.

Cut

keybinding: Ctrl + X Cuts the selected text and places it in the clipboard.

Copy

keybinding: Ctrl + C Copies the selected text to the clipboard.

Paste

keybinding: Ctrl + V Pastes the text from the clipboard into the document.

Quick Fix

keybinding: Ctrl + 1 Provides quick fixes for common coding issues or suggestions.

Shift Right

Shifts the selected text to the right.

Shift Left

Shifts the selected text to the left.

Add to Snippets...

Adds the selected text or code to a collection of reusable snippets.

Run As

Runs the code using specific configurations:

• Run Configurations...: Opens the Run configurations dialog.

Debug As

Debugs the code using specific configurations:

• Debug Configurations...: Opens the Debug configurations dialog.

Source

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.

Team

Provides options for team collaboration and version control.

Compare With

Compares the current file with another version or file.

Replace With

Replaces the current file with another version or file.

Validate

Validates the current file to check for errors or issues.

Preferences...

Opens the Preferences dialog to adjust IDE settings.