Theme type variations

Control node needs to have a different look than what is normally defined by a Theme. Every control node has theme property overrides, which allow you to redefine the styling for each individual UI element. Button throughout your project. Setting it up every time you add a new button element to your interface is a tedious task. power of themes you can use theme type variations. These work like normal theme types, but instead of being self-sufficient and standalone they extend another, base type. Button type, customizing the looks of every button element in your UI. To then have a gray, red, or blue button you would create a new type, e.g. GrayButton, and mark it as a variation of the base Button type. GrayButton can override the normal style from the base Button and add font_color that Button has never defined. The control will use a combination of both types giving priority to the type variation. Note Customizing a project section of the “Introduction to GUI skinning” article.

Creating a type variation

Type dropdown on the right side of the editor. Type in what you want to name your theme type variation in the text box, then click Add Type. Type dropdown are the property tabs. Switch to the tab with a wrench and screwdriver icon. Base Type field. You can select the base type there, which would typically be the name of a control node class (e.g., Button, Label, etc). Type variations can also chain and extend other type variations. This works in the same way control nodes inherit styling of their base class. For example, CheckButton inherits styles from Button because corresponding node types extend each other. After you select the base type, you should now be able to see its properties on the other tabs in the theme editor. You can edit them as usual.

Using a type variation

Theme property of a control node, you can find the Theme Type Variation property. It is empty by default, which means that only the base type has an effect on this node. You can either select a type variations from a dropdown list, or input its name manually. Variations appear on the list only if the type variation belongs to the project-wide theme, which you can configure in the project settings. For any other case you have to input the name of the variation manually. Click on the pencil icon to the right. Then type in the name of the type variation and click the check mark icon or press enter. If a type variation with that name exists it will now be used by the node.