summaryrefslogtreecommitdiff
path: root/editor/editor_themes.cpp
diff options
context:
space:
mode:
Diffstat (limited to 'editor/editor_themes.cpp')
-rw-r--r--editor/editor_themes.cpp141
1 files changed, 90 insertions, 51 deletions
diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp
index ff38b4b650..0c7c2c6cc3 100644
--- a/editor/editor_themes.cpp
+++ b/editor/editor_themes.cpp
@@ -108,16 +108,17 @@ void editor_register_and_generate_icons(Ref<Theme> p_theme, bool p_dark_theme =
#ifdef SVG_ENABLED
Dictionary dark_icon_color_dictionary;
if (!p_dark_theme) {
- //convert color: FROM TO
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#e0e0e0", "#4f4f4f"); // common icon color
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#ffffff", "#000000"); // white
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#b4b4b4", "#000000"); // script darker color
-
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#cea4f1", "#bb6dff"); // animation
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#fc9c9c", "#ff5f5f"); // spatial
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#a5b7f3", "#6d90ff"); // 2d
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#708cea", "#0843ff"); // 2d dark
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#a5efac", "#29d739"); // control
+ // convert color: FROM TO
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#e0e0e0", "#5a5a5a"); // common icon color
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#ffffff", "#414141"); // white
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#b4b4b4", "#363636"); // script darker color
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#f9f9f9", "#606060"); // scrollbar grabber highlight color
+
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#cea4f1", "#a85de9"); // animation
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#fc9c9c", "#cd3838"); // spatial
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#a5b7f3", "#3d64dd"); // 2d
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#708cea", "#1a3eac"); // 2d dark
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#a5efac", "#2fa139"); // control
// rainbow
ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#ff7070", "#ff2929"); // red
@@ -140,7 +141,18 @@ void editor_register_and_generate_icons(Ref<Theme> p_theme, bool p_dark_theme =
ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#84ffb1", "#00db50"); // add (green)
ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#84c2ff", "#5caeff"); // selection (blue)
- ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#ea686c", "#e3383d"); // key xform (red)
+ // Animation editor tracks
+ // The property track icon color is set by the common icon color
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#ea9568", "#bd5e2c"); // 3D Transform track
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#66f376", "#16a827"); // Call Method track
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#5792f6", "#236be6"); // Bezier Curve track
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#eae668", "#9f9722"); // Audio Playback track
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#b76ef0", "#9853ce"); // Animation Playback track
+
+ // TileSet editor icons
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#fce844", "#aa8d24"); // New Single Tile
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#4490fc", "#0350bd"); // New Autotile
+ ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#c9cfd4", "#828f9b"); // New Atlas
ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#69ecbd", "#25e3a0"); // VS variant
ADD_CONVERT_COLOR(dark_icon_color_dictionary, "#8da6f0", "#6d8eeb"); // VS bool
@@ -191,6 +203,7 @@ void editor_register_and_generate_icons(Ref<Theme> p_theme, bool p_dark_theme =
exceptions.push_back("StatusSuccess");
exceptions.push_back("StatusWarning");
exceptions.push_back("NodeWarning");
+ exceptions.push_back("OverbrightIndicator");
ImageLoaderSVG::set_convert_colors(&dark_icon_color_dictionary);
@@ -257,44 +270,44 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
// Please, use alphabet order if you've added new theme here(After "Default" and "Custom")
if (preset == "Default") {
- preset_accent_color = Color::html("#699ce8");
- preset_base_color = Color::html("#323b4f");
+ preset_accent_color = Color(0.41, 0.61, 0.91);
+ preset_base_color = Color(0.2, 0.23, 0.31);
preset_contrast = default_contrast;
} else if (preset == "Custom") {
accent_color = EDITOR_GET("interface/theme/accent_color");
base_color = EDITOR_GET("interface/theme/base_color");
contrast = EDITOR_GET("interface/theme/contrast");
} else if (preset == "Alien") {
- preset_accent_color = Color::html("#1bfe99");
- preset_base_color = Color::html("#2f373f");
+ preset_accent_color = Color(0.11, 1.0, 0.6);
+ preset_base_color = Color(0.18, 0.22, 0.25);
preset_contrast = 0.25;
} else if (preset == "Arc") {
- preset_accent_color = Color::html("#5294e2");
- preset_base_color = Color::html("#383c4a");
+ preset_accent_color = Color(0.32, 0.58, 0.89);
+ preset_base_color = Color(0.22, 0.24, 0.29);
preset_contrast = 0.25;
} else if (preset == "Godot 2") {
- preset_accent_color = Color::html("#86ace2");
- preset_base_color = Color::html("#3C3A44");
+ preset_accent_color = Color(0.53, 0.67, 0.89);
+ preset_base_color = Color(0.24, 0.23, 0.27);
preset_contrast = 0.25;
} else if (preset == "Grey") {
- preset_accent_color = Color::html("#b8e4ff");
- preset_base_color = Color::html("#3d3d3d");
+ preset_accent_color = Color(0.72, 0.89, 1.0);
+ preset_base_color = Color(0.24, 0.24, 0.24);
preset_contrast = 0.2;
} else if (preset == "Light") {
- preset_accent_color = Color::html("#2070ff");
- preset_base_color = Color::html("#ffffff");
+ preset_accent_color = Color(0.13, 0.44, 1.0);
+ preset_base_color = Color(1, 1, 1);
preset_contrast = 0.08;
} else if (preset == "Solarized (Dark)") {
- preset_accent_color = Color::html("#268bd2");
- preset_base_color = Color::html("#073642");
+ preset_accent_color = Color(0.15, 0.55, 0.82);
+ preset_base_color = Color(0.03, 0.21, 0.26);
preset_contrast = 0.23;
} else if (preset == "Solarized (Light)") {
- preset_accent_color = Color::html("#268bd2");
- preset_base_color = Color::html("#fdf6e3");
+ preset_accent_color = Color(0.15, 0.55, 0.82);
+ preset_base_color = Color(0.99, 0.96, 0.89);
preset_contrast = 0.06;
} else { // Default
- preset_accent_color = Color::html("#699ce8");
- preset_base_color = Color::html("#323b4f");
+ preset_accent_color = Color(0.41, 0.61, 0.91);
+ preset_base_color = Color(0.2, 0.23, 0.31);
preset_contrast = default_contrast;
}
@@ -333,6 +346,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
const Color color_disabled = mono_color.inverted().linear_interpolate(base_color, 0.7);
const Color color_disabled_bg = mono_color.inverted().linear_interpolate(base_color, 0.9);
+ Color icon_color_hover = Color(1, 1, 1) * (dark_theme ? 1.15 : 1.45);
+ icon_color_hover.a = 1.0;
+ // 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_color_pressed = accent_color * (dark_theme ? 1.15 : 3.5);
+ icon_color_pressed.a = 1.0;
+
const Color separator_color = Color(mono_color.r, mono_color.g, mono_color.b, 0.1);
const Color highlight_color = Color(mono_color.r, mono_color.g, mono_color.b, 0.2);
@@ -345,6 +365,12 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("dark_color_3", "Editor", dark_color_3);
theme->set_color("contrast_color_1", "Editor", contrast_color_1);
theme->set_color("contrast_color_2", "Editor", contrast_color_2);
+ theme->set_color("box_selection_fill_color", "Editor", accent_color * Color(1, 1, 1, 0.3));
+ theme->set_color("box_selection_stroke_color", "Editor", accent_color * Color(1, 1, 1, 0.8));
+
+ theme->set_color("axis_x_color", "Editor", Color(0.96, 0.20, 0.32));
+ theme->set_color("axis_y_color", "Editor", Color(0.53, 0.84, 0.01));
+ theme->set_color("axis_z_color", "Editor", Color(0.16, 0.55, 0.96));
theme->set_color("font_color", "Editor", font_color);
theme->set_color("highlighted_font_color", "Editor", font_color_hl);
@@ -557,9 +583,8 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("font_color_hover", "Button", font_color_hl);
theme->set_color("font_color_pressed", "Button", accent_color);
theme->set_color("font_color_disabled", "Button", font_color_disabled);
- theme->set_color("icon_color_hover", "Button", font_color_hl);
- // make icon color value bigger because icon image is not complete white
- theme->set_color("icon_color_pressed", "Button", Color(accent_color.r * 1.15, accent_color.g * 1.15, accent_color.b * 1.15, accent_color.a));
+ theme->set_color("icon_color_hover", "Button", icon_color_hover);
+ theme->set_color("icon_color_pressed", "Button", icon_color_pressed);
// OptionButton
theme->set_stylebox("normal", "OptionButton", style_widget);
@@ -572,7 +597,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("font_color_hover", "OptionButton", font_color_hl);
theme->set_color("font_color_pressed", "OptionButton", accent_color);
theme->set_color("font_color_disabled", "OptionButton", font_color_disabled);
- theme->set_color("icon_color_hover", "OptionButton", font_color_hl);
+ theme->set_color("icon_color_hover", "OptionButton", icon_color_hover);
theme->set_icon("arrow", "OptionButton", theme->get_icon("GuiOptionArrow", "EditorIcons"));
theme->set_constant("arrow_margin", "OptionButton", default_margin_size * EDSCALE);
theme->set_constant("modulate_arrow", "OptionButton", true);
@@ -593,7 +618,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("font_color_hover", "CheckButton", font_color_hl);
theme->set_color("font_color_pressed", "CheckButton", accent_color);
theme->set_color("font_color_disabled", "CheckButton", font_color_disabled);
- theme->set_color("icon_color_hover", "CheckButton", font_color_hl);
+ theme->set_color("icon_color_hover", "CheckButton", icon_color_hover);
theme->set_constant("hseparation", "CheckButton", 4 * EDSCALE);
theme->set_constant("check_vadjust", "CheckButton", 0 * EDSCALE);
@@ -618,7 +643,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("font_color_hover", "CheckBox", font_color_hl);
theme->set_color("font_color_pressed", "CheckBox", accent_color);
theme->set_color("font_color_disabled", "CheckBox", font_color_disabled);
- theme->set_color("icon_color_hover", "CheckBox", font_color_hl);
+ theme->set_color("icon_color_hover", "CheckBox", icon_color_hover);
theme->set_constant("hseparation", "CheckBox", 4 * EDSCALE);
theme->set_constant("check_vadjust", "CheckBox", 0 * EDSCALE);
@@ -665,12 +690,10 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
// Tree
theme->set_icon("checked", "Tree", theme->get_icon("GuiChecked", "EditorIcons"));
theme->set_icon("unchecked", "Tree", theme->get_icon("GuiUnchecked", "EditorIcons"));
- theme->set_icon("arrow_up", "Tree", theme->get_icon("GuiTreeArrowUp", "EditorIcons"));
theme->set_icon("arrow", "Tree", theme->get_icon("GuiTreeArrowDown", "EditorIcons"));
theme->set_icon("arrow_collapsed", "Tree", theme->get_icon("GuiTreeArrowRight", "EditorIcons"));
theme->set_icon("updown", "Tree", theme->get_icon("GuiTreeUpdown", "EditorIcons"));
theme->set_icon("select_arrow", "Tree", theme->get_icon("GuiDropdown", "EditorIcons"));
- theme->set_icon("select_option", "Tree", theme->get_icon("GuiTreeOption", "EditorIcons"));
theme->set_stylebox("bg_focus", "Tree", style_focus);
theme->set_stylebox("custom_button", "Tree", make_empty_stylebox());
theme->set_stylebox("custom_button_pressed", "Tree", make_empty_stylebox());
@@ -684,7 +707,6 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("drop_position_color", "Tree", accent_color);
theme->set_constant("vseparation", "Tree", (extra_spacing + default_margin_size) * EDSCALE);
theme->set_constant("hseparation", "Tree", (extra_spacing + default_margin_size) * EDSCALE);
- theme->set_constant("guide_width", "Tree", border_width);
theme->set_constant("item_margin", "Tree", 3 * default_margin_size * EDSCALE);
theme->set_constant("button_margin", "Tree", default_margin_size * EDSCALE);
theme->set_constant("draw_relationship_lines", "Tree", relationship_line_opacity >= 0.01);
@@ -697,6 +719,11 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
style_tree_btn->set_border_width_all(0);
theme->set_stylebox("button_pressed", "Tree", style_tree_btn);
+ Ref<StyleBoxFlat> style_tree_hover = style_default->duplicate();
+ style_tree_hover->set_bg_color(highlight_color * Color(1, 1, 1, 0.4));
+ style_tree_hover->set_border_width_all(0);
+ theme->set_stylebox("hover", "Tree", style_tree_hover);
+
Ref<StyleBoxFlat> style_tree_focus = style_default->duplicate();
style_tree_focus->set_bg_color(highlight_color);
style_tree_focus->set_border_width_all(0);
@@ -763,7 +790,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("font_color_fg", "Tabs", font_color);
theme->set_color("font_color_bg", "Tabs", font_color_disabled);
theme->set_icon("menu", "TabContainer", theme->get_icon("GuiTabMenu", "EditorIcons"));
- theme->set_icon("menu_hl", "TabContainer", theme->get_icon("GuiTabMenu", "EditorIcons"));
+ theme->set_icon("menu_highlight", "TabContainer", theme->get_icon("GuiTabMenuHl", "EditorIcons"));
theme->set_stylebox("SceneTabFG", "EditorStyles", style_tab_selected);
theme->set_stylebox("SceneTabBG", "EditorStyles", style_tab_unselected);
theme->set_icon("close", "Tabs", theme->get_icon("GuiClose", "EditorIcons"));
@@ -773,10 +800,10 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_icon("decrement", "TabContainer", theme->get_icon("GuiScrollArrowLeft", "EditorIcons"));
theme->set_icon("increment", "Tabs", theme->get_icon("GuiScrollArrowRight", "EditorIcons"));
theme->set_icon("decrement", "Tabs", theme->get_icon("GuiScrollArrowLeft", "EditorIcons"));
- theme->set_icon("increment_highlight", "Tabs", theme->get_icon("GuiScrollArrowRight", "EditorIcons"));
- theme->set_icon("decrement_highlight", "Tabs", theme->get_icon("GuiScrollArrowLeft", "EditorIcons"));
- theme->set_icon("increment_highlight", "TabContainer", theme->get_icon("GuiScrollArrowRight", "EditorIcons"));
- theme->set_icon("decrement_highlight", "TabContainer", theme->get_icon("GuiScrollArrowLeft", "EditorIcons"));
+ theme->set_icon("increment_highlight", "Tabs", theme->get_icon("GuiScrollArrowRightHl", "EditorIcons"));
+ theme->set_icon("decrement_highlight", "Tabs", theme->get_icon("GuiScrollArrowLeftHl", "EditorIcons"));
+ theme->set_icon("increment_highlight", "TabContainer", theme->get_icon("GuiScrollArrowRightHl", "EditorIcons"));
+ theme->set_icon("decrement_highlight", "TabContainer", theme->get_icon("GuiScrollArrowLeftHl", "EditorIcons"));
theme->set_constant("hseparation", "Tabs", 4 * EDSCALE);
// Content of each tab
@@ -975,8 +1002,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
// GraphEdit
theme->set_stylebox("bg", "GraphEdit", style_tree_bg);
- theme->set_color("grid_major", "GraphEdit", Color(1.0, 1.0, 1.0, 0.15));
- theme->set_color("grid_minor", "GraphEdit", Color(1.0, 1.0, 1.0, 0.07));
+ if (dark_theme) {
+ theme->set_color("grid_major", "GraphEdit", Color(1.0, 1.0, 1.0, 0.15));
+ theme->set_color("grid_minor", "GraphEdit", Color(1.0, 1.0, 1.0, 0.07));
+ } else {
+ theme->set_color("grid_major", "GraphEdit", Color(0.0, 0.0, 0.0, 0.15));
+ theme->set_color("grid_minor", "GraphEdit", Color(0.0, 0.0, 0.0, 0.07));
+ }
theme->set_color("activity", "GraphEdit", accent_color);
theme->set_icon("minus", "GraphEdit", theme->get_icon("ZoomLess", "EditorIcons"));
theme->set_icon("more", "GraphEdit", theme->get_icon("ZoomMore", "EditorIcons"));
@@ -1041,6 +1073,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("title_color", "GraphNode", default_node_color);
default_node_color.a = 0.7;
theme->set_color("close_color", "GraphNode", default_node_color);
+ theme->set_color("resizer_color", "GraphNode", default_node_color);
theme->set_constant("port_offset", "GraphNode", 14 * EDSCALE);
theme->set_constant("title_h_offset", "GraphNode", -16 * EDSCALE);
@@ -1058,6 +1091,9 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
// FileDialog
theme->set_icon("folder", "FileDialog", theme->get_icon("Folder", "EditorIcons"));
+ // Use a different color for folder icons to make them easier to distinguish from files.
+ // On a light theme, the icon will be dark, so we need to lighten it before blending it with the accent color.
+ theme->set_color("folder_icon_modulate", "FileDialog", (dark_theme ? Color(1, 1, 1) : Color(4.25, 4.25, 4.25)).linear_interpolate(accent_color, 0.7));
theme->set_color("files_disabled", "FileDialog", font_color_disabled);
// color picker
@@ -1069,6 +1105,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_icon("screen_picker", "ColorPicker", theme->get_icon("ColorPick", "EditorIcons"));
theme->set_icon("add_preset", "ColorPicker", theme->get_icon("Add", "EditorIcons"));
theme->set_icon("preset_bg", "ColorPicker", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
+ theme->set_icon("overbright_indicator", "ColorPicker", theme->get_icon("OverbrightIndicator", "EditorIcons"));
theme->set_icon("bg", "ColorPickerButton", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
@@ -1088,14 +1125,15 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
const Color alpha3 = Color(mono_value, mono_value, mono_value, 0.7);
// editor main color
- const Color main_color = Color::html(dark_theme ? "#57b3ff" : "#0480ff");
+ const Color main_color = dark_theme ? Color(0.34, 0.7, 1.0) : Color(0.02, 0.5, 1.0);
- const Color symbol_color = Color::html("#5792ff").linear_interpolate(mono_color, dark_theme ? 0.5 : 0.3);
- const Color keyword_color = Color::html("#ff7185");
- const Color basetype_color = Color::html(dark_theme ? "#42ffc2" : "#00c161");
- const Color type_color = basetype_color.linear_interpolate(mono_color, dark_theme ? 0.7 : 0.5);
+ const Color symbol_color = Color(0.34, 0.57, 1.0).linear_interpolate(mono_color, dark_theme ? 0.5 : 0.3);
+ const Color keyword_color = Color(1.0, 0.44, 0.52);
+ 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.linear_interpolate(mono_color, dark_theme ? 0.4 : 0.3);
+ const Color usertype_color = basetype_color.linear_interpolate(mono_color, dark_theme ? 0.7 : 0.5);
const Color comment_color = dim_color;
- const Color string_color = Color::html(dark_theme ? "#ffd942" : "#ffd118").linear_interpolate(mono_color, dark_theme ? 0.5 : 0.3);
+ const Color string_color = (dark_theme ? Color(1.0, 0.85, 0.26) : Color(1.0, 0.82, 0.09)).linear_interpolate(mono_color, dark_theme ? 0.5 : 0.3);
const Color te_background_color = dark_theme ? background_color : base_color;
const Color completion_background_color = dark_theme ? base_color : background_color;
@@ -1132,6 +1170,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
setting->set_initial_value("text_editor/highlighting/keyword_color", keyword_color, true);
setting->set_initial_value("text_editor/highlighting/base_type_color", basetype_color, true);
setting->set_initial_value("text_editor/highlighting/engine_type_color", type_color, true);
+ setting->set_initial_value("text_editor/highlighting/user_type_color", usertype_color, true);
setting->set_initial_value("text_editor/highlighting/comment_color", comment_color, true);
setting->set_initial_value("text_editor/highlighting/string_color", string_color, true);
setting->set_initial_value("text_editor/highlighting/background_color", te_background_color, true);
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-17 06:07:26 +0000