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