Add a GUI theming override demo

Overriding theme items is a common point of confusion. This demo
should hopefully make it easier to understand.

In the future, we could extend this demo to include things like theme
switching as it's a common need in non-game applications.

gui/theming_override/README.md

@@ -0,0 +1,11 @@
+# GUI Theming Override Demo
+
+Demonstrates how to override GUI colors and styleboxes at runtime.
+
+Language: GDScript
+
+Renderer: GLES 2
+
+## Screenshots
+
+![Screenshot](screenshots/theming_override.png)

gui/theming_override/icon.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/icon.png-487276ed1e3a0c39cad0279d744ee560.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://icon.png"
+dest_files=[ "res://.import/icon.png-487276ed1e3a0c39cad0279d744ee560.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
+stream=false
+size_limit=0
+detect_3d=true
+svg/scale=1.0

gui/theming_override/project.godot

@@ -0,0 +1,34 @@
+; Engine configuration file.
+; It's best edited using the editor UI and not directly,
+; since the parameters that go here are not all obvious.
+;
+; Format:
+;   [section] ; section goes between []
+;   param=value ; assign values to parameters
+
+config_version=4
+
+_global_script_classes=[  ]
+_global_script_class_icons={
+
+}
+
+[application]
+
+config/name="GUI Theming Override Demo"
+config/description="Demonstrates how to override GUI colors and styleboxes at runtime."
+run/main_scene="res://test.tscn"
+config/icon="res://icon.png"
+
+[display]
+
+window/size/height=576
+window/stretch/mode="2d"
+window/stretch/aspect="expand"
+
+[rendering]
+
+quality/driver/driver_name="GLES2"
+vram_compression/import_etc=true
+vram_compression/import_etc2=false
+environment/default_clear_color=Color( 0.133333, 0.133333, 0.133333, 1 )

gui/theming_override/screenshots/theming_override.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/theming_override.png-fd290b6e357e98ef694c719db436e418.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://screenshots/theming_override.png"
+dest_files=[ "res://.import/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
+stream=false
+size_limit=0
+detect_3d=true
+svg/scale=1.0

gui/theming_override/test.gd

@@ -0,0 +1,69 @@
+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", ...)`
+# 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
+
+
+func _ready():
+	# Focus the first button automatically for keyboard/controller-friendly navigation.
+	button.grab_focus()
+
+
+func _on_button_pressed():
+	# We have to modify the normal, hover and pressed styleboxes all at once
+	# 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()
+	new_stylebox_normal.border_color = Color(1, 1, 0)
+	var new_stylebox_hover = button.get_stylebox("hover").duplicate()
+	new_stylebox_hover.border_color = Color(1, 1, 0)
+	var new_stylebox_pressed = button.get_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)
+
+	label.add_color_override("font_color", Color(1, 1, 0.5))
+
+
+func _on_button2_pressed():
+	var new_stylebox_normal = button2.get_stylebox("normal").duplicate()
+	new_stylebox_normal.border_color = Color(0, 1, 0.5)
+	var new_stylebox_hover = button2.get_stylebox("hover").duplicate()
+	new_stylebox_hover.border_color = Color(0, 1, 0.5)
+	var new_stylebox_pressed = button2.get_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)
+
+	label.add_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)
+
+	button2.add_stylebox_override("normal", null)
+	button2.add_stylebox_override("hover", null)
+	button2.add_stylebox_override("pressed", null)
+
+	# If you don't have any references to the previous color value,
+	# you can instance a node at runtime to get this value.
+	var default_label_color = Label.new().get_color("font_color")
+	label.add_color_override("font_color", default_label_color)

gui/theming_override/test.tscn

@@ -0,0 +1,105 @@
+[gd_scene load_steps=7 format=2]
+
+[ext_resource path="res://test.gd" type="Script" id=1]
+
+[sub_resource type="StyleBoxFlat" id=1]
+bg_color = Color( 0.16, 0.678, 1, 0.12549 )
+
+[sub_resource type="StyleBoxFlat" id=2]
+bg_color = Color( 0.266667, 0.266667, 0.266667, 1 )
+border_width_left = 3
+border_width_top = 3
+border_width_right = 3
+border_width_bottom = 3
+border_color = Color( 0.4, 0.4, 0.4, 1 )
+border_blend = true
+
+[sub_resource type="StyleBoxFlat" id=3]
+content_margin_left = 20.0
+content_margin_right = 20.0
+content_margin_top = 16.0
+content_margin_bottom = 16.0
+bg_color = Color( 0.2, 0.2, 0.2, 1 )
+border_width_left = 3
+border_width_top = 3
+border_width_right = 3
+border_width_bottom = 3
+border_color = Color( 0.333333, 0.333333, 0.333333, 1 )
+border_blend = true
+
+[sub_resource type="StyleBoxFlat" id=4]
+bg_color = Color( 0.133333, 0.133333, 0.133333, 1 )
+border_width_left = 3
+border_width_top = 3
+border_width_right = 3
+border_width_bottom = 3
+border_color = Color( 0.266667, 0.266667, 0.266667, 1 )
+border_blend = true
+
+[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 )
+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 )
+
+[node name="Control" type="Control"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+theme = SubResource( 5 )
+script = ExtResource( 1 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="VBoxContainer" type="VBoxContainer" parent="."]
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+margin_left = -75.5
+margin_top = -157.0
+margin_right = 75.5
+margin_bottom = 89.0
+custom_constants/separation = 20
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="Label" type="Label" parent="VBoxContainer"]
+margin_right = 151.0
+margin_bottom = 48.0
+rect_min_size = Vector2( 0, 48 )
+text = "GUI Theming Overrides"
+align = 1
+valign = 1
+
+[node name="Button" type="Button" parent="VBoxContainer"]
+margin_top = 68.0
+margin_right = 151.0
+margin_bottom = 114.0
+text = "Click Me"
+
+[node name="Button2" type="Button" parent="VBoxContainer"]
+margin_top = 134.0
+margin_right = 151.0
+margin_bottom = 180.0
+text = "Click Me"
+
+[node name="ResetAllButton" type="Button" parent="VBoxContainer"]
+margin_top = 200.0
+margin_right = 151.0
+margin_bottom = 246.0
+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"]