UI Theming

Available Scripts

global_theme_manager.gd

ui_scale_manager.gd

NEVER Do in UI Theming

• NEVER create StyleBox in _ready() for many nodes — 100 buttons ×

  StyleBoxFlat.new()

  in

  _ready()

  ? 100 duplicate objects. Create ONCE in theme resource, reuse via inheritance.
• NEVER forget theme inheritance — Child Control with custom theme? Parent theme ignored. Set

  theme

  on root Control, children auto-inherit unless overriding.
• NEVER hardcode colors in StyleBox —

  style.bg_color = Color(0.2, 0.3, 0.5)

  ? Unmaintainable. Define colors in theme, reference via

  theme.get_color("primary", "Button")

  .
• NEVER use add_theme_override for global styles — Call

  add_theme_*_override()

  on 50 nodes? Brittle. Define in Theme resource for automatic propagation.
• NEVER skip corner_radius_all shortcut — Set 4 corner radii individually? Verbose. Use

  corner_radius_all = 5

  for uniform corners (StyleBoxFlat only).
• NEVER modify theme during rendering — Change theme in

  _draw()

  OR

  _process()

  ? Constant re-layout = performance tank. Load themes at initialization OR on user action only.

1. Project Settings → GUI → Theme
2. Create new Theme resource
3. Assign to root Control node
4. All children inherit theme

StyleBox Pattern

# Create StyleBoxFlat for buttons
var style := StyleBoxFlat.new()
style.bg_color = Color.DARK_BLUE
style.corner_radius_top_left = 5
style.corner_radius_top_right = 5
style.corner_radius_bottom_left = 5
style.corner_radius_bottom_right = 5

# Apply to button
$Button.add_theme_stylebox_override("normal", style)

Font Loading

# Load custom font
var font := load("res://fonts/my_font.ttf")
$Label.add_theme_font_override("font", font)
$Label.add_theme_font_size_override("font_size", 24)

Reference

• Godot Docs: GUI Theming

Related

• Master Skill: godot-master