Add a new editor theme

doc/classes/EditorSettings.xml

@@ -1107,6 +1107,9 @@
 		<member name="interface/theme/border_size" type="int" setter="" getter="">
 			The border size to use for interface elements (in pixels).
 		</member>
+		<member name="interface/theme/color_preset" type="String" setter="" getter="">
+			The editor color preset to use.
+		</member>
 		<member name="interface/theme/contrast" type="float" setter="" getter="">
 			The contrast factor to use when deriving the editor theme's base color (see [member interface/theme/base_color]). When using a positive values, the derived colors will be [i]darker[/i] than the base color. This contrast factor can be set to a negative value, which will make the derived colors [i]brighter[/i] than the base color. Negative contrast rates often look better for light themes.
 		</member>
@@ -1119,6 +1122,12 @@
 		<member name="interface/theme/draw_extra_borders" type="bool" setter="" getter="">
 			If [code]true[/code], draws additional borders around interactive UI elements in the editor. This is automatically enabled when using the [b]Black (OLED)[/b] theme preset, as this theme preset uses a fully black background.
 		</member>
+		<member name="interface/theme/draw_relationship_lines" type="int" setter="" getter="">
+			What relationship lines to draw in the editor's [Tree]-based GUIs (such as the Scene tree dock).
+			- [b]None[/b] will make it so that no relationship lines are drawn.
+			- [b]Selected Only[/b] will only draw them for selected items.
+			- [b]All[/b] will always draw them for all items.
+		</member>
 		<member name="interface/theme/follow_system_theme" type="bool" setter="" getter="">
 			If [code]true[/code], the editor theme preset will attempt to automatically match the system theme.
 		</member>
@@ -1132,15 +1141,15 @@
 			The saturation to use for editor icons. Higher values result in more vibrant colors.
 			[b]Note:[/b] The default editor icon saturation was increased by 30% in Godot 4.0 and later. To get Godot 3.x's icon saturation back, set [member interface/theme/icon_saturation] to [code]0.77[/code].
 		</member>
-		<member name="interface/theme/preset" type="String" setter="" getter="">
-			The editor theme preset to use.
-		</member>
 		<member name="interface/theme/relationship_line_opacity" type="float" setter="" getter="">
 			The opacity to use when drawing relationship lines in the editor's [Tree]-based GUIs (such as the Scene tree dock).
 		</member>
 		<member name="interface/theme/spacing_preset" type="String" setter="" getter="">
 			The editor theme spacing preset to use. See also [member interface/theme/base_spacing] and [member interface/theme/additional_spacing].
 		</member>
+		<member name="interface/theme/style" type="String" setter="" getter="">
+			The editor theme style to use.
+		</member>
 		<member name="interface/theme/use_system_accent_color" type="bool" setter="" getter="">
 			If [code]true[/code], set accent color based on system settings.
 			[b]Note:[/b] This setting is only effective on Windows, MacOS, and Android.

editor/audio/editor_audio_buses.cpp

@@ -47,6 +47,7 @@
 #include "scene/gui/separator.h"
 #include "scene/main/timer.h"
 #include "scene/resources/font.h"
+#include "scene/resources/style_box_flat.h"
 #include "servers/audio/audio_server.h"
 
 void EditorAudioBus::_update_visible_channels() {
@@ -87,10 +88,11 @@ void EditorAudioBus::_notification(int p_what) {
 
 			disabled_vu = get_editor_theme_icon(SNAME("BusVuFrozen"));
 
-			Color solo_color = EditorThemeManager::is_dark_theme() ? Color(1.0, 0.89, 0.22) : Color(1.9, 1.74, 0.83);
-			Color mute_color = EditorThemeManager::is_dark_theme() ? Color(1.0, 0.16, 0.16) : Color(2.35, 1.03, 1.03);
-			Color bypass_color = EditorThemeManager::is_dark_theme() ? Color(0.13, 0.8, 1.0) : Color(1.03, 2.04, 2.35);
-			float darkening_factor = EditorThemeManager::is_dark_theme() ? 0.15 : 0.65;
+			bool dark_icon_and_font = EditorThemeManager::is_dark_icon_and_font();
+			Color solo_color = dark_icon_and_font ? Color(1.0, 0.89, 0.22) : Color(1.9, 1.74, 0.83);
+			Color mute_color = dark_icon_and_font ? Color(1.0, 0.16, 0.16) : Color(2.35, 1.03, 1.03);
+			Color bypass_color = dark_icon_and_font ? Color(0.13, 0.8, 1.0) : Color(1.03, 2.04, 2.35);
+			float darkening_factor = dark_icon_and_font ? 0.15 : 0.65;
 			Color solo_color_darkened = solo_color.darkened(darkening_factor);
 			Color mute_color_darkened = mute_color.darkened(darkening_factor);
 			Color bypass_color_darkened = bypass_color.darkened(darkening_factor);

editor/docks/filesystem_dock.cpp

@@ -236,8 +236,8 @@ void FileSystemDock::_create_tree(TreeItem *p_parent, EditorFileSystemDirectory
 	Ref<DirAccess> da = DirAccess::create(DirAccess::ACCESS_RESOURCES);
 
 	if (has_custom_color) {
-		subdirectory_item->set_icon_modulate(0, editor_is_dark_theme ? custom_color : custom_color * ITEM_COLOR_SCALE);
-		subdirectory_item->set_custom_bg_color(0, Color(custom_color, editor_is_dark_theme ? ITEM_ALPHA_MIN : ITEM_ALPHA_MAX));
+		subdirectory_item->set_icon_modulate(0, editor_is_dark_icon_and_font ? custom_color : custom_color * ITEM_COLOR_SCALE);
+		subdirectory_item->set_custom_bg_color(0, Color(custom_color, editor_is_dark_icon_and_font ? ITEM_ALPHA_MIN : ITEM_ALPHA_MAX));
 	} else {
 		TreeItem *parent = subdirectory_item->get_parent();
 		if (parent) {
@@ -630,9 +630,9 @@ void FileSystemDock::_notification(int p_what) {
 			// Update editor dark theme & always show folders states from editor settings, redraw if needed.
 			bool do_redraw = false;
 
-			bool new_editor_is_dark_theme = EditorThemeManager::is_dark_theme();
-			if (new_editor_is_dark_theme != editor_is_dark_theme) {
-				editor_is_dark_theme = new_editor_is_dark_theme;
+			bool new_editor_is_dark_icon_and_font = EditorThemeManager::is_dark_icon_and_font();
+			if (new_editor_is_dark_icon_and_font != editor_is_dark_icon_and_font) {
+				editor_is_dark_icon_and_font = new_editor_is_dark_icon_and_font;
 				do_redraw = true;
 			}
 
@@ -1080,7 +1080,7 @@ void FileSystemDock::_update_file_list(bool p_keep_selection) {
 
 					files->set_item_metadata(-1, bd);
 					files->set_item_selectable(-1, false);
-					if (!editor_is_dark_theme && inherited_folder_color != default_folder_color) {
+					if (!editor_is_dark_icon_and_font && inherited_folder_color != default_folder_color) {
 						files->set_item_icon_modulate(-1, inherited_folder_color * ITEM_COLOR_SCALE);
 					} else {
 						files->set_item_icon_modulate(-1, inherited_folder_color);
@@ -1098,7 +1098,7 @@ void FileSystemDock::_update_file_list(bool p_keep_selection) {
 					files->add_item(dname, folder_icon, true);
 					files->set_item_metadata(-1, dpath);
 					Color this_folder_color = has_custom_color ? folder_colors[assigned_folder_colors[dpath]] : inherited_folder_color;
-					if (!editor_is_dark_theme && this_folder_color != default_folder_color) {
+					if (!editor_is_dark_icon_and_font && this_folder_color != default_folder_color) {
 						this_folder_color *= ITEM_COLOR_SCALE;
 					}
 					files->set_item_icon_modulate(-1, this_folder_color);
@@ -3393,7 +3393,7 @@ void FileSystemDock::_file_and_folders_fill_popup(PopupMenu *p_popup, const Vect
 			for (const KeyValue<String, Color> &E : folder_colors) {
 				folder_colors_menu->add_icon_item(get_editor_theme_icon(SNAME("Folder")), E.key.capitalize());
 
-				folder_colors_menu->set_item_icon_modulate(-1, editor_is_dark_theme ? E.value : E.value * 2);
+				folder_colors_menu->set_item_icon_modulate(-1, editor_is_dark_icon_and_font ? E.value : E.value * 2);
 				folder_colors_menu->set_item_metadata(-1, E.key);
 			}
 		}
@@ -4226,7 +4226,7 @@ FileSystemDock::FileSystemDock() {
 
 	assigned_folder_colors = ProjectSettings::get_singleton()->get_setting("file_customization/folder_colors");
 
-	editor_is_dark_theme = EditorThemeManager::is_dark_theme();
+	editor_is_dark_icon_and_font = EditorThemeManager::is_dark_icon_and_font();
 
 	VBoxContainer *main_vb = memnew(VBoxContainer);
 	add_child(main_vb);

editor/docks/filesystem_dock.h

@@ -211,7 +211,7 @@ class FileSystemDock : public EditorDock {
 	bool always_show_folders = false;
 	int thumbnail_size_setting = 0;
 
-	bool editor_is_dark_theme = false;
+	bool editor_is_dark_icon_and_font = false;
 
 	class FileOrFolder {
 	public:

editor/editor_node.cpp

@@ -1096,8 +1096,8 @@ void EditorNode::_update_update_spinner() {
 		// as this feature should only be enabled for troubleshooting purposes.
 		// Make the icon modulate color overbright because icons are not completely white on a dark theme.
 		// On a light theme, icons are dark, so we need to modulate them with an even brighter color.
-		const bool dark_theme = EditorThemeManager::is_dark_theme();
-		update_spinner->set_self_modulate(theme->get_color(SNAME("error_color"), EditorStringName(Editor)) * (dark_theme ? Color(1.1, 1.1, 1.1) : Color(4.25, 4.25, 4.25)));
+		const bool dark_icon_and_font = EditorThemeManager::is_dark_icon_and_font();
+		update_spinner->set_self_modulate(theme->get_color(SNAME("error_color"), EditorStringName(Editor)) * (dark_icon_and_font ? Color(1.1, 1.1, 1.1) : Color(4.25, 4.25, 4.25)));
 	} else {
 		update_spinner->set_tooltip_text(TTRC("Spins when the editor window redraws."));
 		update_spinner->set_self_modulate(Color(1, 1, 1));

editor/gui/editor_dir_dialog.cpp

@@ -38,7 +38,7 @@
 #include "scene/gui/tree.h"
 #include "servers/display/display_server.h"
 
-void EditorDirDialog::_update_dir(const Color &p_default_folder_color, const Dictionary &p_assigned_folder_colors, const HashMap<String, Color> &p_folder_colors, bool p_is_dark_theme, TreeItem *p_item, EditorFileSystemDirectory *p_dir, const String &p_select_path) {
+void EditorDirDialog::_update_dir(const Color &p_default_folder_color, const Dictionary &p_assigned_folder_colors, const HashMap<String, Color> &p_folder_colors, bool p_is_dark_icon_and_font, TreeItem *p_item, EditorFileSystemDirectory *p_dir, const String &p_select_path) {
 	updating = true;
 
 	const String path = p_dir->get_path();
@@ -58,8 +58,8 @@ void EditorDirDialog::_update_dir(const Color &p_default_folder_color, const Dic
 
 		if (p_assigned_folder_colors.has(path)) {
 			const Color &folder_color = p_folder_colors[p_assigned_folder_colors[path]];
-			p_item->set_icon_modulate(0, p_is_dark_theme ? folder_color : folder_color * FileSystemDock::ITEM_COLOR_SCALE);
-			p_item->set_custom_bg_color(0, Color(folder_color, p_is_dark_theme ? FileSystemDock::ITEM_ALPHA_MIN : FileSystemDock::ITEM_ALPHA_MAX));
+			p_item->set_icon_modulate(0, p_is_dark_icon_and_font ? folder_color : folder_color * FileSystemDock::ITEM_COLOR_SCALE);
+			p_item->set_custom_bg_color(0, Color(folder_color, p_is_dark_icon_and_font ? FileSystemDock::ITEM_ALPHA_MIN : FileSystemDock::ITEM_ALPHA_MAX));
 		} else {
 			TreeItem *parent_item = p_item->get_parent();
 			Color parent_bg_color = parent_item->get_custom_bg_color(0);
@@ -79,7 +79,7 @@ void EditorDirDialog::_update_dir(const Color &p_default_folder_color, const Dic
 	updating = false;
 	for (int i = 0; i < p_dir->get_subdir_count(); i++) {
 		TreeItem *ti = tree->create_item(p_item);
-		_update_dir(p_default_folder_color, p_assigned_folder_colors, p_folder_colors, p_is_dark_theme, ti, p_dir->get_subdir(i));
+		_update_dir(p_default_folder_color, p_assigned_folder_colors, p_folder_colors, p_is_dark_icon_and_font, ti, p_dir->get_subdir(i));
 	}
 }
 
@@ -107,7 +107,7 @@ void EditorDirDialog::reload(const String &p_path) {
 
 	tree->clear();
 	TreeItem *root = tree->create_item();
-	_update_dir(tree->get_theme_color(SNAME("folder_icon_color"), SNAME("FileDialog")), FileSystemDock::get_singleton()->get_assigned_folder_colors(), FileSystemDock::get_singleton()->get_folder_colors(), EditorThemeManager::is_dark_theme(), root, EditorFileSystem::get_singleton()->get_filesystem(), p_path);
+	_update_dir(tree->get_theme_color(SNAME("folder_icon_color"), SNAME("FileDialog")), FileSystemDock::get_singleton()->get_assigned_folder_colors(), FileSystemDock::get_singleton()->get_folder_colors(), EditorThemeManager::is_dark_icon_and_font(), root, EditorFileSystem::get_singleton()->get_filesystem(), p_path);
 	_item_collapsed(root);
 	new_dir_path.clear();
 	must_reload = false;

editor/gui/editor_dir_dialog.h

@@ -52,7 +52,7 @@ class EditorDirDialog : public ConfirmationDialog {
 
 	void _item_collapsed(Object *p_item);
 	void _item_activated();
-	void _update_dir(const Color &p_default_folder_color, const Dictionary &p_assigned_folder_colors, const HashMap<String, Color> &p_folder_colors, bool p_is_dark_theme, TreeItem *p_item, EditorFileSystemDirectory *p_dir, const String &p_select_path = String());
+	void _update_dir(const Color &p_default_folder_color, const Dictionary &p_assigned_folder_colors, const HashMap<String, Color> &p_folder_colors, bool p_is_dark_icon_and_font, TreeItem *p_item, EditorFileSystemDirectory *p_dir, const String &p_select_path = String());
 
 	void _make_dir();
 	void _make_dir_confirm(const String &p_path, const String &p_base_dir);

editor/gui/editor_object_selector.cpp

@@ -208,9 +208,8 @@ EditorObjectSelector::EditorObjectSelector(EditorSelectionHistory *p_history) {
 	history = p_history;
 
 	MarginContainer *main_mc = memnew(MarginContainer);
+	main_mc->set_theme_type_variation("ObjectSelectorMargin");
 	main_mc->set_anchors_and_offsets_preset(PRESET_FULL_RECT);
-	main_mc->add_theme_constant_override("margin_left", 4 * EDSCALE);
-	main_mc->add_theme_constant_override("margin_right", 6 * EDSCALE);
 	add_child(main_mc);
 
 	HBoxContainer *main_hb = memnew(HBoxContainer);

editor/inspector/editor_inspector.cpp

@@ -1978,6 +1978,8 @@ void EditorInspectorSection::_notification(int p_what) {
 
 			bg_color = theme_cache.prop_subsection;
 			bg_color.a /= level;
+
+			vbox->add_theme_constant_override("separation", theme_cache.vertical_separation);
 		} break;
 
 		case NOTIFICATION_SORT_CHILDREN: {
@@ -3552,7 +3554,7 @@ void EditorInspector::initialize_section_theme(EditorInspectorSection::ThemeCach
 	}
 
 	p_cache.horizontal_separation = p_control->get_theme_constant(SNAME("h_separation"), SNAME("EditorInspectorSection"));
-	p_cache.vertical_separation = p_control->get_theme_constant(SNAME("v_separation"), SNAME("Tree"));
+	p_cache.vertical_separation = p_control->get_theme_constant(SNAME("v_separation"), SNAME("EditorInspector"));
 	p_cache.inspector_margin = p_control->get_theme_constant(SNAME("inspector_margin"), EditorStringName(Editor));
 	p_cache.indent_size = p_control->get_theme_constant(SNAME("indent_size"), SNAME("EditorInspectorSection"));
 	p_cache.key_padding_size = int(EDITOR_GET("interface/theme/base_spacing")) * 2;
@@ -3591,7 +3593,7 @@ void EditorInspector::initialize_category_theme(EditorInspectorCategory::ThemeCa
 	}
 
 	p_cache.horizontal_separation = p_control->get_theme_constant(SNAME("h_separation"), SNAME("Tree"));
-	p_cache.vertical_separation = p_control->get_theme_constant(SNAME("v_separation"), SNAME("Tree"));
+	p_cache.vertical_separation = p_control->get_theme_constant(SNAME("v_separation"), SNAME("EditorInspector"));
 	p_cache.class_icon_size = p_control->get_theme_constant(SNAME("class_icon_size"), EditorStringName(Editor));
 
 	p_cache.font_color = p_control->get_theme_color(SceneStringName(font_color), SNAME("Tree"));
@@ -3806,8 +3808,7 @@ void EditorInspector::_add_section_in_tree(EditorInspectorSection *p_section, VB
 	}
 	if (!container) {
 		container = memnew(VBoxContainer);
-		int separation = get_theme_constant(SNAME("v_separation"), SNAME("EditorInspector"));
-		container->add_theme_constant_override("separation", separation);
+		container->add_theme_constant_override("separation", theme_cache.vertical_separation);
 		p_current_vbox->add_child(container);
 	}
 	container->add_child(p_section);
@@ -4209,6 +4210,7 @@ void EditorInspector::update_tree() {
 		// Recreate the category vbox if it was reset.
 		if (category_vbox == nullptr) {
 			category_vbox = memnew(VBoxContainer);
+			category_vbox->add_theme_constant_override("separation", theme_cache.vertical_separation);
 			category_vbox->hide();
 			main_vbox->add_child(category_vbox);
 		}

editor/project_manager/project_manager.cpp

@@ -232,7 +232,7 @@ void ProjectManager::_update_theme(bool p_skip_creation) {
 		main_vbox->add_theme_constant_override("separation", top_bar_separation);
 
 		background_panel->add_theme_style_override(SceneStringName(panel), get_theme_stylebox("Background", EditorStringName(EditorStyles)));
-		main_view_container->add_theme_style_override(SceneStringName(panel), get_theme_stylebox(SceneStringName(panel), "TabContainer"));
+		main_view_container->add_theme_style_override(SceneStringName(panel), get_theme_stylebox("panel_container", "ProjectManager"));
 
 		title_bar_logo->set_button_icon(get_editor_theme_icon("TitleBarLogo"));
 

editor/project_manager/quick_settings_dialog.cpp

@@ -59,7 +59,7 @@ void QuickSettingsDialog::_fetch_setting_values() {
 #ifndef ANDROID_ENABLED
 				editor_languages = pi.hint_string.split(";", false);
 #endif
-			} else if (pi.name == "interface/theme/preset") {
+			} else if (pi.name == "interface/theme/color_preset") {
 				editor_themes = pi.hint_string.split(",");
 			} else if (pi.name == "interface/editor/display_scale") {
 				editor_scales = pi.hint_string.split(",");
@@ -93,7 +93,7 @@ void QuickSettingsDialog::_update_current_values() {
 
 	// Theme options.
 	{
-		const String current_theme = EDITOR_GET("interface/theme/preset");
+		const String current_theme = EDITOR_GET("interface/theme/color_preset");
 
 		for (int i = 0; i < editor_themes.size(); i++) {
 			const String &theme_value = editor_themes[i];
@@ -185,7 +185,7 @@ void QuickSettingsDialog::_language_selected(int p_id) {
 
 void QuickSettingsDialog::_theme_selected(int p_id) {
 	const String selected_theme = theme_option_button->get_item_text(p_id);
-	_set_setting_value("interface/theme/preset", selected_theme);
+	_set_setting_value("interface/theme/color_preset", selected_theme);
 
 	custom_theme_label->set_visible(selected_theme == "Custom");
 }
@@ -241,7 +241,7 @@ void QuickSettingsDialog::update_size_limits(const Size2 &p_max_popup_size) {
 void QuickSettingsDialog::_notification(int p_what) {
 	switch (p_what) {
 		case NOTIFICATION_THEME_CHANGED: {
-			settings_list_panel->add_theme_style_override(SceneStringName(panel), get_theme_stylebox(SNAME("Background"), EditorStringName(EditorStyles)));
+			settings_list_panel->add_theme_style_override(SceneStringName(panel), get_theme_stylebox(SNAME("quick_settings_panel"), SNAME("ProjectManager")));
 
 			restart_required_label->add_theme_color_override(SceneStringName(font_color), get_theme_color(SNAME("warning_color"), EditorStringName(Editor)));
 			custom_theme_label->add_theme_color_override(SceneStringName(font_color), get_theme_color(SNAME("font_placeholder_color"), EditorStringName(Editor)));
@@ -307,7 +307,7 @@ QuickSettingsDialog::QuickSettingsDialog() {
 				theme_option_button->add_item(theme_value, i);
 			}
 
-			_add_setting_control(TTRC("Interface Theme"), theme_option_button);
+			_add_setting_control(TTRC("Color Preset"), theme_option_button);
 
 			custom_theme_label = memnew(Label(TTRC("Custom preset can be further configured in the editor.")));
 			custom_theme_label->set_horizontal_alignment(HORIZONTAL_ALIGNMENT_RIGHT);

editor/run/game_view_plugin.cpp

@@ -1125,12 +1125,8 @@ GameView::GameView(Ref<GameViewDebugger> p_debugger, EmbeddedProcessBase *p_embe
 	window_wrapper = p_wrapper;
 	embedded_process = p_embedded_process;
 
-	// Add some margin to the sides for better aesthetics.
-	// This prevents the first button's hover/pressed effect from "touching" the panel's border,
-	// which looks ugly.
 	MarginContainer *toolbar_margin = memnew(MarginContainer);
-	toolbar_margin->add_theme_constant_override("margin_left", 4 * EDSCALE);
-	toolbar_margin->add_theme_constant_override("margin_right", 4 * EDSCALE);
+	toolbar_margin->set_theme_type_variation("MainToolBarMargin");
 	add_child(toolbar_margin);
 
 	HBoxContainer *main_menu_hbox = memnew(HBoxContainer);

editor/scene/2d/tiles/tile_set_editor.cpp

@@ -370,7 +370,7 @@ void TileSetEditor::_notification(int p_what) {
 			source_sort_button->set_button_icon(get_editor_theme_icon(SNAME("Sort")));
 			sources_advanced_menu_button->set_button_icon(get_editor_theme_icon(SNAME("GuiTabMenuHl")));
 			missing_texture_texture = get_editor_theme_icon(SNAME("TileSet"));
-			expanded_area->add_theme_style_override(SceneStringName(panel), get_theme_stylebox(SceneStringName(panel), "Tree"));
+			expanded_area->add_theme_style_override(SceneStringName(panel), get_theme_stylebox(SNAME("expand_panel"), SNAME("TileSetEditor")));
 			_update_sources_list();
 		} break;