Widget Styles

You can modify the look of these widgets by choosing a style.

The styles available include:

Style Name	Light Variant	Dark Variant	Description
fluent	fluent-light	fluent-dark	These variants belong to the Fluent style, which is based on the Fluent Design System ↗.
material	material-light	material-dark	These variants are part of the Material style, which follows the Material Design ↗.
cupertino	cupertino-light	cupertino-dark	The Cupertino variants emulate the style used by macOS.
cosmic	cosmic-light	cosmic-dark	The Cosmic variants emulate the style used by Cosmic Desktop ↗.
qt			The Qt style uses Qt ↗ to render widgets. This style requires Qt to be installed on your system.
native			This is an alias to one of the other styles depending on the platform. It is cupertino on macOS, fluent on Windows, material on Android, qt on linux if Qt is available, or fluent otherwise.

By default, the styles automatically adapt to the system’s dark or light color setting. Select a -light or -dark variant to override the system setting and always show either dark or light colors.

The widget style is determined at your project’s compile time. The method to select a style depends on how you use Slint.

If no style is selected, native is the default.

Rust

You can select the style before starting your compilation by setting the SLINT_STYLE environment variable to the name of your chosen style.

When using the slint_build API, call the slint_build::compile_with_config() ↗ function.

When using the slint_interpreter API, call the slint_interpreter::ComponentCompiler::set_style() ↗ function.

C++

Define a SLINT_STYLE CMake cache variable to contain the style name as a string. This can be done, for instance, on the command line:

cmake -DSLINT_STYLE="material" /path/to/source

bash

Node.js

You can select the style by setting the style property in LoadFileOptions passed to loadFile:

import * as slint from "slint-ui";
let ui = slint.loadFile("main.slint", { style: "fluent" });
let main = new ui.Main();
main.greeting = "Hello friends";

js

Previewing Designs With slint-viewer

Select the style either by setting the SLINT_STYLE environment variable, or by passing the style name with the --style argument:

slint-viewer —style material /path/to/design.slint

Previewing Designs With The Slint Visual Studio Code Extension

To select the style, first open the Visual Studio Code settings editor:

Windows

File > Preferences > Settings

macOS

Code > Preferences > Settings

Linux

File > Preferences > Settings

Then enter the style name in Extensions > Slint > Preview:Style

Previewing Designs With The Generic LSP Process

Choose the style by setting the SLINT_STYLE environment variable before launching the process. Alternatively, if your IDE integration allows for command line parameters, you can specify the style using --style.