gdss

How styling works

GDSS is a CSS like styling system for Godot 4. Developers write a UI theme as a stylesheet, target nodes by type and state, share values through variables, and animate between states. The plugin is opt in per node, so it does not interfere with existing or present Godot themes. The author encourages using it in tandem with Godot's vanilla styling system rather than replacing it, since GDSS is still in beta and uses workarounds and compromises.

Selectors, states, and variables

Selectors target a node type such as Button and can be grouped with commas like Panel, PanelContainer. State blocks restyle interaction states such as hover, pressed, focus, and disabled. Classes are named variants nested inside a selector and assigned per node in the Inspector, cascading on top of the base selector. Variables come in three kinds: global is shared and settable from code, instance can be overridden per node, and plain var is file local, all referenced with a dollar sign.

Editor workflow

After enabling GDSS in Project Settings, the GDSS editor opens as a bottom dock and can switch to a full main screen tab from the toolbar. Selecting a themable control node and setting its GDSS mode in the Inspector lets developers enable styling, inherit from a parent, or opt out. Enabling a container and leaving children on inherit styles a whole subtree at once. Edits apply live in the editor, and the stylesheet is saved to res://theme.tgdss by default.

Editorial conclusion

GDSS is an experimental MIT licensed plugin for Godot 4, written in GDScript, and the stylesheet is saved to res://theme.tgdss by default.