Styling Toggle and Scroller sizing and recommendations

For my project, I need to significantly restyle my UI with the UI Toolkit (Preview 16).

I am having difficulty styling the Toggle. I have been able to find the underlying child element #unity-checkbox, but changing the various styles I have only been able to clear the checkmark image via background-image, none of the other styles seem to help. I have searched multiple ways and can’t find any guidance on Toggle styling.

Does anyone have any guidance on styling the checkmark or is there source code access somewhere?

I also have some limitations on sizing a Scroller in a ScrollView. I was able to change the styles on the containing element and the child elements, but the layout appears to be hardcoded, so I get extra spacing between the low and high buttons and the slider (see the screen snippet).

7444889--912827--upload_2021-8-24_8-0-16.png

Is there a better way to resize the Scroller?

Finally, before I start diving into creating my own elements, does anyone have a third-party asset they like that is highly stylable?

Thank you,

Justin

7444889--912827--upload_2021-8-24_8-0-16.png

In case someone else is looking for how to customize the toggle checkmark, you will want to select the underlying checkmark image element in the toggle. For instance, #unity-checkmark or the code below. Style the background image for the following pseudo classes cases with corresponding images:

  • :active/:checked (the default stying has this together)
  • :hover
  • :hover:checked/:hover:active
  • :focus
  • :focus:checked

What was helpful for me was finding that the full source is available in the UI Toolkit package folder. In particular, "\UI Toolkit\Core\Controls" where the main element controls source is and “\UI Toolkit\PackageResources\StyleSheets\Default” to review the default styles.

I am still not sure how to better resize the Scroller, but at least I can review the source when I am ready to dive deep.

One more thing that is useful to know, there are also some default styles applied to the border and the background tint you may want to clear:
-unity-background-image-tint-color: none;
border-width: 0;