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

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