Theming

Built-in themes

Two themes are included. Set the theme property on the component or via the singleton:

VirtualKeyboard {
    theme: Lnvk.Dark   // default
    // theme: Lnvk.Light
}

// Switch at runtime
Lnvk.theme = Lnvk.Light

Custom colors

Override any visual token on the VirtualKeyboard component. Unset properties inherit the values of the active theme.

VirtualKeyboard {
    panelBackground:      "#1a1a2e"
    keyBackground:        "#16213e"
    keyForeground:        "#e2e2e2"
    keyPressedBackground: "#0f3460"
    specialKeyBackground: "#533483"
    accentColor:          "#e94560"
    popupBackground:      "#16213e"
    keyRadius:  8
    keySpacing: 4
    fontSize:   20
}

Bundled fonts are optional. Register your own font files from C++ before plugin init (see Advanced deployment — Fonts). QML uses the read-only resolved family: font.family: Lnvk.effectiveFontFamily.

Color properties reference

Property	Type	Dark default	Description
`panelBackground`	color	`#132538`	Keyboard panel background
`keyBackground`	color	`#1E3550`	Normal key fill
`keyForeground`	color	`#F9F8F7`	Key label color
`keyPressedBackground`	color	`#23A4DD`	Pressed key fill
`specialKeyBackground`	color	`#454D9B`	Shift, backspace, enter keys
`accentColor`	color	`#00AB97`	Highlights and candidate bar
`popupBackground`	color	`#1E3550`	Long-press popup background
`keyRadius`	int	`12`	Key corner radius (px)
`keySpacing`	int	`5`	Gap between keys (px)
`fontSize`	int	`22`	Base key label font size (px)

Fonts

Call FontPaths::setHostFontFiles before engine.load():

#include <lnvk>

lnvk::qt::FontPaths::setHostFontFiles({
    "/opt/myapp/fonts/Inter-Variable.ttf",
    "/opt/myapp/fonts/NotoSansCJKsc-Regular.otf",
});

When set, the host file list replaces bundled font discovery. Per-script family selection is automatic via Lnvk.effectiveFontFamily when the language changes. See Advanced deployment — Fonts (optional).

Sizing

Constrain the keyboard width and height with maxWidth and maxHeight. The keyboard centers itself within the available space.

VirtualKeyboard {
    maxWidth:  600
    maxHeight: 300
}

Set either property to -1 (the default) to leave that dimension unconstrained.

← PreviousLanguages Next →Configuration