Move theme handling code in a new Themes autoload

The preferences code only handles the UI related stuff, while the Themes autoload is now solely responsible for theme adding, removing and changing. This makes it possible to handle themes without having the preferences dialog be in the middle.

project.godot

@@ -42,6 +42,7 @@ Export="*res://src/Autoload/Export.gd"
 Palettes="*res://src/Autoload/Palettes.gd"
 Keychain="*res://addons/keychain/Keychain.gd"
 ExtensionsApi="*res://src/Autoload/ExtensionsApi.gd"
+Themes="*res://src/Autoload/Themes.gd"
 
 [debug]
 

src/Autoload/ExtensionsApi.gd

@@ -365,15 +365,12 @@ class PanelAPI:
 class ThemeAPI:
 	## Adds the [param theme] to [code]Edit -> Preferences -> Interface -> Themes[/code].
 	func add_theme(theme: Theme) -> void:
-		var themes: BoxContainer = Global.preferences_dialog.find_child("Themes")
+		Themes.add_theme(theme)
-		themes.themes.append(theme)
-		themes.add_theme(theme)
 		ExtensionsApi.add_action("ThemeAPI", "add_theme")
 
 	## Returns index of the [param theme] in preferences.
 	func find_theme_index(theme: Theme) -> int:
-		var themes: BoxContainer = Global.preferences_dialog.find_child("Themes")
+		return Themes.themes.find(theme)
-		return themes.themes.find(theme)
 
 	## Returns the current theme resource.
 	func get_theme() -> Theme:
@@ -382,16 +379,15 @@ class ThemeAPI:
 	## Sets a theme located at a given [param idx] in preferences. If theme set successfully then
 	## return [code]true[/code], else [code]false[/code].
 	func set_theme(idx: int) -> bool:
-		var themes: BoxContainer = Global.preferences_dialog.find_child("Themes")
+		if idx >= 0 and idx < Themes.themes.size():
-		if idx >= 0 and idx < themes.themes.size():
+			Themes.change_theme(idx)
-			themes.buttons_container.get_child(idx).pressed.emit()
 			return true
 		else:
 			return false
 
 	## Remove the [param theme] from preferences.
 	func remove_theme(theme: Theme) -> void:
-		Global.preferences_dialog.themes.remove_theme(theme)
+		Themes.remove_theme(theme)
 		ExtensionsApi.remove_action("ThemeAPI", "add_theme")
 
 

src/Autoload/Global.gd

@@ -12,10 +12,6 @@ signal project_about_to_switch  ## Emitted before a project is about to be switc
 signal project_switched  ## Emitted whenever you switch to some other project tab.
 signal cel_switched  ## Emitted whenever you select a different cel.
 signal project_data_changed(project: Project)  ## Emitted when project data is modified.
-## Emitted when the theme is switched. Unlike [signal Control.theme_changed],
-## this doesn't get emitted when a stylebox of a control changes, only when the
-## main theme gets switched to another.
-signal theme_switched
 
 enum LayerTypes { PIXEL, GROUP, THREE_D }
 enum GridTypes { CARTESIAN, ISOMETRIC, ALL }
@@ -228,13 +224,12 @@ var icon_color_from := ColorFrom.THEME:
 		if value == icon_color_from:
 			return
 		icon_color_from = value
-		var themes = preferences_dialog.themes
 		if icon_color_from == ColorFrom.THEME:
-			var current_theme: Theme = themes.themes[themes.theme_index]
+			var current_theme := Themes.themes[Themes.theme_index]
 			modulate_icon_color = current_theme.get_color("modulate_color", "Icons")
 		else:
 			modulate_icon_color = custom_icon_color
-		themes.change_icon_colors()
+		Themes.change_icon_colors()
 ## Found in Preferences. Color of icons when [member icon_color_from] is set to use custom colors.
 var custom_icon_color := Color.GRAY:
 	set(value):
@@ -243,7 +238,7 @@ var custom_icon_color := Color.GRAY:
 		custom_icon_color = value
 		if icon_color_from == ColorFrom.CUSTOM:
 			modulate_icon_color = custom_icon_color
-			preferences_dialog.themes.change_icon_colors()
+			Themes.change_icon_colors()
 ## Found in Preferences. The modulation color (or simply color) of canvas background
 ## (aside from checker background).
 var modulate_clear_color := Color.GRAY:
@@ -251,14 +246,14 @@ var modulate_clear_color := Color.GRAY:
 		if value == modulate_clear_color:
 			return
 		modulate_clear_color = value
-		preferences_dialog.themes.change_clear_color()
+		Themes.change_clear_color()
 ## Found in Preferences. Determines if [member modulate_clear_color] uses custom or theme color.
 var clear_color_from := ColorFrom.THEME:
 	set(value):
 		if value == clear_color_from:
 			return
 		clear_color_from = value
-		preferences_dialog.themes.change_clear_color()
+		Themes.change_clear_color()
 ## Found in Preferences. The selected size mode of tool buttons using [enum ButtonSize] enum.
 var tool_button_size := ButtonSize.SMALL:
 	set(value):
@@ -668,12 +663,10 @@ func _init() -> void:
 
 func _ready() -> void:
 	_initialize_keychain()
-	var locale_index := -1
 	var saved_locale := OS.get_locale()
 	# Load language
 	if config_cache.has_section_key("preferences", "locale"):
 		saved_locale = config_cache.get_value("preferences", "locale")
-		locale_index = loaded_locales.find(saved_locale)
 	set_locale(saved_locale)  # If no language is saved, OS' locale is used
 	default_width = config_cache.get_value("preferences", "default_width", default_width)
 	default_height = config_cache.get_value("preferences", "default_height", default_height)

src/Autoload/Themes.gd

@@ -1,9 +1,14 @@
 extends Node
 
-var theme_index := 0
+signal theme_added(theme: Theme)
-var theme_button_group := ButtonGroup.new()
+signal theme_removed(theme: Theme)
+## Emitted when the theme is switched. Unlike [signal Control.theme_changed],
+## this doesn't get emitted when a stylebox of a control changes, only when the
+## main theme gets switched to another.
+signal theme_switched
 
-@onready var themes: Array[Theme] = [
+var theme_index := 0
+var themes: Array[Theme] = [
 	preload("res://assets/themes/dark/theme.tres"),
 	preload("res://assets/themes/gray/theme.tres"),
 	preload("res://assets/themes/blue/theme.tres"),
@@ -13,14 +18,8 @@ var theme_button_group := ButtonGroup.new()
 	preload("res://assets/themes/rose/theme.tres"),
 ]
 
-@onready var buttons_container: BoxContainer = $ThemeButtons
-@onready var colors_container: BoxContainer = $ThemeColors
-@onready var theme_color_preview_scene := preload("res://src/Preferences/ThemeColorPreview.tscn")
-
 
 func _ready() -> void:
-	for theme in themes:
-		add_theme(theme)
 	var theme_id: int = Global.config_cache.get_value("preferences", "theme", 0)
 	if theme_id >= themes.size():
 		theme_id = 0
@@ -28,47 +27,16 @@ func _ready() -> void:
 		change_theme(theme_id)
 	else:
 		change_clear_color()
-	buttons_container.get_child(theme_id).button_pressed = true
-
-
-func _on_Theme_pressed(index: int) -> void:
-	buttons_container.get_child(index).button_pressed = true
-	change_theme(index)
-
-	Global.config_cache.set_value("preferences", "theme", index)
-	Global.config_cache.save("user://cache.ini")
 
 
 func add_theme(theme: Theme) -> void:
-	var button := CheckBox.new()
+	themes.append(theme)
-	var theme_name := theme.resource_name
+	theme_added.emit(theme)
-	button.name = theme_name
-	button.text = theme_name
-	button.mouse_default_cursor_shape = Control.CURSOR_POINTING_HAND
-	button.button_group = theme_button_group
-	buttons_container.add_child(button)
-	button.pressed.connect(_on_Theme_pressed.bind(button.get_index()))
-
-	var panel_stylebox: StyleBox = theme.get_stylebox("panel", "Panel")
-	var panel_container_stylebox: StyleBox = theme.get_stylebox("panel", "PanelContainer")
-	if panel_stylebox is StyleBoxFlat and panel_container_stylebox is StyleBoxFlat:
-		var theme_color_preview: ColorRect = theme_color_preview_scene.instantiate()
-		var color1: Color = panel_stylebox.bg_color
-		var color2: Color = panel_container_stylebox.bg_color
-		theme_color_preview.get_child(0).get_child(0).color = color1
-		theme_color_preview.get_child(0).get_child(1).color = color2
-		colors_container.add_child(theme_color_preview)
 
 
 func remove_theme(theme: Theme) -> void:
-	var index := themes.find(theme)
-	var theme_button := buttons_container.get_child(index)
-	var color_previews := colors_container.get_child(index)
-	buttons_container.remove_child(theme_button)
-	theme_button.queue_free()
-	colors_container.remove_child(color_previews)
-	color_previews.queue_free()
 	themes.erase(theme)
+	theme_removed.emit(theme)
 
 
 func change_theme(id: int) -> void:
@@ -83,12 +51,14 @@ func change_theme(id: int) -> void:
 	Global.control.theme = theme
 	change_clear_color()
 	change_icon_colors()
-	Global.theme_switched.emit()
+	Global.config_cache.set_value("preferences", "theme", id)
+	Global.config_cache.save("user://cache.ini")
+	theme_switched.emit()
 
 
 func change_clear_color() -> void:
 	var clear_color: Color = Global.control.theme.get_color("clear_color", "Misc")
-	if !clear_color:
+	if not clear_color:
 		var panel_stylebox: StyleBox = Global.control.theme.get_stylebox("panel", "PanelContainer")
 		if panel_stylebox is StyleBoxFlat:
 			clear_color = panel_stylebox.bg_color
@@ -102,7 +72,9 @@ func change_clear_color() -> void:
 
 func change_icon_colors() -> void:
 	for node in get_tree().get_nodes_in_group("UIButtons"):
-		if node is TextureButton:
+		if node is TextureRect or node is Sprite2D:
+			node.modulate = Global.modulate_icon_color
+		elif node is TextureButton:
 			node.modulate = Global.modulate_icon_color
 			if node.disabled and not ("RestoreDefaultButton" in node.name):
 				node.modulate.a = 0.5
@@ -112,10 +84,7 @@ func change_icon_colors() -> void:
 				if child is TextureRect and child.name != "Background":
 					texture = child
 					break
-
+			if is_instance_valid(texture):
-			if texture:
 				texture.modulate = Global.modulate_icon_color
 				if node.disabled:
 					texture.modulate.a = 0.5
-		elif node is TextureRect or node is Sprite2D:
-			node.modulate = Global.modulate_icon_color

src/Preferences/PreferencesDialog.tscn

@@ -2,7 +2,7 @@
 
 [ext_resource type="Script" path="res://src/Preferences/PreferencesDialog.gd" id="1"]
 [ext_resource type="PackedScene" uid="uid://bq7ibhm0txl5p" path="res://addons/keychain/ShortcutEdit.tscn" id="3"]
-[ext_resource type="Script" path="res://src/Preferences/HandleThemes.gd" id="5"]
+[ext_resource type="Script" path="res://src/Preferences/ThemesPreferences.gd" id="3_nvl8k"]
 [ext_resource type="PackedScene" path="res://src/UI/Nodes/ValueSliderV2.tscn" id="7"]
 [ext_resource type="Script" path="res://src/Preferences/ExtensionsPreferences.gd" id="7_8ume5"]
 [ext_resource type="Script" path="res://src/UI/Nodes/ValueSlider.gd" id="8"]
@@ -250,7 +250,7 @@ size_flags_horizontal = 3
 
 [node name="Themes" type="HBoxContainer" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Interface"]
 layout_mode = 2
-script = ExtResource("5")
+script = ExtResource("3_nvl8k")
 
 [node name="ThemeButtons" type="VBoxContainer" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Interface/Themes"]
 layout_mode = 2

src/Preferences/ThemesPreferences.gd

@@ -0,0 +1,50 @@
+extends Node
+
+var theme_button_group := ButtonGroup.new()
+
+@onready var buttons_container: BoxContainer = $ThemeButtons
+@onready var colors_container: BoxContainer = $ThemeColors
+@onready var theme_color_preview_scene := preload("res://src/Preferences/ThemeColorPreview.tscn")
+
+
+func _ready() -> void:
+	Themes.theme_added.connect(_add_theme)
+	Themes.theme_removed.connect(_remove_theme)
+	for theme in Themes.themes:
+		_add_theme(theme)
+	buttons_container.get_child(Themes.theme_index).button_pressed = true
+
+
+func _on_theme_pressed(index: int) -> void:
+	Themes.change_theme(index)
+
+
+func _add_theme(theme: Theme) -> void:
+	var button := CheckBox.new()
+	var theme_name := theme.resource_name
+	button.name = theme_name
+	button.text = theme_name
+	button.mouse_default_cursor_shape = Control.CURSOR_POINTING_HAND
+	button.button_group = theme_button_group
+	buttons_container.add_child(button)
+	button.pressed.connect(_on_theme_pressed.bind(button.get_index()))
+
+	var panel_stylebox: StyleBox = theme.get_stylebox("panel", "Panel")
+	var panel_container_stylebox: StyleBox = theme.get_stylebox("panel", "PanelContainer")
+	if panel_stylebox is StyleBoxFlat and panel_container_stylebox is StyleBoxFlat:
+		var theme_color_preview: ColorRect = theme_color_preview_scene.instantiate()
+		var color1: Color = panel_stylebox.bg_color
+		var color2: Color = panel_container_stylebox.bg_color
+		theme_color_preview.get_child(0).get_child(0).color = color1
+		theme_color_preview.get_child(0).get_child(1).color = color2
+		colors_container.add_child(theme_color_preview)
+
+
+func _remove_theme(theme: Theme) -> void:
+	var index := Themes.themes.find(theme)
+	var theme_button := buttons_container.get_child(index)
+	var color_previews := colors_container.get_child(index)
+	buttons_container.remove_child(theme_button)
+	theme_button.queue_free()
+	colors_container.remove_child(color_previews)
+	color_previews.queue_free()

src/UI/Timeline/CelButton.gd

@@ -17,7 +17,7 @@ var _is_guide_stylebox := false
 
 func _ready() -> void:
 	Global.cel_switched.connect(cel_switched)
-	Global.theme_switched.connect(cel_switched.bind(true))
+	Themes.theme_switched.connect(cel_switched.bind(true))
 	cel = Global.current_project.frames[frame].cels[layer]
 	button_setup()
 	_dim_checker()