Loading...

Styling allows you to easily customize the appearance of widgets at any level. See styles for explanations of common style properties. You can experiment with style properties in the style playground.

You can change any style properties of a widget:

You can change the colors of a widget using Cogent Core’s dynamic color scheme system:

You can change the size of a widget using Cogent Core’s flexible unit system:

Abilities and states

Abilities are set in stylers, and you can set styles based on states. See those pages for more information.

Styling order

Stylers are called in the order that they are added (first added, first called), which means that the stylers added last get the final say on the styles. This means that the base stylers set during initial widget configuration will be overridden by special end-user stylers.

As with event handlers, there are three levels of stylers: First, Normal, and Final, which are called in that order. For example, this allows you to set properties that affect stylers before they are called using core.WidgetBase.FirstStyler, like states, and set style properties based on other style properties using core.WidgetBase.FinalStyler, like min based on direction.

Style multiple widgets

You can style all direct children of a container at once using tree.NodeBase.OnChildAdded:

You can style all direct children of a certain type in a container:

Style all widgets

You can style all widgets in the entire app using core.App.SceneInit in conjunction with core.Scene.WidgetInit. For example, to make all buttons in your app have a small border radius, you can do the following: