Skip to content

Add Support for Custom Component Styles #7

@Putyk

Description

@Putyk

Hello, first of all, thank you for your contribution! This plugin is incredibly convenient and practical in actual use.

While using Godot, I often create custom UI components and would like to add custom styles for these components to the theme. Below is a temporary code snippet I implemented:

Add Custom Component

func _add_custom_theme_style(theme: Theme) -> void:
	pass

func add_custom_theme_item(
		theme: Theme,
		name: StringName,                # Component name, e.g., "Timepoint"
		theme_type: Theme.DataType,      # 0-6
		item_dir: Dictionary             # Dictionary of options to add, e.g., {"normal": stylebox}
	) -> void:
	# Set theme items based on type
	match theme_type:
		0:
			for state in item_dir.keys():
				if item_dir[state] is Color:
					theme.set_color(state, name, item_dir[state])
				else:
					push_error("Invalid color value for state '%s'" % state)
		1:
			for state in item_dir.keys():
				if item_dir[state] is int:
					theme.set_constant(state, name, item_dir[state])
				else:
					push_error("Invalid constant value for state '%s'" % state)
		2:
			for state in item_dir.keys():
				if item_dir[state] is Font:
					theme.set_font(state, name, item_dir[state])
				else:
					push_error("Invalid font value for state '%s'" % state)
		3:
			for state in item_dir.keys():
				if item_dir[state] is int:
					theme.set_font_size(state, name, item_dir[state])
				else:
					push_error("Invalid font size value for state '%s'" % state)
		4:
			for state in item_dir.keys():
				if item_dir[state] is Texture2D:
					theme.set_icon(state, name, item_dir[state])
				else:
					push_error("Invalid icon value for state '%s'" % state)
		5:
			for state in item_dir.keys():
				if item_dir[state] is StyleBox:
					theme.set_stylebox(state, name, item_dir[state])
					print(1)
				else:
					push_error("Invalid stylebox value for state '%s'" % state)
		_:
			push_error("Invalid theme data type: %d" % theme_type)
	print("Added successfully")

Additionally, integrate _add_custom_theme_style(theme) into the _generate_theme() function:

func _generate_theme(setup_function: Callable):
	_reset()
	_debug("Setting up theme generation.... (%s)" % setup_function)
	setup_function.call()

	if _save_path == null:
		push_error("Save path must be set before generating the theme. (See set_save_path(...))")
		return

	_debug("Generating theme... (%s)" % _theme_generator)
	var theme = Theme.new()
	_add_custom_theme_style(theme)

Usage Example
Here's how this could be used to add custom styles for a "Timepoint" component:

func _add_custom_theme_style(theme: Theme) -> void:
	# Add Timepoint component styles
	add_custom_theme_item(theme, "Timepoint", 5, {
		"normal": StyleBoxFlat.new(),
		"pressed": StyleBoxFlat.new(),
	})
Image

It would be great if similar functionality could be officially supported in the plugin. Thank you again for your excellent work!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions