Always use a dark background for 3D editor overlays even with light theme

This results in better readability against mixed-color backgrounds,
as what you see in the 3D editor doesn't change depending on your editor theme.

This also tweaks the viewport zoom/speed label for better readability
by using a bold font and thicker outline.

editor/icons/Camera3DDarkBackground.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#fc7f7f" d="M9 2a3 3 0 0 0-3 2.777 3 3 0 1 0-3 5.047V12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1l3 2V7l-3 2V7.23A3 3 0 0 0 9 2z"/></svg>

editor/icons/GuiTabMenuHlDarkBackground.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#e0e0e0" d="M8 0a2 2 0 0 0 0 4 2 2 0 0 0 0-4zm0 6a2 2 0 0 0 0 4 2 2 0 0 0 0-4zm0 6a2 2 0 0 0 0 4 2 2 0 0 0 0-4z"/></svg>

editor/scene/3d/node_3d_editor_plugin.cpp

@@ -3135,6 +3135,16 @@ void Node3DEditorViewport::_project_settings_changed() {
 	viewport->set_anisotropic_filtering_level(anisotropic_filtering_level);
 }
 
+static void override_label_colors(Control *p_control) {
+	p_control->begin_bulk_theme_override();
+	p_control->add_theme_color_override(SceneStringName(font_color), p_control->get_theme_color(SNAME("font_dark_background_color"), EditorStringName(Editor)));
+	p_control->add_theme_color_override("font_hover_color", p_control->get_theme_color(SNAME("font_dark_background_hover_color"), EditorStringName(Editor)));
+	p_control->add_theme_color_override("font_focus_color", p_control->get_theme_color(SNAME("font_dark_background_focus_color"), EditorStringName(Editor)));
+	p_control->add_theme_color_override("font_pressed_color", p_control->get_theme_color(SNAME("font_dark_background_pressed_color"), EditorStringName(Editor)));
+	p_control->add_theme_color_override("font_hover_pressed_color", p_control->get_theme_color(SNAME("font_dark_background_hover_pressed_color"), EditorStringName(Editor)));
+	p_control->end_bulk_theme_override();
+}
+
 static void override_button_stylebox(Button *p_button, const Ref<StyleBox> p_stylebox) {
 	p_button->begin_bulk_theme_override();
 	p_button->add_theme_style_override(CoreStringName(normal), p_stylebox);
@@ -3542,21 +3552,25 @@ void Node3DEditorViewport::_notification(int p_what) {
 		case NOTIFICATION_THEME_CHANGED: {
 			_update_centered_labels();
 
-			view_display_menu->set_button_icon(get_editor_theme_icon(SNAME("GuiTabMenuHl")));
+			view_display_menu->set_button_icon(get_editor_theme_icon(SNAME("GuiTabMenuHlDarkBackground")));
-			preview_camera->set_button_icon(get_editor_theme_icon(SNAME("Camera3D")));
+			preview_camera->set_button_icon(get_editor_theme_icon(SNAME("Camera3DDarkBackground")));
 			Control *gui_base = EditorNode::get_singleton()->get_gui_base();
 
 			const Ref<StyleBox> &information_3d_stylebox = gui_base->get_theme_stylebox(SNAME("Information3dViewport"), EditorStringName(EditorStyles));
 
 			override_button_stylebox(view_display_menu, information_3d_stylebox);
+			override_label_colors(view_display_menu);
 			override_button_stylebox(translation_preview_button, information_3d_stylebox);
+			override_label_colors(translation_preview_button);
 			override_button_stylebox(preview_camera, information_3d_stylebox);
+			override_label_colors(preview_camera);
 
-			frame_time_gradient->set_color(0, get_theme_color(SNAME("success_color"), EditorStringName(Editor)));
+			frame_time_gradient->set_color(0, get_theme_color(SNAME("success_color_dark_background"), EditorStringName(Editor)));
-			frame_time_gradient->set_color(1, get_theme_color(SNAME("warning_color"), EditorStringName(Editor)));
+			frame_time_gradient->set_color(1, get_theme_color(SNAME("warning_color_dark_background"), EditorStringName(Editor)));
-			frame_time_gradient->set_color(2, get_theme_color(SNAME("error_color"), EditorStringName(Editor)));
+			frame_time_gradient->set_color(2, get_theme_color(SNAME("error_color_dark_background"), EditorStringName(Editor)));
 
 			info_panel->add_theme_style_override(SceneStringName(panel), information_3d_stylebox);
+			override_label_colors(info_label);
 
 			frame_time_panel->add_theme_style_override(SceneStringName(panel), information_3d_stylebox);
 			// Set a minimum width to prevent the width from changing all the time
@@ -3614,7 +3628,7 @@ static void draw_indicator_bar(Control &p_surface, real_t p_fill, const Ref<Text
 	p_surface.draw_texture(p_icon, icon_pos, p_color);
 
 	// Draw text below the bar (for speed/zoom information).
-	p_surface.draw_string_outline(p_font, Vector2(icon_pos.x, icon_pos.y + icon_size.y + 16 * EDSCALE), p_text, HORIZONTAL_ALIGNMENT_LEFT, -1.f, p_font_size, Math::round(2 * EDSCALE), Color(0, 0, 0));
+	p_surface.draw_string_outline(p_font, Vector2(icon_pos.x, icon_pos.y + icon_size.y + 16 * EDSCALE), p_text, HORIZONTAL_ALIGNMENT_LEFT, -1.f, p_font_size, Math::round(4 * EDSCALE), Color(0, 0, 0));
 	p_surface.draw_string(p_font, Vector2(icon_pos.x, icon_pos.y + icon_size.y + 16 * EDSCALE), p_text, HORIZONTAL_ALIGNMENT_LEFT, -1.f, p_font_size, p_color);
 }
 
@@ -3820,7 +3834,7 @@ void Node3DEditorViewport::_draw() {
 							*surface,
 							1.0 - logscale_t,
 							get_editor_theme_icon(SNAME("ViewportSpeed")),
-							get_theme_font(SceneStringName(font), SNAME("Label")),
+							get_theme_font("bold", EditorStringName(EditorFonts)),
 							get_theme_font_size(SceneStringName(font_size), SNAME("Label")),
 							vformat("%s m/s", String::num(freelook_speed).pad_decimals(precision)),
 							Color(1.0, 0.95, 0.7));
@@ -3843,7 +3857,7 @@ void Node3DEditorViewport::_draw() {
 							*surface,
 							logscale_t,
 							get_editor_theme_icon(SNAME("ViewportZoom")),
-							get_theme_font(SceneStringName(font), SNAME("Label")),
+							get_theme_font("bold", EditorStringName(EditorFonts)),
 							get_theme_font_size(SceneStringName(font_size), SNAME("Label")),
 							vformat("%s m", String::num(cursor.distance).pad_decimals(precision)),
 							Color(0.7, 0.95, 1.0));

editor/themes/editor_color_map.cpp

@@ -185,6 +185,12 @@ void EditorColorMap::create() {
 	add_conversion_exception("MaterialPreviewSphere");
 	add_conversion_exception("MaterialPreviewQuad");
 
+	// 3D editor icons (always on a dark background, even in light theme).
+	add_conversion_exception("Camera3DDarkBackground");
+	add_conversion_exception("GuiTabMenuHlDarkBackground");
+	add_conversion_exception("ViewportSpeed");
+	add_conversion_exception("ViewportZoom");
+
 	add_conversion_exception("MaterialPreviewLight1");
 	add_conversion_exception("MaterialPreviewLight2");
 

editor/themes/editor_theme_manager.h

@@ -127,6 +127,12 @@ public:
 		Color font_placeholder_color;
 		Color font_outline_color;
 
+		Color font_dark_background_color;
+		Color font_dark_background_focus_color;
+		Color font_dark_background_hover_color;
+		Color font_dark_background_pressed_color;
+		Color font_dark_background_hover_pressed_color;
+
 		Color icon_normal_color;
 		Color icon_secondary_color;
 		Color icon_focus_color;

editor/themes/theme_classic.cpp

@@ -68,6 +68,14 @@ void ThemeClassic::populate_shared_styles(const Ref<EditorTheme> &p_theme, Edito
 		p_config.success_color = Color(0.45, 0.95, 0.5);
 		p_config.warning_color = Color(1, 0.87, 0.4);
 		p_config.error_color = Color(1, 0.47, 0.42);
+
+		// Keep dark theme colors accessible for use in the frame time gradient in the 3D editor.
+		// This frame time gradient is used to colorize text for a dark background, so it should keep using bright colors
+		// even when using a light theme.
+		p_theme->set_color("success_color_dark_background", EditorStringName(Editor), p_config.success_color);
+		p_theme->set_color("warning_color_dark_background", EditorStringName(Editor), p_config.warning_color);
+		p_theme->set_color("error_color_dark_background", EditorStringName(Editor), p_config.error_color);
+
 		if (!p_config.dark_icon_and_font) {
 			// Darken some colors to be readable on a light background.
 			p_config.success_color = p_config.success_color.lerp(p_config.mono_color_font, 0.35);
@@ -110,6 +118,22 @@ void ThemeClassic::populate_shared_styles(const Ref<EditorTheme> &p_theme, Edito
 		p_config.font_placeholder_color = Color(p_config.mono_color_font.r, p_config.mono_color_font.g, p_config.mono_color_font.b, 0.5);
 		p_config.font_outline_color = Color(0, 0, 0, 0);
 
+		// Colors designed for dark backgrounds, even when using a light theme.
+		// This is used for 3D editor overlay texts.
+		if (p_config.dark_theme) {
+			p_config.font_dark_background_color = p_config.font_color;
+			p_config.font_dark_background_focus_color = p_config.font_focus_color;
+			p_config.font_dark_background_hover_color = p_config.font_hover_color;
+			p_config.font_dark_background_pressed_color = p_config.font_pressed_color;
+			p_config.font_dark_background_hover_pressed_color = p_config.font_hover_pressed_color;
+		} else {
+			p_config.font_dark_background_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.75);
+			p_config.font_dark_background_focus_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.25);
+			p_config.font_dark_background_hover_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.25);
+			p_config.font_dark_background_pressed_color = p_config.font_dark_background_color.lerp(p_config.accent_color, 0.74);
+			p_config.font_dark_background_hover_pressed_color = p_config.font_dark_background_color.lerp(p_config.accent_color, 0.5);
+		}
+
 		p_theme->set_color(SceneStringName(font_color), EditorStringName(Editor), p_config.font_color);
 		p_theme->set_color("font_focus_color", EditorStringName(Editor), p_config.font_focus_color);
 		p_theme->set_color("font_hover_color", EditorStringName(Editor), p_config.font_hover_color);
@@ -119,6 +143,13 @@ void ThemeClassic::populate_shared_styles(const Ref<EditorTheme> &p_theme, Edito
 		p_theme->set_color("font_readonly_color", EditorStringName(Editor), p_config.font_readonly_color);
 		p_theme->set_color("font_placeholder_color", EditorStringName(Editor), p_config.font_placeholder_color);
 		p_theme->set_color("font_outline_color", EditorStringName(Editor), p_config.font_outline_color);
+
+		p_theme->set_color("font_dark_background_color", EditorStringName(Editor), p_config.font_dark_background_color);
+		p_theme->set_color("font_dark_background_focus_color", EditorStringName(Editor), p_config.font_dark_background_focus_color);
+		p_theme->set_color("font_dark_background_hover_color", EditorStringName(Editor), p_config.font_dark_background_hover_color);
+		p_theme->set_color("font_dark_background_pressed_color", EditorStringName(Editor), p_config.font_dark_background_pressed_color);
+		p_theme->set_color("font_dark_background_hover_pressed_color", EditorStringName(Editor), p_config.font_dark_background_hover_pressed_color);
+
 #ifndef DISABLE_DEPRECATED // Used before 4.3.
 		p_theme->set_color("readonly_font_color", EditorStringName(Editor), p_config.font_readonly_color);
 		p_theme->set_color("disabled_font_color", EditorStringName(Editor), p_config.font_disabled_color);
@@ -1558,7 +1589,14 @@ void ThemeClassic::populate_editor_styles(const Ref<EditorTheme> &p_theme, Edito
 
 		// 3D/Spatial editor.
 		Ref<StyleBoxFlat> style_info_3d_viewport = p_config.base_style->duplicate();
-		style_info_3d_viewport->set_bg_color(style_info_3d_viewport->get_bg_color() * Color(1, 1, 1, 0.5));
+		Color bg_color = style_info_3d_viewport->get_bg_color() * Color(1, 1, 1, 0.5);
+		if (!p_config.dark_theme) {
+			// Always use a dark background for the 3D viewport, even in light themes.
+			// This is displayed as an overlay of the 3D scene, whose appearance doesn't change with the editor theme.
+			// On top of that, dark overlays are more readable than light overlays.
+			bg_color.invert();
+		}
+		style_info_3d_viewport->set_bg_color(bg_color);
 		style_info_3d_viewport->set_border_width_all(0);
 		p_theme->set_stylebox("Information3dViewport", EditorStringName(EditorStyles), style_info_3d_viewport);
 

editor/themes/theme_modern.cpp

@@ -79,6 +79,14 @@ void ThemeModern::populate_shared_styles(const Ref<EditorTheme> &p_theme, Editor
 		p_config.success_color = Color(0.45, 0.95, 0.5);
 		p_config.warning_color = Color(0.83, 0.78, 0.62);
 		p_config.error_color = Color(1, 0.47, 0.42);
+
+		// Keep dark theme colors accessible for use in the frame time gradient in the 3D editor.
+		// This frame time gradient is used to colorize text for a dark background, so it should keep using bright colors
+		// even when using a light theme.
+		p_theme->set_color("success_color_dark_background", EditorStringName(Editor), p_config.success_color);
+		p_theme->set_color("warning_color_dark_background", EditorStringName(Editor), p_config.warning_color);
+		p_theme->set_color("error_color_dark_background", EditorStringName(Editor), p_config.error_color);
+
 		if (!p_config.dark_icon_and_font) {
 			// Darken some colors to be readable on a light background.
 			p_config.success_color = p_config.success_color.lerp(p_config.mono_color_font, 0.35);
@@ -122,6 +130,22 @@ void ThemeModern::populate_shared_styles(const Ref<EditorTheme> &p_theme, Editor
 		p_config.font_placeholder_color = p_config.font_disabled_color;
 		p_config.font_outline_color = Color(1, 1, 1, 0);
 
+		// Colors designed for dark backgrounds, even when using a light theme.
+		// This is used for 3D editor overlay texts.
+		if (p_config.dark_theme) {
+			p_config.font_dark_background_color = p_config.font_color;
+			p_config.font_dark_background_focus_color = p_config.font_focus_color;
+			p_config.font_dark_background_hover_color = p_config.font_hover_color;
+			p_config.font_dark_background_pressed_color = p_config.font_pressed_color;
+			p_config.font_dark_background_hover_pressed_color = p_config.font_hover_pressed_color;
+		} else {
+			p_config.font_dark_background_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.75);
+			p_config.font_dark_background_focus_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.25);
+			p_config.font_dark_background_hover_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.25);
+			p_config.font_dark_background_pressed_color = p_config.font_dark_background_color.lerp(p_config.accent_color, 0.74);
+			p_config.font_dark_background_hover_pressed_color = p_config.font_dark_background_color.lerp(p_config.accent_color, 0.5);
+		}
+
 		p_theme->set_color(SceneStringName(font_color), EditorStringName(Editor), p_config.font_color);
 		p_theme->set_color("font_focus_color", EditorStringName(Editor), p_config.font_focus_color);
 		p_theme->set_color("font_hover_color", EditorStringName(Editor), p_config.font_hover_color);
@@ -131,6 +155,13 @@ void ThemeModern::populate_shared_styles(const Ref<EditorTheme> &p_theme, Editor
 		p_theme->set_color("font_readonly_color", EditorStringName(Editor), p_config.font_readonly_color);
 		p_theme->set_color("font_placeholder_color", EditorStringName(Editor), p_config.font_placeholder_color);
 		p_theme->set_color("font_outline_color", EditorStringName(Editor), p_config.font_outline_color);
+
+		p_theme->set_color("font_dark_background_color", EditorStringName(Editor), p_config.font_dark_background_color);
+		p_theme->set_color("font_dark_background_focus_color", EditorStringName(Editor), p_config.font_dark_background_focus_color);
+		p_theme->set_color("font_dark_background_hover_color", EditorStringName(Editor), p_config.font_dark_background_hover_color);
+		p_theme->set_color("font_dark_background_pressed_color", EditorStringName(Editor), p_config.font_dark_background_pressed_color);
+		p_theme->set_color("font_dark_background_hover_pressed_color", EditorStringName(Editor), p_config.font_dark_background_hover_pressed_color);
+
 #ifndef DISABLE_DEPRECATED // Used before 4.3.
 		p_theme->set_color("readonly_font_color", EditorStringName(Editor), p_config.font_readonly_color);
 		p_theme->set_color("disabled_font_color", EditorStringName(Editor), p_config.font_disabled_color);
@@ -1552,7 +1583,14 @@ void ThemeModern::populate_editor_styles(const Ref<EditorTheme> &p_theme, Editor
 
 		// 3D/Spatial editor.
 		Ref<StyleBoxFlat> style_info_3d_viewport = p_config.base_style->duplicate();
-		style_info_3d_viewport->set_bg_color(p_config.dark_color_2);
+		Color bg_color = style_info_3d_viewport->get_bg_color() * Color(1, 1, 1, 0.5);
+		if (!p_config.dark_theme) {
+			// Always use a dark background for the 3D viewport, even in light themes.
+			// This is displayed as an overlay of the 3D scene, whose appearance doesn't change with the editor theme.
+			// On top of that, dark overlays are more readable than light overlays.
+			bg_color.invert();
+		}
+		style_info_3d_viewport->set_bg_color(bg_color);
 		style_info_3d_viewport->set_content_margin_individual(p_config.base_margin * 2 * EDSCALE, p_config.base_margin * 1.5 * EDSCALE, p_config.base_margin * 2 * EDSCALE, p_config.base_margin * 1.5 * EDSCALE);
 		p_theme->set_stylebox("Information3dViewport", EditorStringName(EditorStyles), style_info_3d_viewport);