Skip to content

Commit 9e6fefd

Browse files
RepiteoRepiteo
committed
Merge pull request #107154 from Calinou/3d-editor-light-theme-use-dark-background
Always use a dark background for 3D editor overlays even with light theme
2 parents 131ba00 + d823a69 commit 9e6fefd

File tree

7 files changed

+114
-10
lines changed

7 files changed

+114
-10
lines changed

‎editor/icons/Camera3DDarkBackground.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎editor/icons/GuiTabMenuHlDarkBackground.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎editor/scene/3d/node_3d_editor_plugin.cpp‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3135,6 +3135,16 @@ void Node3DEditorViewport::_project_settings_changed() {
31353135
viewport->set_anisotropic_filtering_level(anisotropic_filtering_level);
31363136
}
31373137

3138+
static void override_label_colors(Control *p_control) {
3139+
p_control->begin_bulk_theme_override();
3140+
p_control->add_theme_color_override(SceneStringName(font_color), p_control->get_theme_color(SNAME("font_dark_background_color"), EditorStringName(Editor)));
3141+
p_control->add_theme_color_override("font_hover_color", p_control->get_theme_color(SNAME("font_dark_background_hover_color"), EditorStringName(Editor)));
3142+
p_control->add_theme_color_override("font_focus_color", p_control->get_theme_color(SNAME("font_dark_background_focus_color"), EditorStringName(Editor)));
3143+
p_control->add_theme_color_override("font_pressed_color", p_control->get_theme_color(SNAME("font_dark_background_pressed_color"), EditorStringName(Editor)));
3144+
p_control->add_theme_color_override("font_hover_pressed_color", p_control->get_theme_color(SNAME("font_dark_background_hover_pressed_color"), EditorStringName(Editor)));
3145+
p_control->end_bulk_theme_override();
3146+
}
3147+
31383148
static void override_button_stylebox(Button *p_button, const Ref<StyleBox> p_stylebox) {
31393149
p_button->begin_bulk_theme_override();
31403150
p_button->add_theme_style_override(CoreStringName(normal), p_stylebox);
@@ -3542,21 +3552,25 @@ void Node3DEditorViewport::_notification(int p_what) {
35423552
case NOTIFICATION_THEME_CHANGED: {
35433553
_update_centered_labels();
35443554

3545-
view_display_menu->set_button_icon(get_editor_theme_icon(SNAME("GuiTabMenuHl")));
3546-
preview_camera->set_button_icon(get_editor_theme_icon(SNAME("Camera3D")));
3555+
view_display_menu->set_button_icon(get_editor_theme_icon(SNAME("GuiTabMenuHlDarkBackground")));
3556+
preview_camera->set_button_icon(get_editor_theme_icon(SNAME("Camera3DDarkBackground")));
35473557
Control *gui_base = EditorNode::get_singleton()->get_gui_base();
35483558

35493559
const Ref<StyleBox> &information_3d_stylebox = gui_base->get_theme_stylebox(SNAME("Information3dViewport"), EditorStringName(EditorStyles));
35503560

35513561
override_button_stylebox(view_display_menu, information_3d_stylebox);
3562+
override_label_colors(view_display_menu);
35523563
override_button_stylebox(translation_preview_button, information_3d_stylebox);
3564+
override_label_colors(translation_preview_button);
35533565
override_button_stylebox(preview_camera, information_3d_stylebox);
3566+
override_label_colors(preview_camera);
35543567

3555-
frame_time_gradient->set_color(0, get_theme_color(SNAME("success_color"), EditorStringName(Editor)));
3556-
frame_time_gradient->set_color(1, get_theme_color(SNAME("warning_color"), EditorStringName(Editor)));
3557-
frame_time_gradient->set_color(2, get_theme_color(SNAME("error_color"), EditorStringName(Editor)));
3568+
frame_time_gradient->set_color(0, get_theme_color(SNAME("success_color_dark_background"), EditorStringName(Editor)));
3569+
frame_time_gradient->set_color(1, get_theme_color(SNAME("warning_color_dark_background"), EditorStringName(Editor)));
3570+
frame_time_gradient->set_color(2, get_theme_color(SNAME("error_color_dark_background"), EditorStringName(Editor)));
35583571

35593572
info_panel->add_theme_style_override(SceneStringName(panel), information_3d_stylebox);
3573+
override_label_colors(info_label);
35603574

35613575
frame_time_panel->add_theme_style_override(SceneStringName(panel), information_3d_stylebox);
35623576
// 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
36143628
p_surface.draw_texture(p_icon, icon_pos, p_color);
36153629

36163630
// Draw text below the bar (for speed/zoom information).
3617-
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));
3631+
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));
36183632
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);
36193633
}
36203634

@@ -3820,7 +3834,7 @@ void Node3DEditorViewport::_draw() {
38203834
*surface,
38213835
1.0 - logscale_t,
38223836
get_editor_theme_icon(SNAME("ViewportSpeed")),
3823-
get_theme_font(SceneStringName(font), SNAME("Label")),
3837+
get_theme_font("bold", EditorStringName(EditorFonts)),
38243838
get_theme_font_size(SceneStringName(font_size), SNAME("Label")),
38253839
vformat("%s m/s", String::num(freelook_speed).pad_decimals(precision)),
38263840
Color(1.0, 0.95, 0.7));
@@ -3843,7 +3857,7 @@ void Node3DEditorViewport::_draw() {
38433857
*surface,
38443858
logscale_t,
38453859
get_editor_theme_icon(SNAME("ViewportZoom")),
3846-
get_theme_font(SceneStringName(font), SNAME("Label")),
3860+
get_theme_font("bold", EditorStringName(EditorFonts)),
38473861
get_theme_font_size(SceneStringName(font_size), SNAME("Label")),
38483862
vformat("%s m", String::num(cursor.distance).pad_decimals(precision)),
38493863
Color(0.7, 0.95, 1.0));

‎editor/themes/editor_color_map.cpp‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,12 @@ void EditorColorMap::create() {
185185
add_conversion_exception("MaterialPreviewSphere");
186186
add_conversion_exception("MaterialPreviewQuad");
187187

188+
// 3D editor icons (always on a dark background, even in light theme).
189+
add_conversion_exception("Camera3DDarkBackground");
190+
add_conversion_exception("GuiTabMenuHlDarkBackground");
191+
add_conversion_exception("ViewportSpeed");
192+
add_conversion_exception("ViewportZoom");
193+
188194
add_conversion_exception("MaterialPreviewLight1");
189195
add_conversion_exception("MaterialPreviewLight2");
190196

‎editor/themes/editor_theme_manager.h‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,12 @@ class EditorThemeManager {
127127
Color font_placeholder_color;
128128
Color font_outline_color;
129129

130+
Color font_dark_background_color;
131+
Color font_dark_background_focus_color;
132+
Color font_dark_background_hover_color;
133+
Color font_dark_background_pressed_color;
134+
Color font_dark_background_hover_pressed_color;
135+
130136
Color icon_normal_color;
131137
Color icon_secondary_color;
132138
Color icon_focus_color;

‎editor/themes/theme_classic.cpp‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,14 @@ void ThemeClassic::populate_shared_styles(const Ref<EditorTheme> &p_theme, Edito
6868
p_config.success_color = Color(0.45, 0.95, 0.5);
6969
p_config.warning_color = Color(1, 0.87, 0.4);
7070
p_config.error_color = Color(1, 0.47, 0.42);
71+
72+
// Keep dark theme colors accessible for use in the frame time gradient in the 3D editor.
73+
// This frame time gradient is used to colorize text for a dark background, so it should keep using bright colors
74+
// even when using a light theme.
75+
p_theme->set_color("success_color_dark_background", EditorStringName(Editor), p_config.success_color);
76+
p_theme->set_color("warning_color_dark_background", EditorStringName(Editor), p_config.warning_color);
77+
p_theme->set_color("error_color_dark_background", EditorStringName(Editor), p_config.error_color);
78+
7179
if (!p_config.dark_icon_and_font) {
7280
// Darken some colors to be readable on a light background.
7381
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
110118
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);
111119
p_config.font_outline_color = Color(0, 0, 0, 0);
112120

121+
// Colors designed for dark backgrounds, even when using a light theme.
122+
// This is used for 3D editor overlay texts.
123+
if (p_config.dark_theme) {
124+
p_config.font_dark_background_color = p_config.font_color;
125+
p_config.font_dark_background_focus_color = p_config.font_focus_color;
126+
p_config.font_dark_background_hover_color = p_config.font_hover_color;
127+
p_config.font_dark_background_pressed_color = p_config.font_pressed_color;
128+
p_config.font_dark_background_hover_pressed_color = p_config.font_hover_pressed_color;
129+
} else {
130+
p_config.font_dark_background_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.75);
131+
p_config.font_dark_background_focus_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.25);
132+
p_config.font_dark_background_hover_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.25);
133+
p_config.font_dark_background_pressed_color = p_config.font_dark_background_color.lerp(p_config.accent_color, 0.74);
134+
p_config.font_dark_background_hover_pressed_color = p_config.font_dark_background_color.lerp(p_config.accent_color, 0.5);
135+
}
136+
113137
p_theme->set_color(SceneStringName(font_color), EditorStringName(Editor), p_config.font_color);
114138
p_theme->set_color("font_focus_color", EditorStringName(Editor), p_config.font_focus_color);
115139
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
119143
p_theme->set_color("font_readonly_color", EditorStringName(Editor), p_config.font_readonly_color);
120144
p_theme->set_color("font_placeholder_color", EditorStringName(Editor), p_config.font_placeholder_color);
121145
p_theme->set_color("font_outline_color", EditorStringName(Editor), p_config.font_outline_color);
146+
147+
p_theme->set_color("font_dark_background_color", EditorStringName(Editor), p_config.font_dark_background_color);
148+
p_theme->set_color("font_dark_background_focus_color", EditorStringName(Editor), p_config.font_dark_background_focus_color);
149+
p_theme->set_color("font_dark_background_hover_color", EditorStringName(Editor), p_config.font_dark_background_hover_color);
150+
p_theme->set_color("font_dark_background_pressed_color", EditorStringName(Editor), p_config.font_dark_background_pressed_color);
151+
p_theme->set_color("font_dark_background_hover_pressed_color", EditorStringName(Editor), p_config.font_dark_background_hover_pressed_color);
152+
122153
#ifndef DISABLE_DEPRECATED // Used before 4.3.
123154
p_theme->set_color("readonly_font_color", EditorStringName(Editor), p_config.font_readonly_color);
124155
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
15581589

15591590
// 3D/Spatial editor.
15601591
Ref<StyleBoxFlat> style_info_3d_viewport = p_config.base_style->duplicate();
1561-
style_info_3d_viewport->set_bg_color(style_info_3d_viewport->get_bg_color() * Color(1, 1, 1, 0.5));
1592+
Color bg_color = style_info_3d_viewport->get_bg_color() * Color(1, 1, 1, 0.5);
1593+
if (!p_config.dark_theme) {
1594+
// Always use a dark background for the 3D viewport, even in light themes.
1595+
// This is displayed as an overlay of the 3D scene, whose appearance doesn't change with the editor theme.
1596+
// On top of that, dark overlays are more readable than light overlays.
1597+
bg_color.invert();
1598+
}
1599+
style_info_3d_viewport->set_bg_color(bg_color);
15621600
style_info_3d_viewport->set_border_width_all(0);
15631601
p_theme->set_stylebox("Information3dViewport", EditorStringName(EditorStyles), style_info_3d_viewport);
15641602

‎editor/themes/theme_modern.cpp‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,14 @@ void ThemeModern::populate_shared_styles(const Ref<EditorTheme> &p_theme, Editor
7979
p_config.success_color = Color(0.45, 0.95, 0.5);
8080
p_config.warning_color = Color(0.83, 0.78, 0.62);
8181
p_config.error_color = Color(1, 0.47, 0.42);
82+
83+
// Keep dark theme colors accessible for use in the frame time gradient in the 3D editor.
84+
// This frame time gradient is used to colorize text for a dark background, so it should keep using bright colors
85+
// even when using a light theme.
86+
p_theme->set_color("success_color_dark_background", EditorStringName(Editor), p_config.success_color);
87+
p_theme->set_color("warning_color_dark_background", EditorStringName(Editor), p_config.warning_color);
88+
p_theme->set_color("error_color_dark_background", EditorStringName(Editor), p_config.error_color);
89+
8290
if (!p_config.dark_icon_and_font) {
8391
// Darken some colors to be readable on a light background.
8492
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
122130
p_config.font_placeholder_color = p_config.font_disabled_color;
123131
p_config.font_outline_color = Color(1, 1, 1, 0);
124132

133+
// Colors designed for dark backgrounds, even when using a light theme.
134+
// This is used for 3D editor overlay texts.
135+
if (p_config.dark_theme) {
136+
p_config.font_dark_background_color = p_config.font_color;
137+
p_config.font_dark_background_focus_color = p_config.font_focus_color;
138+
p_config.font_dark_background_hover_color = p_config.font_hover_color;
139+
p_config.font_dark_background_pressed_color = p_config.font_pressed_color;
140+
p_config.font_dark_background_hover_pressed_color = p_config.font_hover_pressed_color;
141+
} else {
142+
p_config.font_dark_background_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.75);
143+
p_config.font_dark_background_focus_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.25);
144+
p_config.font_dark_background_hover_color = p_config.mono_color.inverted().lerp(p_config.base_color, 0.25);
145+
p_config.font_dark_background_pressed_color = p_config.font_dark_background_color.lerp(p_config.accent_color, 0.74);
146+
p_config.font_dark_background_hover_pressed_color = p_config.font_dark_background_color.lerp(p_config.accent_color, 0.5);
147+
}
148+
125149
p_theme->set_color(SceneStringName(font_color), EditorStringName(Editor), p_config.font_color);
126150
p_theme->set_color("font_focus_color", EditorStringName(Editor), p_config.font_focus_color);
127151
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
131155
p_theme->set_color("font_readonly_color", EditorStringName(Editor), p_config.font_readonly_color);
132156
p_theme->set_color("font_placeholder_color", EditorStringName(Editor), p_config.font_placeholder_color);
133157
p_theme->set_color("font_outline_color", EditorStringName(Editor), p_config.font_outline_color);
158+
159+
p_theme->set_color("font_dark_background_color", EditorStringName(Editor), p_config.font_dark_background_color);
160+
p_theme->set_color("font_dark_background_focus_color", EditorStringName(Editor), p_config.font_dark_background_focus_color);
161+
p_theme->set_color("font_dark_background_hover_color", EditorStringName(Editor), p_config.font_dark_background_hover_color);
162+
p_theme->set_color("font_dark_background_pressed_color", EditorStringName(Editor), p_config.font_dark_background_pressed_color);
163+
p_theme->set_color("font_dark_background_hover_pressed_color", EditorStringName(Editor), p_config.font_dark_background_hover_pressed_color);
164+
134165
#ifndef DISABLE_DEPRECATED // Used before 4.3.
135166
p_theme->set_color("readonly_font_color", EditorStringName(Editor), p_config.font_readonly_color);
136167
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
15521583

15531584
// 3D/Spatial editor.
15541585
Ref<StyleBoxFlat> style_info_3d_viewport = p_config.base_style->duplicate();
1555-
style_info_3d_viewport->set_bg_color(p_config.dark_color_2);
1586+
Color bg_color = style_info_3d_viewport->get_bg_color() * Color(1, 1, 1, 0.5);
1587+
if (!p_config.dark_theme) {
1588+
// Always use a dark background for the 3D viewport, even in light themes.
1589+
// This is displayed as an overlay of the 3D scene, whose appearance doesn't change with the editor theme.
1590+
// On top of that, dark overlays are more readable than light overlays.
1591+
bg_color.invert();
1592+
}
1593+
style_info_3d_viewport->set_bg_color(bg_color);
15561594
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);
15571595
p_theme->set_stylebox("Information3dViewport", EditorStringName(EditorStyles), style_info_3d_viewport);
15581596

0 commit comments

Comments
 (0)