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 node in Config.yaml carries Mode, shared Font-Family/Font-Size/IconStyle/IconSize, and per-mode Light:/Dark: sub-nodes (each with its own Primary-Color):

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

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).

Theme-adaptive backgrounds (color-mix + --kx-surface)

Fixed hex backgrounds — even pleasant pastels like #FFB2B2 or #FFEB99 — break when the user switches to dark mode: the page text becomes light (#e5e7eb from --kx-text in dark) and ends up unreadable on a light pastel. Instead of writing two separate rules for :root and html[data-theme="dark"], mix your accent against var(--kx-surface) so the background inherits the active theme's surface and the contrast against --kx-text stays predictable in both palettes:

.important-row {
    background-color: color-mix(in srgb, var(--kx-surface), #E0B020 30%);
}

.semi-important-row {
    background-color: color-mix(in srgb, var(--kx-surface), #DC3C3C 30%);
}

• In light mode --kx-surface is #fff → the mix produces the same pastel you would have written by hand (gold, rose).
• In dark mode --kx-surface is #1f2937 → the mix produces a deep burnt-gold or muted red, with the lighter --kx-text still readable.

The same idea applies wherever you would otherwise hardcode a colour: avoid style="color: white" in HtmlPanel HTML; use style="color: var(--kx-text)" (or var(--kx-chrome-text) when on a chrome surface) and the styling follows the theme without per-mode duplication.

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.