How to style applications by means of CSS

Kitto^x uses a CSS custom properties (variables) system defined in Home/Resources/css/kittox.css. All UI components reference these variables, making it easy to customize the look and feel globally.

Themes

Kitto^x supports light, dark and auto themes out of the box. The theme is selected through the ThemeMode setting in your config file:

ThemeMode: auto

Possible values: light, dark, auto (follows the user's OS preference).

CSS Custom Properties

The main variables you can override to customize the appearance include:

Variable	Description
--kx-bg	Page background color
--kx-surface	Surface color (panels, cards)
--kx-text	Primary text color
--kx-accent	Accent color for active elements
--kx-chrome-dark	Toolbar and button background
--kx-chrome-text	Toolbar and button text color
--kx-border	Border color
--kx-input-border	Form input border color
--kx-error	Error/danger color

Custom CSS

You can customize individual CSS styles by adding code to your Home/Resources/css/application.css file, which is included in every Kitto^x application by default. For example:

/* Make toolbar buttons larger */
.kx-toolbar-btn {
    font-size: 125%;
}

/* Custom row highlight color */
.kx-row-selected {
    background-color: #cde4f7;
}

To inspect the structure and naming of Kitto^x CSS classes, use your browser's developer tools (F12).

SVG Icon System

Kitto^x uses Material Design Icons rendered via CSS mask-image. Icons are referenced by name through the ImageName property in YAML metadata (e.g., ImageName: schedule). Five styles are available (filled, outlined, round, sharp, two-tone), configurable via Theme/IconStyle in Config.yaml. Icon sizes (Small 1em, Medium 1.4em, Large 1.8em) are configurable via Theme/IconSize. See the icon name mapping in Kitto.Html.Utils.pas (InitIconMap) for the full list of available icons.