godot-ui-theming

Implements Godot UI themes using Theme resources, StyleBoxes, and runtime theme switching.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/DecioLuvier/Shatterless --skill godot-ui-theming-decioluvier
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: godot-ui-theming
Source: https://github.com/DecioLuvier/Shatterless/tree/main/.claude/skills/godot/references/godot-ui-theming
Command: npx skills add https://github.com/DecioLuvier/Shatterless --skill godot-ui-theming-decioluvier

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Building consistent UI styling in Godot often leads to duplicated StyleBoxes, hardcoded colors, and broken theme inheritance. This Skill provides proven patterns for Theme resources, StyleBox styling, font management, and runtime theme switching so your UI stays consistent and maintainable. ## Core Features & Use Cases - Theme Resource Architecture: Centralize colors, fonts, and StyleBoxes in Theme resources with type variations (e.g., DangerButton) instead of duplicating scenes or per-node overrides. - Runtime Theme Switching: Swap Dark/Light/High-Contrast themes at the root Control with cascading propagation, plus RTL/LTR mirroring and controller prompt icon swapping for accessibility. - Safe Runtime Styling: Apply the duplicate-before-mutate pattern for StyleBox color tweaks, memory-safe custom drawing, and crisp DPI-independent UI scaling. - Use Case: Add a dark mode toggle to your game by assigning a new Theme resource to the root Control and letting it cascade, while custom _draw() elements update via NOTIFICATION_THEME_CHANGED. ## Quick Start Ask the agent to implement a dark and light mode toggle for your Godot UI using a root-level Theme swap with type variations for button styles.

Frequently Asked Questions about godot-ui-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add dark mode to a Godot UI?▼

Create separate Theme resources for dark and light modes, then assign the new Theme to the root Control node so it cascades to all descendants. Use NOTIFICATION_THEME_CHANGED to update custom _draw() elements that do not respond to theme changes automatically.

How do I change a StyleBox color at runtime in Godot?▼

Call duplicate() on the StyleBox before modifying it, since Theme StyleBoxes are shared resources that must stay immutable. After duplicating, apply the override with add_theme_stylebox_override on the specific Control.

What is theme_type_variation in Godot used for?▼

Theme type variations create lightweight derived styles, such as a DangerButton variant of Button, without duplicating scenes or themes. The variation inherits all base type properties and only overrides what differs, assigned via node.theme_type_variation.

Why does my Godot StyleBox disappear during custom drawing?▼

StyleBoxes defined as local variables inside _draw() get garbage collected before the RenderingServer finishes drawing them. Store StyleBox resources at the class level so they persist for the rendering lifetime.

Does Godot theme inheritance work when a child has its own theme?▼

No, a child Control with its own theme property blocks the parent theme cascade entirely. Apply themes at the root and use theme_type_variation or add_theme_*_override for node-specific differences instead.

How do I make Godot UI crisp at different resolutions?▼

Use the content_scale_factor for resolution-independent scaling so fonts remain crisp at any DPI. Avoid scaling Control nodes directly, which blurs font rendering and breaks layout proportions.