Too difficult to adjust style with UIToolkit

I tried to migrate from uGUI to UIToolkit.

After trying, I am thinking of canceling the migration because it is too difficult to adjust the design in UITookit.

Here are the reasons

  • I tried to adjust the style of Slider in ScrollView.
    There is no documentation anywhere on how to adjust it.
    I managed to find it on the Unity Discussion.
    But it took me a day to research and implement it.

  • Unable to look at UnityDefaultRuntimeTheme.tss to investigate
    If this had been publicly available, it would have been much easier to do the above
    In order to change the default style, I have to do some kind of reverse engineering, making full use of UI-Builder + UI-Debugger.
    The UI-Debugger looks at the default style UI elements output by UI-Toolkit to find out which style class is set.
    The contents of the style class must also be examined through the UIDebugger.

Are you really doing this?
It takes much more time to create a UI than a uGUI.

You will have to manually overwrite the default selectors in a new .uss file applied to the document:

It take some prodding and testing to figure out which selectors have priority over others.

Yes, until they fix the usability, I’d say it’s not worth migrating to UI Toolkit for smaller projects. Really only makes sense on large teams with a lot of procedurally generated UI.

If you’re just whipping together a HUD and Menu screens, better to go uGUI.

1 Like

I mean if you’re not previously familiar with web CSS styling then it will be a little confusing at first. But once you understand it all just comes down to USS selectors, then you can realise how powerful the system is.

Really you should start with the manual: Unity - Manual: Introduction to USS

The concept of styling any visual element is universal. You just need to use the right selector. Very often this a selector using an element’s existing style, or its name, potentially alongside a child/ancestor selector.

Plus in the builder you can inspect what styles are already applied to an element, and what those styles are doing:

Once you get the hang of it, it becomes pretty easy to quickly style your UI. And once you have some style sheets, maybe even a theme style sheet set up, it gets even faster to implement styles across a number of different visual tree assets.

2 Likes

Thanks for the advice.
I understand that CSS styling is powerful.
But the fact that the source styles are not publicly available makes it difficult to work with them.

I will wait for UIToolkit to be upgraded.

Why do you need the source styles? Your styles will always override them. There is there Theme Style Sheets come into play as well: Unity - Manual: Theme Style Sheet (TSS)

And what styles a built in visual element has is available on the docs too.

1 Like

To change the style of a standard component such as Button/Toggle/ScrollView, I have to use the documentation and the UI Debugger to find out the style class and which properties are set to values.
This is very time consuming for me.
However, if the TSS of the default style is published, this workflow can be simplified.
At least we would not have to use the UI Debugger to check classes/pseudo-classes/properties.

Once all the component design adjustments are done, I think it would speed up the process, but I would like to simplify the process.

Again, you can see every selector applied to a visual element, and what styles they drive in the builder, as I mentioned above.

You also don’t even need to know what the existing values are anyway. Just what selector to use to adjust the style to the way you want to look like.

I feel like wanting to see the default styling is just a self bum steer leading you into a suboptimal way of working with UI Toolkit.

I thought I couldn’t see everything in the Builder, can you tell me how to look?

When adjusting the default Toggle, the Style is applied to all the pseudo-classes like hover:enabled:focus, etc., but I was using UI Debugger to find them in UI Debugger to find them.

Again, why do you need to know what the default values are? You only need to set the values you need to get the style you want.

I too want to reference the default style.
I’m suffering from a similar problem.
I tried to create my own theme by inheriting the default styles, but since I don’t know how the theme is configured, the styles I set are not applied properly and I have to use the UI Debugger to find out.

Just adjusting the ScrollBar requires defining the USS as follows, but once I could see the default style, this task was done quickly.

1 Like