godotengine/godot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Black (OLED) editor theme preset

Browse Source 
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.
This commit is contained in:
Hugo Locurcio 2022-01-29 00:09:44 +01:00
parent 69e5ad7f09
commit f613db0db9
No known key found for this signature in database
GPG Key ID: 39E8F8BE30B0A49C
4 changed files with 69 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
doc/classes/EditorSettings.xml
View File

@ -592,6 +592,9 @@
<member name="interface/theme/custom_theme" type="String" setter="" getter="">
The custom theme resource to use for the editor. Must be a Godot theme resource in [code].tres[/code] or [code].res[/code] format.
</member>
<member name="interface/theme/draw_extra_borders" type="bool" setter="" getter="">
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.
</member>
<member name="interface/theme/icon_and_font_color" type="int" setter="" getter="">
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].

3
editor/editor_settings.cpp
View File

@ -452,11 +452,12 @@ void EditorSettings::_load_defaults(Ref<ConfigFile> 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")

2
editor/editor_settings_dialog.cpp
View File

@ -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");

75
editor/editor_themes.cpp
View File

@ -392,6 +392,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> 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<Theme> create_editor_theme(const Ref<Theme> 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<Theme> create_editor_theme(const Ref<Theme> 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<Theme> create_editor_theme(const Ref<Theme> 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<Theme> create_editor_theme(const Ref<Theme> 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<Theme> create_editor_theme(const Ref<Theme> 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<Theme> create_editor_theme(const Ref<Theme> p_theme) {
Ref<StyleBoxFlat> 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<StyleBoxFlat> 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<StyleBoxFlat> style_widget_focus = style_widget->duplicate();
@ -649,7 +673,11 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
Ref<StyleBoxFlat> 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<StyleBoxFlat> style_popup = style_default->duplicate();
@ -990,7 +1018,11 @@ Ref<Theme> create_editor_theme(const Ref<Theme> 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<StyleBoxFlat> style_menu_hover = style_widget_hover->duplicate();
@ -1110,7 +1142,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
Ref<StyleBoxFlat> 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<Theme> create_editor_theme(const Ref<Theme> p_theme) {
// ItemList
Ref<StyleBoxFlat> 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<StyleBoxFlat> style_itemlist_cursor = style_default->duplicate();
style_itemlist_cursor->set_draw_center(false);
@ -1325,14 +1369,21 @@ Ref<Theme> create_editor_theme(const Ref<Theme> 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<StyleBoxFlat> 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);