diff options
Diffstat (limited to 'editor/editor_themes.cpp')
| -rw-r--r-- | editor/editor_themes.cpp | 290 |
1 files changed, 194 insertions, 96 deletions
diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp index 550a73ed72..3da9899052 100644 --- a/editor/editor_themes.cpp +++ b/editor/editor_themes.cpp @@ -72,11 +72,13 @@ static Ref<StyleBoxFlat> make_flat_stylebox(Color p_color, float p_margin_left = style->set_bg_color(p_color); // Adjust level of detail based on the corners' effective sizes. style->set_corner_detail(Math::ceil(1.5 * p_corner_width * EDSCALE)); - style->set_corner_radius_all(p_corner_width); + style->set_corner_radius_all(p_corner_width * EDSCALE); style->set_default_margin(SIDE_LEFT, p_margin_left * EDSCALE); style->set_default_margin(SIDE_RIGHT, p_margin_right * EDSCALE); style->set_default_margin(SIDE_BOTTOM, p_margin_bottom * EDSCALE); style->set_default_margin(SIDE_TOP, p_margin_top * EDSCALE); + // Work around issue about antialiased edges being blurrier (GH-35279). + style->set_anti_aliased(false); return style; } @@ -95,7 +97,6 @@ static Ref<Texture2D> flip_icon(Ref<Texture2D> p_texture, bool p_flip_y = false, return p_texture; } - Ref<ImageTexture> texture(memnew(ImageTexture)); Ref<Image> img = p_texture->get_image(); ERR_FAIL_NULL_V(img, Ref<Texture2D>()); img = img->duplicate(); @@ -107,14 +108,12 @@ static Ref<Texture2D> flip_icon(Ref<Texture2D> p_texture, bool p_flip_y = false, img->flip_x(); } - texture->create_from_image(img); - return texture; + return ImageTexture::create_from_image(img); } #ifdef MODULE_SVG_ENABLED // See also `generate_icon()` in `scene/resources/default_theme.cpp`. static Ref<ImageTexture> editor_generate_icon(int p_index, bool p_convert_color, float p_scale = EDSCALE, float p_saturation = 1.0, Dictionary p_convert_colors = Dictionary()) { - Ref<ImageTexture> icon = memnew(ImageTexture); Ref<Image> img = memnew(Image); // Upsample icon generation only if the editor scale isn't an integer multiplier. @@ -127,9 +126,9 @@ static Ref<ImageTexture> editor_generate_icon(int p_index, bool p_convert_color, if (p_saturation != 1.0) { img->adjust_bcs(1.0, 1.0, p_saturation); } - icon->create_from_image(img); // in this case filter really helps - return icon; + // In this case filter really helps. + return ImageTexture::create_from_image(img); } #endif @@ -278,6 +277,14 @@ void editor_register_and_generate_icons(Ref<Theme> p_theme, bool p_dark_theme = exceptions.insert("StatusWarning"); exceptions.insert("OverbrightIndicator"); exceptions.insert("GuiMiniCheckerboard"); + + // Prevents Code Editor icons from changing + exceptions.insert("GuiTab"); + exceptions.insert("GuiSpace"); + exceptions.insert("CodeFoldedRightArrow"); + exceptions.insert("CodeFoldDownArrow"); + exceptions.insert("TextEditorPlay"); + exceptions.insert("Breakpoint"); } // These ones should be converted even if we are using a dark theme. @@ -462,6 +469,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { Color icon_hover_color = icon_normal_color * (dark_theme ? 1.15 : 1.45); icon_hover_color.a = 1.0; Color icon_focus_color = icon_hover_color; + Color icon_disabled_color = Color(icon_normal_color, 0.4); // Make the pressed icon color overbright because icons are not completely white on a dark theme. // On a light theme, icons are dark, so we need to modulate them with an even brighter color. Color icon_pressed_color = accent_color * (dark_theme ? 1.15 : 3.5); @@ -564,8 +572,6 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { // Styleboxes // This is the most commonly used stylebox, variations should be made as duplicate of this Ref<StyleBoxFlat> style_default = make_flat_stylebox(base_color, default_margin_size, default_margin_size, default_margin_size, default_margin_size, corner_width); - // Work around issue about antialiased edges being blurrier (GH-35279). - style_default->set_anti_aliased(false); style_default->set_border_width_all(border_width); style_default->set_border_color(base_color); style_default->set_draw_center(true); @@ -635,6 +641,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { // Add a highlight line at the top of the selected tab. style_tab_selected->set_border_width_all(0); + style_tab_selected->set_default_margin(SIDE_LEFT, widget_default_margin.x - border_width); style_tab_selected->set_border_width(SIDE_TOP, Math::round(2 * EDSCALE)); // Make the highlight line prominent, but not too prominent as to not be distracting. Color tab_highlight = dark_color_2.lerp(accent_color, 0.75); @@ -647,6 +654,9 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { // We can't prevent them with both rounded corners and non-zero border width, though style_tab_selected->set_expand_margin_size(SIDE_BOTTOM, corner_width > 0 ? corner_width : border_width); + // When using a border width greater than 0, visually line up the left of the selected tab with the underlying panel. + style_tab_selected->set_expand_margin_size(SIDE_LEFT, -border_width); + style_tab_selected->set_default_margin(SIDE_LEFT, widget_default_margin.x + 2 * EDSCALE); style_tab_selected->set_default_margin(SIDE_RIGHT, widget_default_margin.x + 2 * EDSCALE); style_tab_selected->set_default_margin(SIDE_BOTTOM, widget_default_margin.y); @@ -692,6 +702,21 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { style_canvas_editor_info->set_expand_margin_size_all(4 * EDSCALE); theme->set_stylebox("CanvasItemInfoOverlay", "EditorStyles", style_canvas_editor_info); + // 2D and 3D contextual toolbar. + // Use a custom stylebox to make contextual menu items stand out from the rest. + // This helps with editor usability as contextual menu items change when selecting nodes, + // even though it may not be immediately obvious at first. + Ref<StyleBoxFlat> toolbar_stylebox = memnew(StyleBoxFlat); + toolbar_stylebox->set_bg_color(accent_color * Color(1, 1, 1, 0.1)); + toolbar_stylebox->set_corner_radius(CORNER_TOP_LEFT, corner_radius * EDSCALE); + toolbar_stylebox->set_corner_radius(CORNER_TOP_RIGHT, corner_radius * EDSCALE); + toolbar_stylebox->set_anti_aliased(false); + // Add an underline to the StyleBox, but prevent its minimum vertical size from changing. + toolbar_stylebox->set_border_color(accent_color); + toolbar_stylebox->set_border_width(SIDE_BOTTOM, Math::round(2 * EDSCALE)); + toolbar_stylebox->set_default_margin(SIDE_BOTTOM, 0); + theme->set_stylebox("ContextualToolbar", "EditorStyles", toolbar_stylebox); + // Script Editor theme->set_stylebox("ScriptEditorPanel", "EditorStyles", make_empty_stylebox(default_margin_size, 0, default_margin_size, default_margin_size)); theme->set_stylebox("ScriptEditor", "EditorStyles", make_empty_stylebox(0, 0, 0, 0)); @@ -723,10 +748,12 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_color("font_focus_color", "Button", font_focus_color); theme->set_color("font_pressed_color", "Button", accent_color); theme->set_color("font_disabled_color", "Button", font_disabled_color); + theme->set_color("icon_normal_color", "Button", icon_normal_color); theme->set_color("icon_hover_color", "Button", icon_hover_color); theme->set_color("icon_focus_color", "Button", icon_focus_color); theme->set_color("icon_pressed_color", "Button", icon_pressed_color); + theme->set_color("icon_disabled_color", "Button", icon_disabled_color); const float ACTION_BUTTON_EXTRA_MARGIN = 32 * EDSCALE; @@ -753,7 +780,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { // When pressed, don't tint the icons with the accent color, just leave them normal. theme->set_color("icon_pressed_color", "EditorLogFilterButton", icon_normal_color); // When unpressed, dim the icons. - theme->set_color("icon_normal_color", "EditorLogFilterButton", font_disabled_color); + theme->set_color("icon_normal_color", "EditorLogFilterButton", icon_disabled_color); // When pressed, add a small bottom border to the buttons to better show their active state, // similar to active tabs. Ref<StyleBoxFlat> editor_log_button_pressed = style_widget_pressed->duplicate(); @@ -761,6 +788,25 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { editor_log_button_pressed->set_border_color(accent_color); theme->set_stylebox("pressed", "EditorLogFilterButton", editor_log_button_pressed); + // MenuBar + theme->set_stylebox("normal", "MenuBar", style_widget); + theme->set_stylebox("hover", "MenuBar", style_widget_hover); + theme->set_stylebox("pressed", "MenuBar", style_widget_pressed); + theme->set_stylebox("focus", "MenuBar", style_widget_focus); + theme->set_stylebox("disabled", "MenuBar", style_widget_disabled); + + theme->set_color("font_color", "MenuBar", font_color); + theme->set_color("font_hover_color", "MenuBar", font_hover_color); + theme->set_color("font_focus_color", "MenuBar", font_focus_color); + theme->set_color("font_pressed_color", "MenuBar", accent_color); + theme->set_color("font_disabled_color", "MenuBar", font_disabled_color); + + theme->set_color("icon_normal_color", "MenuBar", icon_normal_color); + theme->set_color("icon_hover_color", "MenuBar", icon_hover_color); + theme->set_color("icon_focus_color", "MenuBar", icon_focus_color); + theme->set_color("icon_pressed_color", "MenuBar", icon_pressed_color); + theme->set_color("icon_disabled_color", "MenuBar", icon_disabled_color); + // OptionButton Ref<StyleBoxFlat> style_option_button_focus = style_widget_focus->duplicate(); Ref<StyleBoxFlat> style_option_button_normal = style_widget->duplicate(); @@ -790,8 +836,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_color("font_focus_color", "OptionButton", font_focus_color); theme->set_color("font_pressed_color", "OptionButton", accent_color); theme->set_color("font_disabled_color", "OptionButton", font_disabled_color); + + theme->set_color("icon_normal_color", "OptionButton", icon_normal_color); theme->set_color("icon_hover_color", "OptionButton", icon_hover_color); theme->set_color("icon_focus_color", "OptionButton", icon_focus_color); + theme->set_color("icon_pressed_color", "OptionButton", icon_pressed_color); + theme->set_color("icon_disabled_color", "OptionButton", icon_disabled_color); + theme->set_icon("arrow", "OptionButton", theme->get_icon(SNAME("GuiOptionArrow"), SNAME("EditorIcons"))); theme->set_constant("arrow_margin", "OptionButton", widget_default_margin.x - 2 * EDSCALE); theme->set_constant("modulate_arrow", "OptionButton", true); @@ -802,6 +853,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_stylebox("pressed", "CheckButton", style_menu); theme->set_stylebox("disabled", "CheckButton", style_menu); theme->set_stylebox("hover", "CheckButton", style_menu); + theme->set_stylebox("hover_pressed", "CheckButton", style_menu); theme->set_icon("on", "CheckButton", theme->get_icon(SNAME("GuiToggleOn"), SNAME("EditorIcons"))); theme->set_icon("on_disabled", "CheckButton", theme->get_icon(SNAME("GuiToggleOnDisabled"), SNAME("EditorIcons"))); @@ -818,8 +870,12 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_color("font_focus_color", "CheckButton", font_focus_color); theme->set_color("font_pressed_color", "CheckButton", accent_color); theme->set_color("font_disabled_color", "CheckButton", font_disabled_color); + + theme->set_color("icon_normal_color", "CheckButton", icon_normal_color); theme->set_color("icon_hover_color", "CheckButton", icon_hover_color); theme->set_color("icon_focus_color", "CheckButton", icon_focus_color); + theme->set_color("icon_pressed_color", "CheckButton", icon_pressed_color); + theme->set_color("icon_disabled_color", "CheckButton", icon_disabled_color); theme->set_constant("h_separation", "CheckButton", 8 * EDSCALE); theme->set_constant("check_v_adjust", "CheckButton", 0 * EDSCALE); @@ -835,6 +891,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_stylebox("pressed", "CheckBox", sb_checkbox); theme->set_stylebox("disabled", "CheckBox", sb_checkbox); theme->set_stylebox("hover", "CheckBox", sb_checkbox); + theme->set_stylebox("hover_pressed", "CheckBox", sb_checkbox); theme->set_icon("checked", "CheckBox", theme->get_icon(SNAME("GuiChecked"), SNAME("EditorIcons"))); theme->set_icon("unchecked", "CheckBox", theme->get_icon(SNAME("GuiUnchecked"), SNAME("EditorIcons"))); theme->set_icon("radio_checked", "CheckBox", theme->get_icon(SNAME("GuiRadioChecked"), SNAME("EditorIcons"))); @@ -849,8 +906,12 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_color("font_focus_color", "CheckBox", font_focus_color); theme->set_color("font_pressed_color", "CheckBox", accent_color); theme->set_color("font_disabled_color", "CheckBox", font_disabled_color); + + theme->set_color("icon_normal_color", "CheckBox", icon_normal_color); theme->set_color("icon_hover_color", "CheckBox", icon_hover_color); theme->set_color("icon_focus_color", "CheckBox", icon_focus_color); + theme->set_color("icon_pressed_color", "CheckBox", icon_pressed_color); + theme->set_color("icon_disabled_color", "CheckBox", icon_disabled_color); theme->set_constant("h_separation", "CheckBox", 8 * EDSCALE); theme->set_constant("check_v_adjust", "CheckBox", 0 * EDSCALE); @@ -859,18 +920,20 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_stylebox("panel", "PopupDialog", style_popup); // PopupMenu - const int popup_menu_margin_size = default_margin_size * 1.5 * EDSCALE; Ref<StyleBoxFlat> style_popup_menu = style_popup->duplicate(); // Use 1 pixel for the sides, since if 0 is used, the highlight of hovered items is drawn // on top of the popup border. This causes a 'gap' in the panel border when an item is highlighted, // and it looks weird. 1px solves this. - style_popup_menu->set_default_margin(SIDE_LEFT, 1 * EDSCALE); - style_popup_menu->set_default_margin(SIDE_TOP, popup_menu_margin_size); - style_popup_menu->set_default_margin(SIDE_RIGHT, 1 * EDSCALE); - style_popup_menu->set_default_margin(SIDE_BOTTOM, popup_menu_margin_size); + style_popup_menu->set_default_margin(SIDE_LEFT, EDSCALE); + style_popup_menu->set_default_margin(SIDE_TOP, 2 * EDSCALE); + style_popup_menu->set_default_margin(SIDE_RIGHT, EDSCALE); + style_popup_menu->set_default_margin(SIDE_BOTTOM, 2 * EDSCALE); // Always display a border for PopupMenus so they can be distinguished from their background. - style_popup_menu->set_border_width_all(1 * EDSCALE); + style_popup_menu->set_border_width_all(EDSCALE); style_popup_menu->set_border_color(dark_color_2); + // Popups are separate windows by default in the editor. Windows currently don't support per-pixel transparency + // in 4.0, and even if it was, it may not always work in practice (e.g. running with compositing disabled). + style_popup_menu->set_corner_radius_all(0); theme->set_stylebox("panel", "PopupMenu", style_popup_menu); Ref<StyleBoxFlat> style_menu_hover = style_widget_hover->duplicate(); @@ -903,13 +966,14 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { // Force the v_separation to be even so that the spacing on top and bottom is even. // If the vsep is odd and cannot be split into 2 even groups (of pixels), then it will be lopsided. - // We add 2 to the vsep to give it some extra spacing which looks a bit more modern (see Windows, for example) - int vsep_base = extra_spacing + default_margin_size + 2; - int force_even_vsep = vsep_base + (vsep_base % 2); + // We add 2 to the vsep to give it some extra spacing which looks a bit more modern (see Windows, for example). + const int vsep_base = extra_spacing + default_margin_size + 6; + const int force_even_vsep = vsep_base + (vsep_base % 2); theme->set_constant("v_separation", "PopupMenu", force_even_vsep * EDSCALE); - theme->set_constant("item_start_padding", "PopupMenu", popup_menu_margin_size * EDSCALE); - theme->set_constant("item_end_padding", "PopupMenu", popup_menu_margin_size * EDSCALE); + theme->set_constant("item_start_padding", "PopupMenu", default_margin_size * 1.5 * EDSCALE); + theme->set_constant("item_end_padding", "PopupMenu", default_margin_size * 1.5 * EDSCALE); + // Sub-inspectors for (int i = 0; i < 16; i++) { Color si_base_color = accent_color; @@ -917,51 +981,53 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { si_base_color.set_hsv(Math::fmod(float(si_base_color.get_h() + hue_rotate), float(1.0)), si_base_color.get_s(), si_base_color.get_v()); si_base_color = accent_color.lerp(si_base_color, float(EDITOR_GET("docks/property_editor/subresource_hue_tint"))); - Ref<StyleBoxFlat> sub_inspector_bg; - - sub_inspector_bg = make_flat_stylebox(dark_color_1.lerp(si_base_color, 0.08), 2, 0, 2, 2); - - sub_inspector_bg->set_border_width(SIDE_LEFT, 2); - sub_inspector_bg->set_border_width(SIDE_RIGHT, 2); - sub_inspector_bg->set_border_width(SIDE_BOTTOM, 2); - sub_inspector_bg->set_border_width(SIDE_TOP, 2); - sub_inspector_bg->set_default_margin(SIDE_LEFT, 3); - sub_inspector_bg->set_default_margin(SIDE_RIGHT, 3); - sub_inspector_bg->set_default_margin(SIDE_BOTTOM, 10); - sub_inspector_bg->set_default_margin(SIDE_TOP, 5); + // Sub-inspector background. + Ref<StyleBoxFlat> sub_inspector_bg = style_default->duplicate(); + sub_inspector_bg->set_bg_color(dark_color_1.lerp(si_base_color, 0.08)); + sub_inspector_bg->set_border_width_all(2 * EDSCALE); sub_inspector_bg->set_border_color(si_base_color * Color(0.7, 0.7, 0.7, 0.8)); - sub_inspector_bg->set_draw_center(true); + sub_inspector_bg->set_default_margin(SIDE_LEFT, 4 * EDSCALE); + sub_inspector_bg->set_default_margin(SIDE_RIGHT, 4 * EDSCALE); + sub_inspector_bg->set_default_margin(SIDE_BOTTOM, 4 * EDSCALE); + sub_inspector_bg->set_default_margin(SIDE_TOP, 4 * EDSCALE); + sub_inspector_bg->set_corner_radius(CORNER_TOP_LEFT, 0); + sub_inspector_bg->set_corner_radius(CORNER_TOP_RIGHT, 0); theme->set_stylebox("sub_inspector_bg" + itos(i), "Editor", sub_inspector_bg); - Ref<StyleBoxFlat> bg_color; - bg_color.instantiate(); - bg_color->set_bg_color(si_base_color * Color(0.7, 0.7, 0.7, 0.8)); - bg_color->set_border_width_all(0); - - Ref<StyleBoxFlat> bg_color_selected; - bg_color_selected.instantiate(); - bg_color_selected->set_border_width_all(0); - bg_color_selected->set_bg_color(si_base_color * Color(0.8, 0.8, 0.8, 0.8)); + // EditorProperty background while it has a sub-inspector open. + Ref<StyleBoxFlat> bg_color = make_flat_stylebox(si_base_color * Color(0.7, 0.7, 0.7, 0.8), 0, 0, 0, 0, corner_radius); + bg_color->set_anti_aliased(false); + bg_color->set_corner_radius(CORNER_BOTTOM_LEFT, 0); + bg_color->set_corner_radius(CORNER_BOTTOM_RIGHT, 0); theme->set_stylebox("sub_inspector_property_bg" + itos(i), "Editor", bg_color); - theme->set_stylebox("sub_inspector_property_bg_selected" + itos(i), "Editor", bg_color_selected); } theme->set_color("sub_inspector_property_color", "Editor", dark_theme ? Color(1, 1, 1, 1) : Color(0, 0, 0, 1)); - theme->set_constant("sub_inspector_font_offset", "Editor", 4 * EDSCALE); // EditorSpinSlider. theme->set_color("label_color", "EditorSpinSlider", font_color); theme->set_color("read_only_label_color", "EditorSpinSlider", font_readonly_color); + Ref<StyleBoxFlat> editor_spin_label_bg = style_default->duplicate(); + editor_spin_label_bg->set_bg_color(dark_color_3); + editor_spin_label_bg->set_border_width_all(0); + theme->set_stylebox("label_bg", "EditorSpinSlider", editor_spin_label_bg); + + // EditorProperty Ref<StyleBoxFlat> style_property_bg = style_default->duplicate(); style_property_bg->set_bg_color(highlight_color); style_property_bg->set_border_width_all(0); + Ref<StyleBoxFlat> style_property_child_bg = style_default->duplicate(); + style_property_child_bg->set_bg_color(dark_color_2); + style_property_child_bg->set_border_width_all(0); + theme->set_constant("font_offset", "EditorProperty", 8 * EDSCALE); theme->set_stylebox("bg_selected", "EditorProperty", style_property_bg); theme->set_stylebox("bg", "EditorProperty", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty))); + theme->set_stylebox("child_bg", "EditorProperty", style_property_child_bg); theme->set_constant("v_separation", "EditorProperty", (extra_spacing + default_margin_size) * EDSCALE); theme->set_color("warning_color", "EditorProperty", warning_color); theme->set_color("property_color", "EditorProperty", property_color); @@ -974,6 +1040,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { style_property_group_note->set_bg_color(property_group_note_color); theme->set_stylebox("bg_group_note", "EditorProperty", style_property_group_note); + // EditorInspectorSection Color inspector_section_color = font_color.lerp(Color(0.5, 0.5, 0.5), 0.35); theme->set_color("font_color", "EditorInspectorSection", inspector_section_color); @@ -1076,11 +1143,11 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_color("prop_subsection", "Editor", prop_subsection_color); theme->set_color("drop_position_color", "Tree", accent_color); + // EditorInspectorCategory Ref<StyleBoxFlat> category_bg = style_default->duplicate(); - // Make Trees easier to distinguish from other controls by using a darker background color. category_bg->set_bg_color(prop_category_color); category_bg->set_border_color(prop_category_color); - theme->set_stylebox("prop_category_style", "Editor", category_bg); + theme->set_stylebox("bg", "EditorInspectorCategory", category_bg); // ItemList Ref<StyleBoxFlat> style_itemlist_bg = style_default->duplicate(); @@ -1152,14 +1219,16 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { style_content_panel->set_border_color(dark_color_2); theme->set_stylebox("panel", "TabContainer", style_content_panel); - // These styleboxes can be used on tabs against the base color background (e.g. nested tabs). + // TabContainerOdd can be used on tabs against the base color background (e.g. nested tabs). + theme->set_type_variation("TabContainerOdd", "TabContainer"); + Ref<StyleBoxFlat> style_tab_selected_odd = style_tab_selected->duplicate(); style_tab_selected_odd->set_bg_color(disabled_bg_color); - theme->set_stylebox("tab_selected_odd", "TabContainer", style_tab_selected_odd); + theme->set_stylebox("tab_selected", "TabContainerOdd", style_tab_selected_odd); Ref<StyleBoxFlat> style_content_panel_odd = style_content_panel->duplicate(); style_content_panel_odd->set_bg_color(disabled_bg_color); - theme->set_stylebox("panel_odd", "TabContainer", style_content_panel_odd); + theme->set_stylebox("panel", "TabContainerOdd", style_content_panel_odd); // This stylebox is used in 3d and 2d viewports (no borders). Ref<StyleBoxFlat> style_content_panel_vp = style_content_panel->duplicate(); @@ -1215,7 +1284,6 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_stylebox("focus", "LineEdit", style_widget_focus); theme->set_stylebox("read_only", "LineEdit", style_line_edit_disabled); theme->set_icon("clear", "LineEdit", theme->get_icon(SNAME("GuiClose"), SNAME("EditorIcons"))); - theme->set_color("read_only", "LineEdit", font_disabled_color); theme->set_color("font_color", "LineEdit", font_color); theme->set_color("font_selected_color", "LineEdit", mono_color); theme->set_color("font_uneditable_color", "LineEdit", font_readonly_color); @@ -1239,20 +1307,6 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_color("selection_color", "TextEdit", selection_color); theme->set_constant("line_spacing", "TextEdit", 4 * EDSCALE); - // CodeEdit - theme->set_font("font", "CodeEdit", theme->get_font(SNAME("source"), SNAME("EditorFonts"))); - theme->set_font_size("font_size", "CodeEdit", theme->get_font_size(SNAME("source_size"), SNAME("EditorFonts"))); - theme->set_stylebox("normal", "CodeEdit", style_widget); - theme->set_stylebox("focus", "CodeEdit", style_widget_hover); - theme->set_stylebox("read_only", "CodeEdit", style_widget_disabled); - theme->set_icon("tab", "CodeEdit", theme->get_icon(SNAME("GuiTab"), SNAME("EditorIcons"))); - theme->set_icon("space", "CodeEdit", theme->get_icon(SNAME("GuiSpace"), SNAME("EditorIcons"))); - theme->set_icon("folded", "CodeEdit", theme->get_icon(SNAME("GuiTreeArrowRight"), SNAME("EditorIcons"))); - theme->set_icon("can_fold", "CodeEdit", theme->get_icon(SNAME("GuiTreeArrowDown"), SNAME("EditorIcons"))); - theme->set_icon("executing_line", "CodeEdit", theme->get_icon(SNAME("MainPlay"), SNAME("EditorIcons"))); - theme->set_icon("breakpoint", "CodeEdit", theme->get_icon(SNAME("Breakpoint"), SNAME("EditorIcons"))); - theme->set_constant("line_spacing", "CodeEdit", EDITOR_GET("text_editor/appearance/whitespace/line_spacing")); - theme->set_icon("grabber", "VSplitContainer", theme->get_icon(SNAME("GuiVsplitter"), SNAME("EditorIcons"))); theme->set_icon("grabber", "HSplitContainer", theme->get_icon(SNAME("GuiHsplitter"), SNAME("EditorIcons"))); @@ -1276,6 +1330,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_constant("h_separation", "VFlowContainer", default_margin_size * EDSCALE); theme->set_constant("v_separation", "VFlowContainer", default_margin_size * EDSCALE); + // Custom theme type for MarginContainer with 4px margins. + theme->set_type_variation("MarginContainer4px", "MarginContainer"); + theme->set_constant("margin_left", "MarginContainer4px", 4 * EDSCALE); + theme->set_constant("margin_top", "MarginContainer4px", 4 * EDSCALE); + theme->set_constant("margin_right", "MarginContainer4px", 4 * EDSCALE); + theme->set_constant("margin_bottom", "MarginContainer4px", 4 * EDSCALE); + // Window // Prevent corner artifacts between window title and body. @@ -1403,7 +1464,9 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_color("font_pressed_color", "LinkButton", accent_color); theme->set_color("font_disabled_color", "LinkButton", font_disabled_color); - // TooltipPanel + // TooltipPanel + TooltipLabel + // TooltipPanel is also used for custom tooltips, while TooltipLabel + // is only relevant for default tooltips. Ref<StyleBoxFlat> style_tooltip = style_popup->duplicate(); style_tooltip->set_shadow_size(0); style_tooltip->set_default_margin(SIDE_LEFT, default_margin_size * EDSCALE * 0.5); @@ -1413,12 +1476,23 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { style_tooltip->set_bg_color(dark_color_3 * Color(0.8, 0.8, 0.8, 0.9)); style_tooltip->set_border_width_all(0); theme->set_color("font_color", "TooltipLabel", font_hover_color); - theme->set_color("font_color_shadow", "TooltipLabel", Color(0, 0, 0, 0)); + theme->set_color("font_shadow_color", "TooltipLabel", Color(0, 0, 0, 0)); theme->set_stylebox("panel", "TooltipPanel", style_tooltip); // PopupPanel theme->set_stylebox("panel", "PopupPanel", style_popup); + Ref<StyleBoxFlat> control_editor_popup_style = style_popup->duplicate(); + control_editor_popup_style->set_shadow_size(0); + control_editor_popup_style->set_default_margin(SIDE_LEFT, default_margin_size * EDSCALE); + control_editor_popup_style->set_default_margin(SIDE_TOP, default_margin_size * EDSCALE); + control_editor_popup_style->set_default_margin(SIDE_RIGHT, default_margin_size * EDSCALE); + control_editor_popup_style->set_default_margin(SIDE_BOTTOM, default_margin_size * EDSCALE); + control_editor_popup_style->set_border_width_all(0); + + theme->set_stylebox("panel", "ControlEditorPopupButton", control_editor_popup_style); + theme->set_type_variation("ControlEditorPopupButton", "PopupPanel"); + // SpinBox theme->set_icon("updown", "SpinBox", theme->get_icon(SNAME("GuiSpinboxUpdown"), SNAME("EditorIcons"))); theme->set_icon("updown_disabled", "SpinBox", theme->get_icon(SNAME("GuiSpinboxUpdownDisabled"), SNAME("EditorIcons"))); @@ -1446,8 +1520,6 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_icon("snap", "GraphEdit", theme->get_icon(SNAME("SnapGrid"), SNAME("EditorIcons"))); theme->set_icon("minimap", "GraphEdit", theme->get_icon(SNAME("GridMinimap"), SNAME("EditorIcons"))); theme->set_icon("layout", "GraphEdit", theme->get_icon(SNAME("GridLayout"), SNAME("EditorIcons"))); - theme->set_constant("bezier_len_pos", "GraphEdit", 80 * EDSCALE); - theme->set_constant("bezier_len_neg", "GraphEdit", 160 * EDSCALE); // GraphEditMinimap Ref<StyleBoxFlat> style_minimap_bg = make_flat_stylebox(dark_color_1, 0, 0, 0, 0); @@ -1484,6 +1556,9 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { const int gn_margin_side = 2; const int gn_margin_bottom = 2; + // StateMachine + const int sm_margin_side = 10; + Color graphnode_bg = dark_color_3; if (!dark_theme) { graphnode_bg = prop_section_color; @@ -1510,10 +1585,10 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { graphsbposition->set_border_color(error_color); graphsbposition->set_shadow_color(error_color * Color(1.0, 1.0, 1.0, 0.2)); Ref<StyleBoxEmpty> graphsbslot = make_empty_stylebox(12, 0, 12, 0); - Ref<StyleBoxFlat> smgraphsb = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.7), gn_margin_side, 24, gn_margin_side, gn_margin_bottom, corner_width); + Ref<StyleBoxFlat> smgraphsb = make_flat_stylebox(dark_color_3 * Color(1, 1, 1, 0.7), sm_margin_side, 24, sm_margin_side, gn_margin_bottom, corner_width); smgraphsb->set_border_width_all(border_width); smgraphsb->set_border_color(graphnode_bg); - Ref<StyleBoxFlat> smgraphsbselected = make_flat_stylebox(graphnode_bg * Color(1, 1, 1, 0.9), gn_margin_side, 24, gn_margin_side, gn_margin_bottom, corner_width); + Ref<StyleBoxFlat> smgraphsbselected = make_flat_stylebox(graphnode_bg * Color(1, 1, 1, 0.9), sm_margin_side, 24, sm_margin_side, gn_margin_bottom, corner_width); smgraphsbselected->set_border_width_all(2 * EDSCALE + border_width); smgraphsbselected->set_border_color(Color(accent_color.r, accent_color.g, accent_color.b, 0.9)); smgraphsbselected->set_shadow_size(8 * EDSCALE); @@ -1586,7 +1661,6 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { // ColorPresetButton Ref<StyleBoxFlat> preset_sb = make_flat_stylebox(Color(1, 1, 1), 2, 2, 2, 2, 2); - preset_sb->set_anti_aliased(false); theme->set_stylebox("preset_fg", "ColorPresetButton", preset_sb); theme->set_icon("preset_bg", "ColorPresetButton", theme->get_icon(SNAME("GuiMiniCheckerboard"), SNAME("EditorIcons"))); theme->set_icon("overbright_indicator", "ColorPresetButton", theme->get_icon(SNAME("OverbrightIndicator"), SNAME("EditorIcons"))); @@ -1617,7 +1691,14 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { theme->set_stylebox("preview_picker_label", "ThemeEditor", theme_preview_picker_label_sb); // Dictionary editor add item. - theme->set_stylebox("DictionaryAddItem", "EditorStyles", make_flat_stylebox(prop_subsection_color, 4, 4, 4, 4, corner_radius)); + // Expand to the left and right by 4px to compensate for the dictionary editor margins. + Ref<StyleBoxFlat> style_dictionary_add_item = make_flat_stylebox(prop_subsection_color, 0, 4, 0, 4, corner_radius); + style_dictionary_add_item->set_expand_margin_size(SIDE_LEFT, 4 * EDSCALE); + style_dictionary_add_item->set_expand_margin_size(SIDE_RIGHT, 4 * EDSCALE); + theme->set_stylebox("DictionaryAddItem", "EditorStyles", style_dictionary_add_item); + + Ref<StyleBoxEmpty> vshader_label_style = make_empty_stylebox(2, 1, 2, 1); + theme->set_stylebox("label_style", "VShaderEditor", vshader_label_style); // adaptive script theme constants // for comments and elements with lower relevance @@ -1626,19 +1707,16 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { const float mono_value = mono_color.r; const Color alpha1 = Color(mono_value, mono_value, mono_value, 0.07); const Color alpha2 = Color(mono_value, mono_value, mono_value, 0.14); - const Color alpha3 = Color(mono_value, mono_value, mono_value, 0.7); - - // editor main color - const Color main_color = dark_theme ? Color(0.34, 0.7, 1.0) : Color(0.02, 0.5, 1.0); + const Color alpha3 = Color(mono_value, mono_value, mono_value, 0.27); - const Color symbol_color = Color(0.34, 0.57, 1.0).lerp(mono_color, dark_theme ? 0.5 : 0.3); - const Color keyword_color = Color(1.0, 0.44, 0.52); - const Color control_flow_keyword_color = dark_theme ? Color(1.0, 0.55, 0.8) : Color(0.8, 0.4, 0.6); - const Color basetype_color = dark_theme ? Color(0.26, 1.0, 0.76) : Color(0.0, 0.76, 0.38); - const Color type_color = basetype_color.lerp(mono_color, dark_theme ? 0.4 : 0.3); - const Color usertype_color = basetype_color.lerp(mono_color, dark_theme ? 0.7 : 0.5); - const Color comment_color = dim_color; - const Color string_color = (dark_theme ? Color(1.0, 0.85, 0.26) : Color(1.0, 0.82, 0.09)).lerp(mono_color, dark_theme ? 0.5 : 0.3); + const Color symbol_color = dark_theme ? Color(0.67, 0.79, 1) : Color(0, 0, 0.61); + const Color keyword_color = dark_theme ? Color(1.0, 0.44, 0.52) : Color(0.9, 0.135, 0.51); + const Color control_flow_keyword_color = dark_theme ? Color(1.0, 0.55, 0.8) : Color(0.743, 0.12, 0.8); + const Color base_type_color = dark_theme ? Color(0.26, 1.0, 0.76) : Color(0, 0.6, 0.2); + const Color engine_type_color = dark_theme ? Color(0.56, 1, 0.86) : Color(0.11, 0.55, 0.4); + const Color user_type_color = dark_theme ? Color(0.78, 1, 0.93) : Color(0.18, 0.45, 0.4); + const Color comment_color = dark_theme ? dim_color : Color(0.08, 0.08, 0.08, 0.5); + const Color string_color = dark_theme ? Color(1, 0.93, 0.63) : Color(0.6, 0.42, 0); // Use the brightest background color on a light theme (which generally uses a negative contrast rate). const Color te_background_color = dark_theme ? background_color : dark_color_3; @@ -1647,27 +1725,28 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { const Color completion_existing_color = alpha2; // Same opacity as the scroll grabber editor icon. const Color completion_scroll_color = Color(mono_value, mono_value, mono_value, 0.29); + const Color completion_scroll_hovered_color = Color(mono_value, mono_value, mono_value, 0.4); const Color completion_font_color = font_color; const Color text_color = font_color; const Color line_number_color = dim_color; - const Color safe_line_number_color = dim_color * Color(1, 1.2, 1, 1.5); + const Color safe_line_number_color = dark_theme ? (dim_color * Color(1, 1.2, 1, 1.5)) : Color(0, 0.4, 0, 0.75); const Color caret_color = mono_color; const Color caret_background_color = mono_color.inverted(); const Color text_selected_color = dark_color_3; - const Color brace_mismatch_color = error_color; + const Color brace_mismatch_color = dark_theme ? error_color : Color(1, 0.08, 0, 1); const Color current_line_color = alpha1; const Color line_length_guideline_color = dark_theme ? base_color : background_color; const Color word_highlighted_color = alpha1; - const Color number_color = basetype_color.lerp(mono_color, dark_theme ? 0.5 : 0.3); - const Color function_color = main_color; - const Color member_variable_color = main_color.lerp(mono_color, 0.6); + const Color number_color = dark_theme ? Color(0.63, 1, 0.88) : Color(0, 0.55, 0.28, 1); + const Color function_color = dark_theme ? Color(0.34, 0.7, 1.0) : Color(0, 0.225, 0.9, 1); + const Color member_variable_color = dark_theme ? Color(0.34, 0.7, 1.0).lerp(mono_color, 0.6) : Color(0, 0.4, 0.68, 1); const Color mark_color = Color(error_color.r, error_color.g, error_color.b, 0.3); const Color bookmark_color = Color(0.08, 0.49, 0.98); - const Color breakpoint_color = error_color; + const Color breakpoint_color = dark_theme ? error_color : Color(1, 0.27, 0.2, 1); const Color executing_line_color = Color(0.98, 0.89, 0.27); const Color code_folding_color = alpha3; const Color search_result_color = alpha1; - const Color search_result_border_color = Color(0.41, 0.61, 0.91, 0.38); + const Color search_result_border_color = dark_theme ? Color(0.41, 0.61, 0.91, 0.38) : Color(0, 0.4, 1, 0.38); EditorSettings *setting = EditorSettings::get_singleton(); String text_editor_color_theme = setting->get("text_editor/theme/color_theme"); @@ -1675,9 +1754,9 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { setting->set_initial_value("text_editor/theme/highlighting/symbol_color", symbol_color, true); setting->set_initial_value("text_editor/theme/highlighting/keyword_color", keyword_color, true); setting->set_initial_value("text_editor/theme/highlighting/control_flow_keyword_color", control_flow_keyword_color, true); - setting->set_initial_value("text_editor/theme/highlighting/base_type_color", basetype_color, true); - setting->set_initial_value("text_editor/theme/highlighting/engine_type_color", type_color, true); - setting->set_initial_value("text_editor/theme/highlighting/user_type_color", usertype_color, true); + setting->set_initial_value("text_editor/theme/highlighting/base_type_color", base_type_color, true); + setting->set_initial_value("text_editor/theme/highlighting/engine_type_color", engine_type_color, true); + setting->set_initial_value("text_editor/theme/highlighting/user_type_color", user_type_color, true); setting->set_initial_value("text_editor/theme/highlighting/comment_color", comment_color, true); setting->set_initial_value("text_editor/theme/highlighting/string_color", string_color, true); setting->set_initial_value("text_editor/theme/highlighting/background_color", te_background_color, true); @@ -1685,6 +1764,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { setting->set_initial_value("text_editor/theme/highlighting/completion_selected_color", completion_selected_color, true); setting->set_initial_value("text_editor/theme/highlighting/completion_existing_color", completion_existing_color, true); setting->set_initial_value("text_editor/theme/highlighting/completion_scroll_color", completion_scroll_color, true); + setting->set_initial_value("text_editor/theme/highlighting/completion_scroll_hovered_color", completion_scroll_hovered_color, true); setting->set_initial_value("text_editor/theme/highlighting/completion_font_color", completion_font_color, true); setting->set_initial_value("text_editor/theme/highlighting/text_color", text_color, true); setting->set_initial_value("text_editor/theme/highlighting/line_number_color", line_number_color, true); @@ -1712,11 +1792,29 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { } // Now theme is loaded, apply it to CodeEdit. - theme->set_color("background_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/background_color")); + theme->set_font("font", "CodeEdit", theme->get_font(SNAME("source"), SNAME("EditorFonts"))); + theme->set_font_size("font_size", "CodeEdit", theme->get_font_size(SNAME("source_size"), SNAME("EditorFonts"))); + + Ref<StyleBoxFlat> code_edit_stylebox = make_flat_stylebox(EDITOR_GET("text_editor/theme/highlighting/background_color"), widget_default_margin.x, widget_default_margin.y, widget_default_margin.x, widget_default_margin.y, corner_radius); + theme->set_stylebox("normal", "CodeEdit", code_edit_stylebox); + theme->set_stylebox("read_only", "CodeEdit", code_edit_stylebox); + theme->set_stylebox("focus", "CodeEdit", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty))); + + theme->set_icon("tab", "CodeEdit", theme->get_icon(SNAME("GuiTab"), SNAME("EditorIcons"))); + theme->set_icon("space", "CodeEdit", theme->get_icon(SNAME("GuiSpace"), SNAME("EditorIcons"))); + theme->set_icon("folded", "CodeEdit", theme->get_icon(SNAME("CodeFoldedRightArrow"), SNAME("EditorIcons"))); + theme->set_icon("can_fold", "CodeEdit", theme->get_icon(SNAME("CodeFoldDownArrow"), SNAME("EditorIcons"))); + theme->set_icon("executing_line", "CodeEdit", theme->get_icon(SNAME("TextEditorPlay"), SNAME("EditorIcons"))); + theme->set_icon("breakpoint", "CodeEdit", theme->get_icon(SNAME("Breakpoint"), SNAME("EditorIcons"))); + + theme->set_constant("line_spacing", "CodeEdit", EDITOR_GET("text_editor/appearance/whitespace/line_spacing")); + + theme->set_color("background_color", "CodeEdit", Color(0, 0, 0, 0)); theme->set_color("completion_background_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/completion_background_color")); theme->set_color("completion_selected_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/completion_selected_color")); theme->set_color("completion_existing_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/completion_existing_color")); theme->set_color("completion_scroll_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/completion_scroll_color")); + theme->set_color("completion_scroll_hovered_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/completion_scroll_hovered_color")); theme->set_color("completion_font_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/completion_font_color")); theme->set_color("font_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/text_color")); theme->set_color("line_number_color", "CodeEdit", EDITOR_GET("text_editor/theme/highlighting/line_number_color")); |