godotengine/godot
1
0
Fork 0
mirror of https://github.com/godotengine/godot.git synced 2025-12-04 17:04:49 +00:00
Code Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Hugo Locurcio
2025-06-05 17:05:45 +02:00
parent 68410acc61
commit d823a69237
7 changed files with 114 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
editor/icons/Camera3DDarkBackground.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 204 B

1
editor/icons/GuiTabMenuHlDarkBackground.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

30
editor/scene/3d/node_3d_editor_plugin.cpp
View File

@@ -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")));
preview_camera->set_button_icon(get_editor_theme_icon(SNAME("Camera3D")));
view_display_menu->set_button_icon(get_editor_theme_icon(SNAME("GuiTabMenuHlDarkBackground")));
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(1, get_theme_color(SNAME("warning_color"), EditorStringName(Editor)));
frame_time_gradient->set_color(2, get_theme_color(SNAME("error_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_dark_background"), 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));

6
editor/themes/editor_color_map.cpp
View File

@@ -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");

6
editor/themes/editor_theme_manager.h
View File

@@ -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;

40
editor/themes/theme_classic.cpp
View File

@@ -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);

40
editor/themes/theme_modern.cpp
View File

@@ -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);