Browse Source

Improve script editor's light theme syntax colors for better readability

New colors were hand-picked to have a better contrast rate,
while still following the general coloring of the previous light theme.

This improves the light theme's accessibility, especially in outdoor
environments with direct sunlight.
Hugo Locurcio 3 years ago
parent
commit
0a24d40836
2 changed files with 23 additions and 26 deletions
  1. 18 21
      editor/editor_themes.cpp
  2. 5 5
      modules/gdscript/editor/gdscript_highlighter.cpp

+ 18 - 21
editor/editor_themes.cpp

@@ -1669,17 +1669,14 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	const Color alpha2 = Color(mono_value, mono_value, mono_value, 0.14);
 	const Color alpha2 = Color(mono_value, mono_value, mono_value, 0.14);
 	const Color alpha3 = Color(mono_value, mono_value, mono_value, 0.27);
 	const Color alpha3 = Color(mono_value, mono_value, mono_value, 0.27);
 
 
-	// 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 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).
 	// 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;
 	const Color te_background_color = dark_theme ? background_color : dark_color_3;
@@ -1692,24 +1689,24 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	const Color completion_font_color = font_color;
 	const Color completion_font_color = font_color;
 	const Color text_color = font_color;
 	const Color text_color = font_color;
 	const Color line_number_color = dim_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_color = mono_color;
 	const Color caret_background_color = mono_color.inverted();
 	const Color caret_background_color = mono_color.inverted();
 	const Color text_selected_color = dark_color_3;
 	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 current_line_color = alpha1;
 	const Color line_length_guideline_color = dark_theme ? base_color : background_color;
 	const Color line_length_guideline_color = dark_theme ? base_color : background_color;
 	const Color word_highlighted_color = alpha1;
 	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 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 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 executing_line_color = Color(0.98, 0.89, 0.27);
 	const Color code_folding_color = alpha3;
 	const Color code_folding_color = alpha3;
 	const Color search_result_color = alpha1;
 	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();
 	EditorSettings *setting = EditorSettings::get_singleton();
 	String text_editor_color_theme = setting->get("text_editor/theme/color_theme");
 	String text_editor_color_theme = setting->get("text_editor/theme/color_theme");
@@ -1717,9 +1714,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/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/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/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/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/string_color", string_color, true);
 		setting->set_initial_value("text_editor/theme/highlighting/background_color", te_background_color, true);
 		setting->set_initial_value("text_editor/theme/highlighting/background_color", te_background_color, true);

+ 5 - 5
modules/gdscript/editor/gdscript_highlighter.cpp

@@ -623,11 +623,11 @@ void GDScriptSyntaxHighlighter::_update_cache() {
 		annotation_color = Color(1.0, 0.7, 0.45);
 		annotation_color = Color(1.0, 0.7, 0.45);
 		string_name_color = Color(1.0, 0.66, 0.72);
 		string_name_color = Color(1.0, 0.66, 0.72);
 	} else {
 	} else {
-		function_definition_color = Color(0.0, 0.65, 0.73);
-		node_path_color = Color(0.62, 0.67, 0.39);
-		node_ref_color = Color(0.32, 0.55, 0.29);
-		annotation_color = Color(0.8, 0.5, 0.25);
-		string_name_color = Color(0.9, 0.56, 0.62);
+		function_definition_color = Color(0, 0.6, 0.6);
+		node_path_color = Color(0.18, 0.55, 0);
+		node_ref_color = Color(0.0, 0.5, 0);
+		annotation_color = Color(0.8, 0.37, 0);
+		string_name_color = Color(0.8, 0.46, 0.52);
 	}
 	}
 
 
 	EDITOR_DEF("text_editor/theme/highlighting/gdscript/function_definition_color", function_definition_color);
 	EDITOR_DEF("text_editor/theme/highlighting/gdscript/function_definition_color", function_definition_color);