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, plus a Primary-Color, Font-Family, Font-Size, IconStyle and IconSize — all configured through the Theme node in Config.yaml:

Theme: Auto
  Primary-Color: SteelBlue
  Font-Family: Segoe UI
  Font-Size: 13px
  IconStyle: outlined

See the Themes page for the full reference and real-world examples.

This page focuses on the next step: overriding individual CSS rules and custom properties when the built-in Theme options are not enough.

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.