Querying style information in .slint

[Blquinn]

I was wondering if there is any way to get variables from the currently applied style in slint.

For example can I use the style's background color in my own slint files? It would be difficult to make the theme consistent without such a mechanism. I can't find a reference to anything like that in the docs.

I was also wondering what the process for creating a custom style, potentially one that is based on another style, like material, would look like. Is such a thing possible at the moment?

Thanks!

[FloVanGH]

Hi @Blquinn,

short answer: yes it is possible but there is no build in mechanism to access the resources yet.

Long answer: for each style you can find a styling.slint file (except the qt style). These files providing the styling resource like brushes and Typography that is relevant for the corresponding style. If you want to access these resource e.g. to create a custom widget that is consistent to that style you have to copy that file in your own library.

If you looking e.g. for the material styleing file you can check in the repo: internal/compiler/widgets/material-base/styling.slint

We want to make theses resources per style accessible trough a public api in the future.

[Blquinn]

Would you say this is the recommended way to extend the existing widgets at the moment, to copy paste these files as needed into my project?

I've used QML in the past and their controls typically will have some properties to customize them like here https://doc.qt.io/qt-6/qtquickcontrols-customize.html#customizing-a-control

Is there any chance slint might do something similar in the future?

[FloVanGH]

I've created an issue for your request: #3687

[Blquinn]

Thank you!

[ogoffart]

The undocumented way to do it right now is to use StyleMetrics

import {StyleMEtrics} from "std-widgets.slint";

And the following variables are available on it:

slint/internal/compiler/widgets/fluent-base/std-widgets-impl.slint

Lines 14 to 25 in d9672c5

	export global StyleMetrics {
	out property<length> layout-spacing: 8px;
	out property<length> layout-padding: 8px;
	out property<length> text-cursor-width: 1px;
	out property<color> window-background: Palette.background;
	out property<color> default-text-color: Palette.text-primary;
	out property<color> textedit-background: Palette.background;
	out property<color> textedit-text-color: Palette.text-primary;
	out property<color> textedit-background-disabled: Palette.control-disabled;
	out property<color> textedit-text-color-disabled: Palette.text-disabled;
	out property<bool> dark-color-scheme: Palette.dark-color-scheme;
	}

This is not documented, but we even use it in our examples, so i guess this is public interface by now.
But we really need better way to expose the palette

[Blquinn]

This is definitely a nice start, but I really would need access to the entire Palette in my application to make the style truly consistent. For example what I am trying to accomplish to to create a square button, which should look exactly like the style's normal button, except for the fact that it is square. In order to do this I need to know the button's background-color, highlight-color, border-colors, accessible-border-color, on-background-color etc. So it's quite a lot of properties that I would need.

I understand that each style has it's own unique palette, so it might be difficult/impossible to create a unified palette object.