Styling Slate Widgets with Editor Styles

Apply standard Unreal Engine styling conventions to your custom widgets to ensure they integrate seamlessly with the existing editor aesthetic.

In this lesson, you will learn how to leverage Unreal Engine’s built-in FEditorStyle (or FAppStyle in modern versions) to ensure your custom Slate widgets match the professional look and feel of the Unreal Editor.

Why Use Editor Styles?

When you build custom editor tools, creating your own colors, font sizes, and borders from scratch is not only tedious but often results in a "cluttered" UI that doesn't feel like part of the engine. Unreal provides a centralized style system. By pulling from this system, your widgets will automatically adapt if the user switches their editor theme (e.g., from Light to Dark mode) or changes their global font settings.

Accessing the Style Set

The FAppStyle class acts as a global repository for shared UI assets. To use these in your SCompoundWidget declarations, you retrieve specific styles using the Get() method.

For example, if you want your custom button to look exactly like a standard Editor button, or if you want to use a specific border style, you reference the style set like this:

SNew(SBorder)
.BorderImage(FAppStyle::Get().GetBrush("ToolPanel.GroupBorder"))
[
    SNew(STextBlock)
    .TextStyle(FAppStyle::Get(), "NormalText")
    .Text(FText::FromString("My Styled Content"))
]

Key Concepts for Consistency

Brushes: Use FAppStyle::Get().GetBrush("Name") to apply standard backgrounds or decorative elements.
Colors: Use FAppStyle::Get().GetColor("Name") for text or fill colors that need to react to theme changes.
Fonts: Always prefer FAppStyle::Get().GetFontStyle("Name") over hardcoded font assets to ensure your text scales correctly with the editor's UI zoom settings.

By leaning on FAppStyle, you stop "guessing" which hex codes look good in the editor and start using the same design language the engine developers use. This makes your custom tools feel like first-class citizens within the Unreal ecosystem, providing a frictionless experience for your users.

Key Takeaway: Never hardcode colors or sizes in your Slate widgets; use FAppStyle to inherit the engine's built-in design language for seamless editor integration.