From f613db0db90a7a2ff5ce96734f3c2427b21f7e5c Mon Sep 17 00:00:00 2001 From: Hugo Locurcio Date: Sat, 29 Jan 2022 00:09:44 +0100 Subject: [PATCH] Add Black (OLED) editor theme preset This preset uses a fully black background to reduce power usage on OLED displays, leading to increased battery life on laptops with OLED displays. This preset is also useful for late night sessions, as OLED displays have a near-infinite contrast ratio. This also adds a Draw Extra Borders editor setting which draws borders around some interactive nodes. This setting is required for good usability of a theme with a fully black background. Visibility of disabled text (including unselected tab names) has been slightly increased for better accessibility, regardless of the editor theme preset in use. --- doc/classes/EditorSettings.xml | 3 ++ editor/editor_settings.cpp | 3 +- editor/editor_settings_dialog.cpp | 2 +- editor/editor_themes.cpp | 75 ++++++++++++++++++++++++++----- 4 files changed, 69 insertions(+), 14 deletions(-) diff --git a/doc/classes/EditorSettings.xml b/doc/classes/EditorSettings.xml index 818dda59bc6..944ad120b60 100644 --- a/doc/classes/EditorSettings.xml +++ b/doc/classes/EditorSettings.xml @@ -592,6 +592,9 @@ The custom theme resource to use for the editor. Must be a Godot theme resource in [code].tres[/code] or [code].res[/code] format. + + If [code]true[/code], draws additional borders around interactive UI elements in the editor. This is automatically enabled when using the [b]Black (OLED)[/b] theme preset, as this theme preset uses a fully black background. + The icon and font color scheme to use in the editor. - [b]Auto[/b] determines the color scheme to use automatically based on [member interface/theme/base_color]. diff --git a/editor/editor_settings.cpp b/editor/editor_settings.cpp index 5bdfd8d3776..e7ba33d7ab5 100644 --- a/editor/editor_settings.cpp +++ b/editor/editor_settings.cpp @@ -452,11 +452,12 @@ void EditorSettings::_load_defaults(Ref p_extra_config) { EDITOR_SETTING(Variant::BOOL, PROPERTY_HINT_NONE, "interface/inspector/show_low_level_opentype_features", false, "") // Theme - EDITOR_SETTING(Variant::STRING, PROPERTY_HINT_ENUM, "interface/theme/preset", "Default", "Default,Breeze Dark,Godot 2,Gray,Light,Solarized (Dark),Solarized (Light),Custom") + EDITOR_SETTING(Variant::STRING, PROPERTY_HINT_ENUM, "interface/theme/preset", "Default", "Default,Breeze Dark,Godot 2,Gray,Light,Solarized (Dark),Solarized (Light),Black (OLED),Custom") EDITOR_SETTING(Variant::INT, PROPERTY_HINT_ENUM, "interface/theme/icon_and_font_color", 0, "Auto,Dark,Light") EDITOR_SETTING(Variant::COLOR, PROPERTY_HINT_NONE, "interface/theme/base_color", Color(0.2, 0.23, 0.31), "") EDITOR_SETTING(Variant::COLOR, PROPERTY_HINT_NONE, "interface/theme/accent_color", Color(0.41, 0.61, 0.91), "") EDITOR_SETTING(Variant::FLOAT, PROPERTY_HINT_RANGE, "interface/theme/contrast", 0.3, "-1,1,0.01") + EDITOR_SETTING(Variant::BOOL, PROPERTY_HINT_NONE, "interface/theme/draw_extra_borders", false, "") EDITOR_SETTING(Variant::FLOAT, PROPERTY_HINT_RANGE, "interface/theme/icon_saturation", 1.0, "0,2,0.01") EDITOR_SETTING(Variant::FLOAT, PROPERTY_HINT_RANGE, "interface/theme/relationship_line_opacity", 0.1, "0.00,1,0.01") EDITOR_SETTING(Variant::INT, PROPERTY_HINT_RANGE, "interface/theme/border_size", 0, "0,2,1") diff --git a/editor/editor_settings_dialog.cpp b/editor/editor_settings_dialog.cpp index db501aac033..1b904b7ccdd 100644 --- a/editor/editor_settings_dialog.cpp +++ b/editor/editor_settings_dialog.cpp @@ -61,7 +61,7 @@ void EditorSettingsDialog::_settings_changed() { void EditorSettingsDialog::_settings_property_edited(const String &p_name) { String full_name = inspector->get_full_item_path(p_name); - if (full_name == "interface/theme/accent_color" || full_name == "interface/theme/base_color" || full_name == "interface/theme/contrast") { + if (full_name == "interface/theme/accent_color" || full_name == "interface/theme/base_color" || full_name == "interface/theme/contrast" || full_name == "interface/theme/draw_extra_borders") { EditorSettings::get_singleton()->set_manually("interface/theme/preset", "Custom"); // set preset to Custom } else if (full_name.begins_with("text_editor/theme/highlighting")) { EditorSettings::get_singleton()->set_manually("text_editor/theme/color_theme", "Custom"); diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp index 1d9e320be1b..f589f0f7147 100644 --- a/editor/editor_themes.cpp +++ b/editor/editor_themes.cpp @@ -392,6 +392,7 @@ Ref create_editor_theme(const Ref p_theme) { Color accent_color = EDITOR_GET("interface/theme/accent_color"); Color base_color = EDITOR_GET("interface/theme/base_color"); float contrast = EDITOR_GET("interface/theme/contrast"); + bool draw_extra_borders = EDITOR_GET("interface/theme/draw_extra_borders"); float icon_saturation = EDITOR_GET("interface/theme/icon_saturation"); float relationship_line_opacity = EDITOR_GET("interface/theme/relationship_line_opacity"); @@ -403,6 +404,7 @@ Ref create_editor_theme(const Ref p_theme) { Color preset_accent_color; Color preset_base_color; float preset_contrast = 0; + bool preset_draw_extra_borders = false; const float default_contrast = 0.3; @@ -439,6 +441,12 @@ Ref create_editor_theme(const Ref p_theme) { preset_base_color = Color(0.89, 0.86, 0.79); // A negative contrast rate looks better for light themes, since it better follows the natural order of UI "elevation". preset_contrast = -0.08; + } else if (preset == "Black (OLED)") { + preset_accent_color = Color(0.45, 0.75, 1.0); + preset_base_color = Color(0, 0, 0); + // The contrast rate value is irrelevant on a fully black theme. + preset_contrast = 0.0; + preset_draw_extra_borders = true; } else { // Default preset_accent_color = Color(0.44, 0.73, 0.98); preset_base_color = Color(0.21, 0.24, 0.29); @@ -449,15 +457,18 @@ Ref create_editor_theme(const Ref p_theme) { accent_color = preset_accent_color; base_color = preset_base_color; contrast = preset_contrast; + draw_extra_borders = preset_draw_extra_borders; EditorSettings::get_singleton()->set_initial_value("interface/theme/accent_color", accent_color); EditorSettings::get_singleton()->set_initial_value("interface/theme/base_color", base_color); EditorSettings::get_singleton()->set_initial_value("interface/theme/contrast", contrast); + EditorSettings::get_singleton()->set_initial_value("interface/theme/draw_extra_borders", draw_extra_borders); } EditorSettings::get_singleton()->set_manually("interface/theme/preset", preset); EditorSettings::get_singleton()->set_manually("interface/theme/accent_color", accent_color); EditorSettings::get_singleton()->set_manually("interface/theme/base_color", base_color); EditorSettings::get_singleton()->set_manually("interface/theme/contrast", contrast); + EditorSettings::get_singleton()->set_manually("interface/theme/draw_extra_borders", draw_extra_borders); // Colors bool dark_theme = EditorSettings::get_singleton()->is_dark_theme(); @@ -476,6 +487,10 @@ Ref create_editor_theme(const Ref p_theme) { const Color dark_color_2 = base_color.lerp(Color(0, 0, 0, 1), contrast * 1.5).clamp(); const Color dark_color_3 = base_color.lerp(Color(0, 0, 0, 1), contrast * 2).clamp(); + // Only used when the Draw Extra Borders editor setting is enabled. + const Color extra_border_color_1 = Color(0.5, 0.5, 0.5); + const Color extra_border_color_2 = dark_theme ? Color(0.3, 0.3, 0.3) : Color(0.7, 0.7, 0.7); + const Color background_color = dark_color_2; // White (dark theme) or black (light theme), will be used to generate the rest of the colors @@ -488,7 +503,7 @@ Ref create_editor_theme(const Ref p_theme) { const Color font_hover_color = mono_color.lerp(base_color, 0.125); const Color font_focus_color = mono_color.lerp(base_color, 0.125); const Color font_hover_pressed_color = font_hover_color.lerp(accent_color, 0.74); - const Color font_disabled_color = Color(mono_color.r, mono_color.g, mono_color.b, 0.3); + const Color font_disabled_color = Color(mono_color.r, mono_color.g, mono_color.b, 0.35); const Color font_readonly_color = Color(mono_color.r, mono_color.g, mono_color.b, 0.65); const Color font_placeholder_color = Color(mono_color.r, mono_color.g, mono_color.b, 0.6); const Color selection_color = accent_color * Color(1, 1, 1, 0.4); @@ -633,10 +648,19 @@ Ref create_editor_theme(const Ref p_theme) { Ref style_widget = style_default->duplicate(); style_widget->set_default_margin_individual(widget_default_margin.x, widget_default_margin.y, widget_default_margin.x, widget_default_margin.y); style_widget->set_bg_color(dark_color_1); - style_widget->set_border_color(dark_color_2); + if (draw_extra_borders) { + style_widget->set_border_width_all(Math::round(EDSCALE)); + style_widget->set_border_color(extra_border_color_1); + } else { + style_widget->set_border_color(dark_color_2); + } Ref style_widget_disabled = style_widget->duplicate(); - style_widget_disabled->set_border_color(disabled_color); + if (draw_extra_borders) { + style_widget_disabled->set_border_color(extra_border_color_2); + } else { + style_widget_disabled->set_border_color(disabled_color); + } style_widget_disabled->set_bg_color(disabled_bg_color); Ref style_widget_focus = style_widget->duplicate(); @@ -649,7 +673,11 @@ Ref create_editor_theme(const Ref p_theme) { Ref style_widget_hover = style_widget->duplicate(); style_widget_hover->set_bg_color(mono_color * Color(1, 1, 1, 0.11)); - style_widget_hover->set_border_color(mono_color * Color(1, 1, 1, 0.05)); + if (draw_extra_borders) { + style_widget_hover->set_border_color(extra_border_color_1); + } else { + style_widget_hover->set_border_color(mono_color * Color(1, 1, 1, 0.05)); + } // Style for windows, popups, etc.. Ref style_popup = style_default->duplicate(); @@ -990,7 +1018,11 @@ Ref create_editor_theme(const Ref p_theme) { style_popup_menu->set_default_margin_individual(EDSCALE, 2 * EDSCALE, EDSCALE, 2 * EDSCALE); // Always display a border for PopupMenus so they can be distinguished from their background. style_popup_menu->set_border_width_all(EDSCALE); - style_popup_menu->set_border_color(dark_color_2); + if (draw_extra_borders) { + style_popup_menu->set_border_color(extra_border_color_2); + } else { + style_popup_menu->set_border_color(dark_color_2); + } theme->set_stylebox("panel", "PopupMenu", style_popup_menu); Ref style_menu_hover = style_widget_hover->duplicate(); @@ -1110,7 +1142,13 @@ Ref create_editor_theme(const Ref p_theme) { Ref style_tree_bg = style_default->duplicate(); // Make Trees easier to distinguish from other controls by using a darker background color. style_tree_bg->set_bg_color(dark_color_1.lerp(dark_color_2, 0.5)); - style_tree_bg->set_border_color(dark_color_3); + if (draw_extra_borders) { + style_tree_bg->set_border_width_all(Math::round(EDSCALE)); + style_tree_bg->set_border_color(extra_border_color_2); + } else { + style_tree_bg->set_border_color(dark_color_3); + } + theme->set_stylebox("panel", "Tree", style_tree_bg); // Tree @@ -1206,8 +1244,14 @@ Ref create_editor_theme(const Ref p_theme) { // ItemList Ref style_itemlist_bg = style_default->duplicate(); style_itemlist_bg->set_bg_color(dark_color_1); - style_itemlist_bg->set_border_width_all(border_width); - style_itemlist_bg->set_border_color(dark_color_3); + + if (draw_extra_borders) { + style_itemlist_bg->set_border_width_all(Math::round(EDSCALE)); + style_itemlist_bg->set_border_color(extra_border_color_2); + } else { + style_itemlist_bg->set_border_width_all(border_width); + style_itemlist_bg->set_border_color(dark_color_3); + } Ref style_itemlist_cursor = style_default->duplicate(); style_itemlist_cursor->set_draw_center(false); @@ -1325,14 +1369,21 @@ Ref create_editor_theme(const Ref p_theme) { // The original style_widget style has an extra 1 pixel offset that makes LineEdits not align with Buttons, // so this compensates for that. style_line_edit->set_default_margin(SIDE_TOP, style_line_edit->get_default_margin(SIDE_TOP) - 1 * EDSCALE); - // Add a bottom line to make LineEdits more visible, especially in sectioned inspectors - // such as the Project Settings. - style_line_edit->set_border_width(SIDE_BOTTOM, Math::round(2 * EDSCALE)); - style_line_edit->set_border_color(dark_color_2); + // Don't round the bottom corner to make the line look sharper. style_tab_selected->set_corner_radius(CORNER_BOTTOM_LEFT, 0); style_tab_selected->set_corner_radius(CORNER_BOTTOM_RIGHT, 0); + if (draw_extra_borders) { + style_line_edit->set_border_width_all(Math::round(EDSCALE)); + style_line_edit->set_border_color(extra_border_color_1); + } else { + // Add a bottom line to make LineEdits more visible, especially in sectioned inspectors + // such as the Project Settings. + style_line_edit->set_border_width(SIDE_BOTTOM, Math::round(2 * EDSCALE)); + style_line_edit->set_border_color(dark_color_2); + } + Ref style_line_edit_disabled = style_line_edit->duplicate(); style_line_edit_disabled->set_border_color(disabled_color); style_line_edit_disabled->set_bg_color(disabled_bg_color);