Styles (Skins)

Styles are like skins. They are used to change the Color, Text, and Images options of the widgets.

New UI Widgets contains two predefined styles: Default and Blue.

New style can be created with menu Assets / Create / New UI Widgets / Style.

You can set any style to use as default. Default style will be applied for the created widgets. Also, you can apply style for objects on the scene with UI / New UI Widgets / Apply default style.

_images/style-apply.png

Styles has two modes: fast and detailed settings:

  • Fast allow to quickly set settings for all widgets with Apply Fast Settings button.
  • Detailed allow to tune settings for each widget type separately.

Note

Recommended Sprites settings to avoid graphical artifacts:

  • Filter Mode = Point for sprites with straight lines, Trilinear in other cases
  • Generate Mip Maps = disabled
  • Compression = None (you can try other settings, but be careful because sometimes compression artifacts can be seen only in Play mode)

Style support for the custom widgets

You can add style support for your widgets with IStylable implementation.

using UIWidgets.Styles;
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]
public class CustomPanel : MonoBehaviour, IStylable
{
   public virtual bool SetStyle(Style style)
   {
      style.Collections.MainBackground.ApplyTo(GetComponent<Image>());

      return true; // true if style applied to children gameobjects; otherwise false.
   }
}

Note

Widgets created with Widgets Generation already have style support.