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.cpp75
1 files changed, 53 insertions, 22 deletions
diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp
index 4eceb09792..42c55681ae 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
@@ -333,6 +345,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 +364,8 @@ 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("font_color", "Editor", font_color);
theme->set_color("highlighted_font_color", "Editor", font_color_hl);
@@ -557,9 +578,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 +592,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 +613,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 +638,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 +685,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 +702,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 +714,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);
@@ -975,8 +997,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 +1068,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 +1086,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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-18 14:29:20 +0000