Skip to content

Fix icon colors in light color preset of modern theme #112277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 1, 2025
Merged

Fix icon colors in light color preset of modern theme #112277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion editor/themes/editor_theme_manager.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ class EditorThemeManager {
int forced_even_separation = 0;

Color mono_color;
Color mono_color_icon_and_font;
Color mono_color_font;
Color mono_color_inv;
Color dark_color_1;
Color dark_color_2;
Expand Down
36 changes: 18 additions & 18 deletions editor/themes/theme_classic.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ void ThemeClassic::populate_shared_styles(const Ref<EditorTheme> &p_theme, Edito

// White (dark theme) or black (light theme), will be used to generate the rest of the colors
p_config.mono_color = p_config.dark_theme ? Color(1, 1, 1) : Color(0, 0, 0);
p_config.mono_color_icon_and_font = p_config.dark_icon_and_font ? Color(1, 1, 1) : Color(0, 0, 0);
p_config.mono_color_font = p_config.dark_icon_and_font ? Color(1, 1, 1) : Color(0, 0, 0);

// Ensure base colors are in the 0..1 luminance range to avoid 8-bit integer overflow or text rendering issues.
// Some places in the editor use 8-bit integer colors.
Expand All @@ -70,7 +70,7 @@ void ThemeClassic::populate_shared_styles(const Ref<EditorTheme> &p_theme, Edito
p_config.error_color = Color(1, 0.47, 0.42);
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_icon_and_font, 0.35);
p_config.success_color = p_config.success_color.lerp(p_config.mono_color_font, 0.35);
p_config.warning_color = Color(0.82, 0.56, 0.1);
p_config.error_color = Color(0.8, 0.22, 0.22);
}
Expand Down Expand Up @@ -99,14 +99,14 @@ void ThemeClassic::populate_shared_styles(const Ref<EditorTheme> &p_theme, Edito

// Font colors.

p_config.font_color = p_config.mono_color_icon_and_font.lerp(p_config.base_color, 0.25);
p_config.font_focus_color = p_config.mono_color_icon_and_font.lerp(p_config.base_color, 0.125);
p_config.font_hover_color = p_config.mono_color_icon_and_font.lerp(p_config.base_color, 0.125);
p_config.font_color = p_config.mono_color_font.lerp(p_config.base_color, 0.25);
p_config.font_focus_color = p_config.mono_color_font.lerp(p_config.base_color, 0.125);
p_config.font_hover_color = p_config.mono_color_font.lerp(p_config.base_color, 0.125);
p_config.font_pressed_color = p_config.accent_color;
p_config.font_hover_pressed_color = p_config.font_hover_color.lerp(p_config.accent_color, 0.74);
p_config.font_disabled_color = Color(p_config.mono_color_icon_and_font.r, p_config.mono_color_icon_and_font.g, p_config.mono_color_icon_and_font.b, 0.35);
p_config.font_readonly_color = Color(p_config.mono_color_icon_and_font.r, p_config.mono_color_icon_and_font.g, p_config.mono_color_icon_and_font.b, 0.65);
p_config.font_placeholder_color = Color(p_config.mono_color_icon_and_font.r, p_config.mono_color_icon_and_font.g, p_config.mono_color_icon_and_font.b, 0.5);
p_config.font_disabled_color = Color(p_config.mono_color_font.r, p_config.mono_color_font.g, p_config.mono_color_font.b, 0.35);
p_config.font_readonly_color = Color(p_config.mono_color_font.r, p_config.mono_color_font.g, p_config.mono_color_font.b, 0.65);
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);

p_theme->set_color(SceneStringName(font_color), EditorStringName(Editor), p_config.font_color);
Expand Down Expand Up @@ -591,10 +591,10 @@ void ThemeClassic::populate_standard_styles(const Ref<EditorTheme> &p_theme, Edi

p_theme->set_color("custom_button_font_highlight", "Tree", p_config.font_hover_color);
p_theme->set_color(SceneStringName(font_color), "Tree", p_config.font_color);
p_theme->set_color("font_hovered_color", "Tree", p_config.mono_color_icon_and_font);
p_theme->set_color("font_hovered_color", "Tree", p_config.mono_color_font);
p_theme->set_color("font_hovered_dimmed_color", "Tree", p_config.font_color);
p_theme->set_color("font_hovered_selected_color", "Tree", p_config.mono_color_icon_and_font);
p_theme->set_color("font_selected_color", "Tree", p_config.mono_color_icon_and_font);
p_theme->set_color("font_hovered_selected_color", "Tree", p_config.mono_color_font);
p_theme->set_color("font_selected_color", "Tree", p_config.mono_color_font);
p_theme->set_color("font_disabled_color", "Tree", p_config.font_disabled_color);
p_theme->set_color("font_outline_color", "Tree", p_config.font_outline_color);
p_theme->set_color("title_button_color", "Tree", p_config.font_color);
Expand Down Expand Up @@ -726,9 +726,9 @@ void ThemeClassic::populate_standard_styles(const Ref<EditorTheme> &p_theme, Edi
p_theme->set_stylebox("hovered_selected", "ItemList", style_itemlist_hover_selected);
p_theme->set_stylebox("hovered_selected_focus", "ItemList", style_itemlist_hover_selected);
p_theme->set_color(SceneStringName(font_color), "ItemList", p_config.font_color);
p_theme->set_color("font_hovered_color", "ItemList", p_config.mono_color_icon_and_font);
p_theme->set_color("font_hovered_selected_color", "ItemList", p_config.mono_color_icon_and_font);
p_theme->set_color("font_selected_color", "ItemList", p_config.mono_color_icon_and_font);
p_theme->set_color("font_hovered_color", "ItemList", p_config.mono_color_font);
p_theme->set_color("font_hovered_selected_color", "ItemList", p_config.mono_color_font);
p_theme->set_color("font_selected_color", "ItemList", p_config.mono_color_font);
p_theme->set_color("font_outline_color", "ItemList", p_config.font_outline_color);
p_theme->set_color("guide_color", "ItemList", Color(1, 1, 1, 0));
p_theme->set_constant("v_separation", "ItemList", p_config.forced_even_separation * EDSCALE);
Expand Down Expand Up @@ -880,7 +880,7 @@ void ThemeClassic::populate_standard_styles(const Ref<EditorTheme> &p_theme, Edi
p_theme->set_icon("clear", "LineEdit", p_theme->get_icon(SNAME("GuiClose"), EditorStringName(EditorIcons)));

p_theme->set_color(SceneStringName(font_color), "LineEdit", p_config.font_color);
p_theme->set_color("font_selected_color", "LineEdit", p_config.mono_color_icon_and_font);
p_theme->set_color("font_selected_color", "LineEdit", p_config.mono_color_font);
p_theme->set_color("font_uneditable_color", "LineEdit", p_config.font_readonly_color);
p_theme->set_color("font_placeholder_color", "LineEdit", p_config.font_placeholder_color);
p_theme->set_color("font_outline_color", "LineEdit", p_config.font_outline_color);
Expand Down Expand Up @@ -2135,7 +2135,7 @@ void ThemeClassic::populate_editor_styles(const Ref<EditorTheme> &p_theme, Edito
const Color kbd_color = p_config.font_color.lerp(Color(0.5, 0.5, 0.5), 0.5);

p_theme->set_color("title_color", "EditorHelp", p_config.accent_color);
p_theme->set_color("headline_color", "EditorHelp", p_config.mono_color_icon_and_font);
p_theme->set_color("headline_color", "EditorHelp", p_config.mono_color_font);
p_theme->set_color("text_color", "EditorHelp", p_config.font_color);
p_theme->set_color("comment_color", "EditorHelp", p_config.font_color * Color(1, 1, 1, 0.6));
p_theme->set_color("symbol_color", "EditorHelp", p_config.font_color * Color(1, 1, 1, 0.6));
Expand All @@ -2144,8 +2144,8 @@ void ThemeClassic::populate_editor_styles(const Ref<EditorTheme> &p_theme, Edito
p_theme->set_color("type_color", "EditorHelp", p_config.accent_color.lerp(p_config.font_color, 0.5));
p_theme->set_color("override_color", "EditorHelp", p_config.warning_color);
p_theme->set_color("selection_color", "EditorHelp", p_config.selection_color);
p_theme->set_color("link_color", "EditorHelp", p_config.accent_color.lerp(p_config.mono_color_icon_and_font, 0.8));
p_theme->set_color("code_color", "EditorHelp", p_config.accent_color.lerp(p_config.mono_color_icon_and_font, 0.6));
p_theme->set_color("link_color", "EditorHelp", p_config.accent_color.lerp(p_config.mono_color_font, 0.8));
p_theme->set_color("code_color", "EditorHelp", p_config.accent_color.lerp(p_config.mono_color_font, 0.6));
p_theme->set_color("kbd_color", "EditorHelp", p_config.accent_color.lerp(kbd_color, 0.6));
p_theme->set_color("code_bg_color", "EditorHelp", p_config.dark_color_3);
p_theme->set_color("kbd_bg_color", "EditorHelp", p_config.dark_color_1);
Expand Down
56 changes: 30 additions & 26 deletions editor/themes/theme_modern.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ void ThemeModern::populate_shared_styles(const Ref<EditorTheme> &p_theme, Editor

// White (dark theme) or black (light theme), will be used to generate the rest of the colors
p_config.mono_color = p_config.dark_theme ? Color(1, 1, 1) : Color(0, 0, 0);
p_config.mono_color_icon_and_font = p_config.dark_icon_and_font ? Color(1, 1, 1) : Color(0, 0, 0);
p_config.mono_color_font = p_config.dark_icon_and_font ? Color(1, 1, 1) : Color(0, 0, 0);
p_config.mono_color_inv = p_config.dark_theme ? Color(0, 0, 0) : Color(1, 1, 1);

// Ensure base colors are in the 0..1 luminance range to avoid 8-bit integer overflow or text rendering issues.
Expand All @@ -81,7 +81,7 @@ void ThemeModern::populate_shared_styles(const Ref<EditorTheme> &p_theme, Editor
p_config.error_color = Color(1, 0.47, 0.42);
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_icon_and_font, 0.35);
p_config.success_color = p_config.success_color.lerp(p_config.mono_color_font, 0.35);
p_config.warning_color = Color(0.83, 0.49, 0.01);
p_config.error_color = Color(0.8, 0.22, 0.22);
}
Expand Down Expand Up @@ -110,14 +110,14 @@ void ThemeModern::populate_shared_styles(const Ref<EditorTheme> &p_theme, Editor

// Font colors.

p_config.font_color = p_config.mono_color_icon_and_font * Color(1, 1, 1, 0.7);
p_config.font_secondary_color = p_config.mono_color_icon_and_font * Color(1, 1, 1, 0.45);
p_config.font_focus_color = p_config.mono_color_icon_and_font;
p_config.font_hover_color = p_config.mono_color_icon_and_font;
p_config.font_pressed_color = p_config.mono_color_icon_and_font;
p_config.font_hover_pressed_color = p_config.mono_color_icon_and_font;
p_config.font_disabled_color = p_config.mono_color_icon_and_font * Color(1, 1, 1, p_config.dark_icon_and_font ? 0.35 : 0.5);
p_config.font_readonly_color = Color(p_config.mono_color_icon_and_font.r, p_config.mono_color_icon_and_font.g, p_config.mono_color_icon_and_font.b, 0.65);
p_config.font_color = p_config.mono_color_font * Color(1, 1, 1, 0.7);
p_config.font_secondary_color = p_config.mono_color_font * Color(1, 1, 1, 0.45);
p_config.font_focus_color = p_config.mono_color_font;
p_config.font_hover_color = p_config.mono_color_font;
p_config.font_pressed_color = p_config.mono_color_font;
p_config.font_hover_pressed_color = p_config.mono_color_font;
p_config.font_disabled_color = p_config.mono_color_font * Color(1, 1, 1, p_config.dark_icon_and_font ? 0.35 : 0.5);
p_config.font_readonly_color = Color(p_config.mono_color_font.r, p_config.mono_color_font.g, p_config.mono_color_font.b, 0.65);
p_config.font_placeholder_color = p_config.font_disabled_color;
p_config.font_outline_color = Color(1, 1, 1, 0);

Expand All @@ -139,12 +139,13 @@ void ThemeModern::populate_shared_styles(const Ref<EditorTheme> &p_theme, Editor

// Icon colors.

p_config.icon_normal_color = p_config.mono_color_icon_and_font * Color(1, 1, 1, 0.7);
p_config.icon_secondary_color = p_config.mono_color_icon_and_font * Color(1, 1, 1, 0.45);
p_config.icon_focus_color = p_config.mono_color_icon_and_font;
p_config.icon_hover_color = p_config.mono_color_icon_and_font;
p_config.icon_pressed_color = p_config.mono_color_icon_and_font;
p_config.icon_disabled_color = p_config.mono_color_icon_and_font * Color(1, 1, 1, p_config.dark_icon_and_font ? 0.35 : 0.5);
p_config.icon_normal_color = Color(1, 1, 1, p_config.dark_icon_and_font ? 0.7 : 0.95);
p_config.icon_secondary_color = Color(1, 1, 1, p_config.dark_icon_and_font ? 0.45 : 0.6);
p_config.icon_focus_color = Color(1, 1, 1);
p_config.icon_hover_color = Color(1, 1, 1);
p_config.icon_pressed_color = p_config.accent_color * (p_config.dark_icon_and_font ? 1.15 : 3.5);
p_config.icon_pressed_color.a = 1.0;
p_config.icon_disabled_color = Color(1, 1, 1, p_config.dark_icon_and_font ? 0.35 : 0.5);

p_theme->set_color("icon_normal_color", EditorStringName(Editor), p_config.icon_normal_color);
p_theme->set_color("icon_focus_color", EditorStringName(Editor), p_config.icon_focus_color);
Expand Down Expand Up @@ -436,8 +437,8 @@ void ThemeModern::populate_standard_styles(const Ref<EditorTheme> &p_theme, Edit
p_theme->set_color("icon_normal_color", "Button", p_config.icon_normal_color);
p_theme->set_color("icon_hover_color", "Button", p_config.icon_hover_color);
p_theme->set_color("icon_focus_color", "Button", p_config.icon_focus_color);
p_theme->set_color("icon_hover_pressed_color", "Button", p_config.accent_color);
p_theme->set_color("icon_pressed_color", "Button", p_config.accent_color);
p_theme->set_color("icon_hover_pressed_color", "Button", p_config.icon_pressed_color);
p_theme->set_color("icon_pressed_color", "Button", p_config.icon_pressed_color);
p_theme->set_color("icon_disabled_color", "Button", p_config.icon_disabled_color);

p_theme->set_constant("h_separation", "Button", 4 * EDSCALE);
Expand Down Expand Up @@ -1746,11 +1747,14 @@ void ThemeModern::populate_editor_styles(const Ref<EditorTheme> &p_theme, Editor

p_theme->set_type_variation("EditorLogFilterButton", "Button");
// When pressed, don't tint the icons with the accent color, just leave them normal.
p_theme->set_color("icon_pressed_color", "EditorLogFilterButton", p_config.icon_pressed_color);
p_theme->set_color("icon_pressed_color", "EditorLogFilterButton", p_config.icon_normal_color);
// When unpressed, dim the icons.
p_theme->set_color("icon_normal_color", "EditorLogFilterButton", p_config.icon_disabled_color);
p_theme->set_color("icon_hover_color", "EditorLogFilterButton", p_config.icon_hover_color);
p_theme->set_color("icon_hover_pressed_color", "EditorLogFilterButton", p_config.icon_hover_color);
Color icon_normal_color = Color(p_config.icon_normal_color, (p_config.dark_icon_and_font ? 0.4 : 0.8));
p_theme->set_color("icon_normal_color", "EditorLogFilterButton", icon_normal_color);
Color icon_hover_color = p_config.icon_normal_color * (p_config.dark_icon_and_font ? 1.15 : 1.0);
icon_hover_color.a = 1.0;
p_theme->set_color("icon_hover_color", "EditorLogFilterButton", icon_hover_color);
p_theme->set_color("icon_hover_pressed_color", "EditorLogFilterButton", icon_hover_color);

// Hover and pressed styles are swapped for toggle buttons on purpose.
p_theme->set_stylebox(CoreStringName(normal), "EditorLogFilterButton", p_config.base_empty_style);
Expand Down Expand Up @@ -1922,7 +1926,7 @@ void ThemeModern::populate_editor_styles(const Ref<EditorTheme> &p_theme, Editor

p_theme->set_color("prop_subsection", EditorStringName(Editor), Color(1, 1, 1, 0));
#ifndef DISABLE_DEPRECATED // Used before 4.3.
p_theme->set_color("property_color", EditorStringName(Editor), p_config.dark_color_1.lerp(p_config.mono_color_icon_and_font, 0.12));
p_theme->set_color("property_color", EditorStringName(Editor), p_config.dark_color_1.lerp(p_config.mono_color_font, 0.12));
#endif

// EditorInspectorCategory.
Expand Down Expand Up @@ -2109,7 +2113,7 @@ void ThemeModern::populate_editor_styles(const Ref<EditorTheme> &p_theme, Editor
const Color kbd_color = p_config.font_color.lerp(Color(0.5, 0.5, 0.5), 0.5);

p_theme->set_color("title_color", "EditorHelp", p_config.accent_color);
p_theme->set_color("headline_color", "EditorHelp", p_config.mono_color_icon_and_font);
p_theme->set_color("headline_color", "EditorHelp", p_config.mono_color_font);
p_theme->set_color("text_color", "EditorHelp", p_config.font_color);
p_theme->set_color("comment_color", "EditorHelp", p_config.font_color * Color(1, 1, 1, 0.6));
p_theme->set_color("symbol_color", "EditorHelp", p_config.font_color * Color(1, 1, 1, 0.6));
Expand All @@ -2118,8 +2122,8 @@ void ThemeModern::populate_editor_styles(const Ref<EditorTheme> &p_theme, Editor
p_theme->set_color("type_color", "EditorHelp", p_config.accent_color.lerp(p_config.font_color, 0.5));
p_theme->set_color("override_color", "EditorHelp", p_config.warning_color);
p_theme->set_color("selection_color", "EditorHelp", p_config.selection_color);
p_theme->set_color("link_color", "EditorHelp", p_config.accent_color.lerp(p_config.mono_color_icon_and_font, 0.8));
p_theme->set_color("code_color", "EditorHelp", p_config.accent_color.lerp(p_config.mono_color_icon_and_font, 0.6));
p_theme->set_color("link_color", "EditorHelp", p_config.accent_color.lerp(p_config.mono_color_font, 0.8));
p_theme->set_color("code_color", "EditorHelp", p_config.accent_color.lerp(p_config.mono_color_font, 0.6));
p_theme->set_color("kbd_color", "EditorHelp", p_config.accent_color.lerp(kbd_color, 0.6));
p_theme->set_color("code_bg_color", "EditorHelp", p_config.dark_color_3);
p_theme->set_color("kbd_bg_color", "EditorHelp", p_config.dark_color_1);
Expand Down