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

lenewt::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 Deployment for optional bundled fonts and search paths.

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