Update and improve GUI Theming Override demo (#817)

gui/theming_override/README.md

@@ -1,13 +1,13 @@
-# GUI Theming Override Demo
+# GUI Theming Override
 
 Demonstrates how to override GUI colors and styleboxes at runtime.
 
 Language: GDScript
 
-Renderer: GLES 2
+Renderer: Compatibility
 
 Check out this demo on the asset library: https://godotengine.org/asset-library/asset/786
 
 ## Screenshots
 
-![Screenshot](screenshots/theming_override.png)
+![Screenshot](screenshots/theming_override.webp)

gui/theming_override/icon.png.import

@@ -1,8 +1,9 @@
 [remap]
 
 importer="texture"
-type="StreamTexture2D"
-path="res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.stex"
+type="CompressedTexture2D"
+uid="uid://7wt6l3j3m4hn"
+path="res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.ctex"
 metadata={
 "vram_texture": false
 }
@@ -10,26 +11,24 @@ metadata={
 [deps]
 
 source_file="res://icon.png"
-dest_files=["res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.stex"]
+dest_files=["res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.ctex"]
 
 [params]
 
 compress/mode=0
 compress/lossy_quality=0.7
-compress/hdr_mode=0
+compress/hdr_compression=1
 compress/bptc_ldr=0
 compress/normal_map=0
-flags/repeat=0
-flags/filter=true
-flags/mipmaps=false
-flags/anisotropic=false
-flags/srgb=2
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
 process/fix_alpha_border=true
 process/premult_alpha=false
-process/HDR_as_SRGB=false
-process/invert_color=false
 process/normal_map_invert_y=false
-stream=false
-size_limit=0
-detect_3d=true
-svg/scale=1.0
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

gui/theming_override/project.godot

@@ -6,21 +6,26 @@
 ;   [section] ; section goes between []
 ;   param=value ; assign values to parameters
 
-config_version=4
+config_version=5
 
 [application]
 
-config/name="GUI Theming Override Demo"
+config/name="GUI Theming Override"
 config/description="Demonstrates how to override GUI colors and styleboxes at runtime."
 run/main_scene="res://test.tscn"
+config/features=PackedStringArray("4.0")
+run/low_processor_mode=true
 config/icon="res://icon.png"
 
 [display]
 
 window/size/viewport_height=576
+window/vsync/vsync_mode=0
 window/stretch/mode="canvas_items"
 window/stretch/aspect="expand"
 
 [rendering]
 
+renderer/rendering_method="gl_compatibility"
+renderer/rendering_method.mobile="gl_compatibility"
 environment/defaults/default_clear_color=Color(0.133333, 0.133333, 0.133333, 1)

gui/theming_override/screenshots/theming_override.png.import

@@ -1,35 +0,0 @@
-[remap]
-
-importer="texture"
-type="StreamTexture2D"
-path="res://.godot/imported/theming_override.png-fd290b6e357e98ef694c719db436e418.stex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://screenshots/theming_override.png"
-dest_files=["res://.godot/imported/theming_override.png-fd290b6e357e98ef694c719db436e418.stex"]
-
-[params]
-
-compress/mode=0
-compress/lossy_quality=0.7
-compress/hdr_mode=0
-compress/bptc_ldr=0
-compress/normal_map=0
-flags/repeat=0
-flags/filter=true
-flags/mipmaps=false
-flags/anisotropic=false
-flags/srgb=2
-process/fix_alpha_border=true
-process/premult_alpha=false
-process/HDR_as_SRGB=false
-process/invert_color=false
-process/normal_map_invert_y=false
-stream=false
-size_limit=0
-detect_3d=true
-svg/scale=1.0

gui/theming_override/test.gd

@@ -2,15 +2,13 @@ extends Control
 
 # This script demonstrates how to alter StyleBoxes at runtime.
 # Custom theme item properties aren't considered Object properties per se.
-# This means that you should use `add_stylebox_override("normal", ...)`
+# This means that you should use `add_theme_stylebox_override("normal", ...)`
 # instead of `set("custom_styles/normal", ...)`.
 
-@onready var label = $VBoxContainer/Label
-@onready var button = $VBoxContainer/Button
-@onready var button2 = $VBoxContainer/Button2
-@onready var reset_all_button = $VBoxContainer/ResetAllButton
-# Save the label color so it can be reset.
-@onready var default_label_color = label.get_color("font_color")
+@onready var label = $Panel/MarginContainer/VBoxContainer/Label
+@onready var button = $Panel/MarginContainer/VBoxContainer/Button
+@onready var button2 = $Panel/MarginContainer/VBoxContainer/Button2
+@onready var reset_all_button = $Panel/MarginContainer/VBoxContainer/ResetAllButton
 
 func _ready():
 	# Focus the first button automatically for keyboard/controller-friendly navigation.
@@ -22,46 +20,42 @@ func _on_button_pressed():
 	# to get a correct appearance when the button is hovered or pressed.
 	# We can't use a single StyleBox for all of them as these have different
 	# background colors.
-	var new_stylebox_normal = button.get_stylebox("normal").duplicate()
+	var new_stylebox_normal = button.get_theme_stylebox("normal").duplicate()
 	new_stylebox_normal.border_color = Color(1, 1, 0)
-	var new_stylebox_hover = button.get_stylebox("hover").duplicate()
+	var new_stylebox_hover = button.get_theme_stylebox("hover").duplicate()
 	new_stylebox_hover.border_color = Color(1, 1, 0)
-	var new_stylebox_pressed = button.get_stylebox("pressed").duplicate()
+	var new_stylebox_pressed = button.get_theme_stylebox("pressed").duplicate()
 	new_stylebox_pressed.border_color = Color(1, 1, 0)
 
-	button.add_stylebox_override("normal", new_stylebox_normal)
-	button.add_stylebox_override("hover", new_stylebox_hover)
-	button.add_stylebox_override("pressed", new_stylebox_pressed)
+	button.add_theme_stylebox_override("normal", new_stylebox_normal)
+	button.add_theme_stylebox_override("hover", new_stylebox_hover)
+	button.add_theme_stylebox_override("pressed", new_stylebox_pressed)
 
-	label.add_color_override("font_color", Color(1, 1, 0.5))
+	label.add_theme_color_override("font_color", Color(1, 1, 0.5))
 
 
 func _on_button2_pressed():
-	var new_stylebox_normal = button2.get_stylebox("normal").duplicate()
+	var new_stylebox_normal = button2.get_theme_stylebox("normal").duplicate()
 	new_stylebox_normal.border_color = Color(0, 1, 0.5)
-	var new_stylebox_hover = button2.get_stylebox("hover").duplicate()
+	var new_stylebox_hover = button2.get_theme_stylebox("hover").duplicate()
 	new_stylebox_hover.border_color = Color(0, 1, 0.5)
-	var new_stylebox_pressed = button2.get_stylebox("pressed").duplicate()
+	var new_stylebox_pressed = button2.get_theme_stylebox("pressed").duplicate()
 	new_stylebox_pressed.border_color = Color(0, 1, 0.5)
 
-	button2.add_stylebox_override("normal", new_stylebox_normal)
-	button2.add_stylebox_override("hover", new_stylebox_hover)
-	button2.add_stylebox_override("pressed", new_stylebox_pressed)
+	button2.add_theme_stylebox_override("normal", new_stylebox_normal)
+	button2.add_theme_stylebox_override("hover", new_stylebox_hover)
+	button2.add_theme_stylebox_override("pressed", new_stylebox_pressed)
 
-	label.add_color_override("font_color", Color(0.5, 1, 0.75))
+	label.add_theme_color_override("font_color", Color(0.5, 1, 0.75))
 
 
 func _on_reset_all_button_pressed():
-	# Resetting a theme override is done by setting the property to:
-	# - `null` for fonts, icons, styleboxes, and shaders.
-	# - `0` for constants.
-	# - Colors must be reset manually by adding the previous color value as an override.
-	button.add_stylebox_override("normal", null)
-	button.add_stylebox_override("hover", null)
-	button.add_stylebox_override("pressed", null)
+	button.remove_theme_stylebox_override("normal")
+	button.remove_theme_stylebox_override("hover")
+	button.remove_theme_stylebox_override("pressed")
 
-	button2.add_stylebox_override("normal", null)
-	button2.add_stylebox_override("hover", null)
-	button2.add_stylebox_override("pressed", null)
+	button2.remove_theme_stylebox_override("normal")
+	button2.remove_theme_stylebox_override("hover")
+	button2.remove_theme_stylebox_override("pressed")
 
-	label.add_color_override("font_color", default_label_color)
+	label.remove_theme_color_override("font_color")

gui/theming_override/test.tscn

@@ -1,11 +1,11 @@
-[gd_scene load_steps=7 format=2]
+[gd_scene load_steps=7 format=3 uid="uid://dbk0b4jkfq81v"]
 
-[ext_resource path="res://test.gd" type="Script" id=1]
+[ext_resource type="Script" path="res://test.gd" id="1"]
 
-[sub_resource type="StyleBoxFlat" id=1]
+[sub_resource type="StyleBoxFlat" id="1"]
 bg_color = Color(0.16, 0.678, 1, 0.12549)
 
-[sub_resource type="StyleBoxFlat" id=2]
+[sub_resource type="StyleBoxFlat" id="2"]
 bg_color = Color(0.266667, 0.266667, 0.266667, 1)
 border_width_left = 3
 border_width_top = 3
@@ -14,11 +14,7 @@ border_width_bottom = 3
 border_color = Color(0.4, 0.4, 0.4, 1)
 border_blend = true
 
-[sub_resource type="StyleBoxFlat" id=3]
-content_offset_left = 20.0
-content_offset_right = 20.0
-content_offset_top = 16.0
-content_offset_bottom = 16.0
+[sub_resource type="StyleBoxFlat" id="3"]
 bg_color = Color(0.2, 0.2, 0.2, 1)
 border_width_left = 3
 border_width_top = 3
@@ -27,7 +23,7 @@ border_width_bottom = 3
 border_color = Color(0.333333, 0.333333, 0.333333, 1)
 border_blend = true
 
-[sub_resource type="StyleBoxFlat" id=4]
+[sub_resource type="StyleBoxFlat" id="4"]
 bg_color = Color(0.133333, 0.133333, 0.133333, 1)
 border_width_left = 3
 border_width_top = 3
@@ -36,7 +32,7 @@ border_width_bottom = 3
 border_color = Color(0.266667, 0.266667, 0.266667, 1)
 border_blend = true
 
-[sub_resource type="Theme" id=5]
+[sub_resource type="Theme" id="5"]
 Button/colors/font_color = Color(0.88, 0.88, 0.88, 1)
 Button/colors/font_color_disabled = Color(0.9, 0.9, 0.9, 0.2)
 Button/colors/font_color_hover = Color(0.94, 0.94, 0.94, 1)
@@ -44,63 +40,69 @@ Button/colors/font_color_pressed = Color(1, 1, 1, 1)
 Button/constants/hseparation = 2
 Button/fonts/font = null
 Button/styles/disabled = null
-Button/styles/focus = SubResource( 1 )
-Button/styles/hover = SubResource( 2 )
-Button/styles/normal = SubResource( 3 )
-Button/styles/pressed = SubResource( 4 )
+Button/styles/focus = SubResource("1")
+Button/styles/hover = SubResource("2")
+Button/styles/normal = SubResource("3")
+Button/styles/pressed = SubResource("4")
 
 [node name="Control" type="Control"]
+layout_mode = 3
+anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
-theme = SubResource( 5 )
-script = ExtResource( 1 )
-__meta__ = {
-"_edit_use_anchors_": false
-}
+grow_horizontal = 2
+grow_vertical = 2
+theme = SubResource("5")
+script = ExtResource("1")
 
-[node name="VBoxContainer" type="VBoxContainer" parent="."]
+[node name="Panel" type="PanelContainer" parent="."]
+layout_mode = 1
+anchors_preset = 8
 anchor_left = 0.5
 anchor_top = 0.5
 anchor_right = 0.5
 anchor_bottom = 0.5
-offset_left = -75.5
-offset_top = -157.0
-offset_right = 75.5
-offset_bottom = 89.0
-custom_constants/separation = 20
-__meta__ = {
-"_edit_use_anchors_": false
-}
-
-[node name="Label" type="Label" parent="VBoxContainer"]
-offset_right = 151.0
-offset_bottom = 48.0
-rect_min_size = Vector2(0, 48)
+offset_left = -110.0
+offset_top = -127.0
+offset_right = 110.0
+offset_bottom = 127.0
+grow_horizontal = 2
+grow_vertical = 2
+
+[node name="MarginContainer" type="MarginContainer" parent="Panel"]
+layout_mode = 2
+theme_override_constants/margin_left = 20
+theme_override_constants/margin_top = 20
+theme_override_constants/margin_right = 20
+theme_override_constants/margin_bottom = 20
+
+[node name="VBoxContainer" type="VBoxContainer" parent="Panel/MarginContainer"]
+layout_mode = 2
+theme_override_constants/separation = 10
+
+[node name="Label" type="Label" parent="Panel/MarginContainer/VBoxContainer"]
+layout_mode = 2
 text = "GUI Theming Overrides"
-align = 1
-valign = 1
+horizontal_alignment = 1
+
+[node name="HSeparator" type="HSeparator" parent="Panel/MarginContainer/VBoxContainer"]
+layout_mode = 2
 
-[node name="Button" type="Button" parent="VBoxContainer"]
-offset_top = 68.0
-offset_right = 151.0
-offset_bottom = 114.0
+[node name="Button" type="Button" parent="Panel/MarginContainer/VBoxContainer"]
+custom_minimum_size = Vector2(0, 48)
+layout_mode = 2
 text = "Click Me"
 
-[node name="Button2" type="Button" parent="VBoxContainer"]
-offset_top = 134.0
-offset_right = 151.0
-offset_bottom = 180.0
+[node name="Button2" type="Button" parent="Panel/MarginContainer/VBoxContainer"]
+custom_minimum_size = Vector2(0, 48)
+layout_mode = 2
 text = "Click Me"
 
-[node name="ResetAllButton" type="Button" parent="VBoxContainer"]
-offset_top = 200.0
-offset_right = 151.0
-offset_bottom = 246.0
+[node name="ResetAllButton" type="Button" parent="Panel/MarginContainer/VBoxContainer"]
+custom_minimum_size = Vector2(0, 48)
+layout_mode = 2
 text = "Reset All"
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
-[connection signal="pressed" from="VBoxContainer/Button" to="." method="_on_button_pressed"]
-[connection signal="pressed" from="VBoxContainer/Button2" to="." method="_on_button2_pressed"]
-[connection signal="pressed" from="VBoxContainer/ResetAllButton" to="." method="_on_reset_all_button_pressed"]
+[connection signal="pressed" from="Panel/MarginContainer/VBoxContainer/Button" to="." method="_on_button_pressed"]
+[connection signal="pressed" from="Panel/MarginContainer/VBoxContainer/Button2" to="." method="_on_button2_pressed"]
+[connection signal="pressed" from="Panel/MarginContainer/VBoxContainer/ResetAllButton" to="." method="_on_reset_all_button_pressed"]