Thème par code

Les mêmes trois nœuds deux fois, et la différence tient en une poignée de add_theme.

L'éditeur ci-dessus fait tourner ce projet. Changez une ligne et il se recharge.

Classes Godot utilisées

StyleBoxFlatButtonProgressBar

Le code

scripts/main.gd
extends Node


func _ready() -> void:
	var row: HBoxContainer = _root()

	row.add_child(_card('default theme', false))
	row.add_child(_card('overridden', true))

	print('same nodes on both sides, the right one only adds theme overrides')


func _card(title: String, styled: bool) -> Control:
	var column: VBoxContainer = VBoxContainer.new()
	column.size_flags_horizontal = Control.SIZE_EXPAND_FILL
	column.add_theme_constant_override('separation', 16)

	var heading: Label = Label.new()
	heading.text = title
	heading.add_theme_color_override('font_color', Color('#999999'))
	column.add_child(heading)

	var panel: PanelContainer = PanelContainer.new()
	panel.size_flags_vertical = Control.SIZE_EXPAND_FILL

	if styled:
		var style: StyleBoxFlat = StyleBoxFlat.new()
		style.bg_color = Color('#1c1b1b')
		style.border_color = Color('#8eef97')
		style.set_border_width_all(1)
		style.set_corner_radius_all(16)
		style.set_content_margin_all(22)
		panel.add_theme_stylebox_override('panel', style)

	column.add_child(panel)

	var content: VBoxContainer = VBoxContainer.new()
	content.add_theme_constant_override('separation', 14)
	panel.add_child(content)

	var label: Label = Label.new()
	label.text = 'A label'
	content.add_child(label)

	var button: Button = Button.new()
	button.text = 'A button'
	content.add_child(button)

	var bar: ProgressBar = ProgressBar.new()
	bar.value = 65
	content.add_child(bar)

	if not styled:
		return column

	label.add_theme_color_override('font_color', Color('#8eef97'))
	label.add_theme_font_size_override('font_size', 22)

	button.add_theme_color_override('font_color', Color('#0d0c0c'))
	button.add_theme_stylebox_override('normal', _pill(Color('#ffffff')))
	button.add_theme_stylebox_override('hover', _pill(Color('#8eef97')))
	button.add_theme_stylebox_override('pressed', _pill(Color('#8da5f3')))

	bar.add_theme_stylebox_override('background', _bar(Color('#2a2f3d')))
	bar.add_theme_stylebox_override('fill', _bar(Color('#8eef97')))

	return column


func _pill(color: Color) -> StyleBoxFlat:
	var style: StyleBoxFlat = StyleBoxFlat.new()
	style.bg_color = color
	style.set_corner_radius_all(100)
	style.set_content_margin_all(12)

	return style


func _bar(color: Color) -> StyleBoxFlat:
	var style: StyleBoxFlat = StyleBoxFlat.new()
	style.bg_color = color
	style.set_corner_radius_all(6)

	return style


func _root() -> HBoxContainer:
	var background: ColorRect = ColorRect.new()
	background.color = Color('#12141a')
	add_child(background)
	background.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)

	var margin: MarginContainer = MarginContainer.new()

	for side in ['margin_left', 'margin_right', 'margin_top', 'margin_bottom']:
		margin.add_theme_constant_override(side, 48)

	add_child(margin)
	margin.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)

	var row: HBoxContainer = HBoxContainer.new()
	row.add_theme_constant_override('separation', 40)
	margin.add_child(row)

	return row

Plus d'exemples de Interface