Selecting a Widget Style#
Slint offers a variety of built-in widgets which can be imported from
"std-widgets.slint". You can modify the look of these widgets by choosing a style.
The styles available include:
|Style Name||Light Variant||Dark Variant||Description|
||These variants belong to the Fluent style, which is based on the Fluent Design System.|
||These variants are part of the Material style, which follows the Material Design.|
||The Cupertino variants emulate the style used by macOS. (Experimental)|
||The Native style mimics the controls native to the platform on which they are used. This includes specific support for the appearance of controls on macOS and Windows. This style requires Qt to be installed on your system.|
By default, the styles automatically adapt to the system’s dark or light color setting. Select a
-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 becomes the default if Qt is installed. If
native isn’t available,
fluent is selected as the default.
Selecting a Widget Style with 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
When using the
slint_interpeter API, call the
Selecting a Widget Style when using C++#
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
Previewing Designs With
Select the style either by setting the
SLINT_STYLE environment variable, or by passing the style name with the
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:
On Windows/Linux - File > Preferences > Settings
On macOS - Code > 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