You've already forked godot
mirror of
https://github.com/godotengine/godot.git
synced 2025-11-08 12:40:44 +00:00
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.
This commit is contained in:
@@ -592,6 +592,9 @@
|
|||||||
<member name="interface/theme/custom_theme" type="String" setter="" getter="">
|
<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.
|
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>
|
||||||
|
<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="">
|
<member name="interface/theme/icon_and_font_color" type="int" setter="" getter="">
|
||||||
The icon and font color scheme to use in the editor.
|
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].
|
- [b]Auto[/b] determines the color scheme to use automatically based on [member interface/theme/base_color].
|
||||||
|
|||||||
@@ -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, "")
|
EDITOR_SETTING(Variant::BOOL, PROPERTY_HINT_NONE, "interface/inspector/show_low_level_opentype_features", false, "")
|
||||||
|
|
||||||
// Theme
|
// 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::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/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::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::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/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::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")
|
EDITOR_SETTING(Variant::INT, PROPERTY_HINT_RANGE, "interface/theme/border_size", 0, "0,2,1")
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ void EditorSettingsDialog::_settings_changed() {
|
|||||||
void EditorSettingsDialog::_settings_property_edited(const String &p_name) {
|
void EditorSettingsDialog::_settings_property_edited(const String &p_name) {
|
||||||
String full_name = inspector->get_full_item_path(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
|
EditorSettings::get_singleton()->set_manually("interface/theme/preset", "Custom"); // set preset to Custom
|
||||||
} else if (full_name.begins_with("text_editor/theme/highlighting")) {
|
} else if (full_name.begins_with("text_editor/theme/highlighting")) {
|
||||||
EditorSettings::get_singleton()->set_manually("text_editor/theme/color_theme", "Custom");
|
EditorSettings::get_singleton()->set_manually("text_editor/theme/color_theme", "Custom");
|
||||||
|
|||||||
@@ -392,6 +392,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
|
|||||||
Color accent_color = EDITOR_GET("interface/theme/accent_color");
|
Color accent_color = EDITOR_GET("interface/theme/accent_color");
|
||||||
Color base_color = EDITOR_GET("interface/theme/base_color");
|
Color base_color = EDITOR_GET("interface/theme/base_color");
|
||||||
float contrast = EDITOR_GET("interface/theme/contrast");
|
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 icon_saturation = EDITOR_GET("interface/theme/icon_saturation");
|
||||||
float relationship_line_opacity = EDITOR_GET("interface/theme/relationship_line_opacity");
|
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_accent_color;
|
||||||
Color preset_base_color;
|
Color preset_base_color;
|
||||||
float preset_contrast = 0;
|
float preset_contrast = 0;
|
||||||
|
bool preset_draw_extra_borders = false;
|
||||||
|
|
||||||
const float default_contrast = 0.3;
|
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);
|
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".
|
// A negative contrast rate looks better for light themes, since it better follows the natural order of UI "elevation".
|
||||||
preset_contrast = -0.08;
|
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
|
} else { // Default
|
||||||
preset_accent_color = Color(0.44, 0.73, 0.98);
|
preset_accent_color = Color(0.44, 0.73, 0.98);
|
||||||
preset_base_color = Color(0.21, 0.24, 0.29);
|
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;
|
accent_color = preset_accent_color;
|
||||||
base_color = preset_base_color;
|
base_color = preset_base_color;
|
||||||
contrast = preset_contrast;
|
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/accent_color", accent_color);
|
||||||
EditorSettings::get_singleton()->set_initial_value("interface/theme/base_color", base_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/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/preset", preset);
|
||||||
EditorSettings::get_singleton()->set_manually("interface/theme/accent_color", accent_color);
|
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/base_color", base_color);
|
||||||
EditorSettings::get_singleton()->set_manually("interface/theme/contrast", contrast);
|
EditorSettings::get_singleton()->set_manually("interface/theme/contrast", contrast);
|
||||||
|
EditorSettings::get_singleton()->set_manually("interface/theme/draw_extra_borders", draw_extra_borders);
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
bool dark_theme = EditorSettings::get_singleton()->is_dark_theme();
|
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_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();
|
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;
|
const Color background_color = dark_color_2;
|
||||||
|
|
||||||
// White (dark theme) or black (light theme), will be used to generate the rest of the colors
|
// 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_hover_color = mono_color.lerp(base_color, 0.125);
|
||||||
const Color font_focus_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_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_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 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);
|
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();
|
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_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_bg_color(dark_color_1);
|
||||||
|
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);
|
style_widget->set_border_color(dark_color_2);
|
||||||
|
}
|
||||||
|
|
||||||
Ref<StyleBoxFlat> style_widget_disabled = style_widget->duplicate();
|
Ref<StyleBoxFlat> style_widget_disabled = style_widget->duplicate();
|
||||||
|
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_border_color(disabled_color);
|
||||||
|
}
|
||||||
style_widget_disabled->set_bg_color(disabled_bg_color);
|
style_widget_disabled->set_bg_color(disabled_bg_color);
|
||||||
|
|
||||||
Ref<StyleBoxFlat> style_widget_focus = style_widget->duplicate();
|
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();
|
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_bg_color(mono_color * Color(1, 1, 1, 0.11));
|
||||||
|
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_widget_hover->set_border_color(mono_color * Color(1, 1, 1, 0.05));
|
||||||
|
}
|
||||||
|
|
||||||
// Style for windows, popups, etc..
|
// Style for windows, popups, etc..
|
||||||
Ref<StyleBoxFlat> style_popup = style_default->duplicate();
|
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);
|
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.
|
// 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_width_all(EDSCALE);
|
||||||
|
if (draw_extra_borders) {
|
||||||
|
style_popup_menu->set_border_color(extra_border_color_2);
|
||||||
|
} else {
|
||||||
style_popup_menu->set_border_color(dark_color_2);
|
style_popup_menu->set_border_color(dark_color_2);
|
||||||
|
}
|
||||||
theme->set_stylebox("panel", "PopupMenu", style_popup_menu);
|
theme->set_stylebox("panel", "PopupMenu", style_popup_menu);
|
||||||
|
|
||||||
Ref<StyleBoxFlat> style_menu_hover = style_widget_hover->duplicate();
|
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();
|
Ref<StyleBoxFlat> style_tree_bg = style_default->duplicate();
|
||||||
// Make Trees easier to distinguish from other controls by using a darker background color.
|
// 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_bg_color(dark_color_1.lerp(dark_color_2, 0.5));
|
||||||
|
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);
|
style_tree_bg->set_border_color(dark_color_3);
|
||||||
|
}
|
||||||
|
|
||||||
theme->set_stylebox("panel", "Tree", style_tree_bg);
|
theme->set_stylebox("panel", "Tree", style_tree_bg);
|
||||||
|
|
||||||
// Tree
|
// Tree
|
||||||
@@ -1206,8 +1244,14 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
|
|||||||
// ItemList
|
// ItemList
|
||||||
Ref<StyleBoxFlat> style_itemlist_bg = style_default->duplicate();
|
Ref<StyleBoxFlat> style_itemlist_bg = style_default->duplicate();
|
||||||
style_itemlist_bg->set_bg_color(dark_color_1);
|
style_itemlist_bg->set_bg_color(dark_color_1);
|
||||||
|
|
||||||
|
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_width_all(border_width);
|
||||||
style_itemlist_bg->set_border_color(dark_color_3);
|
style_itemlist_bg->set_border_color(dark_color_3);
|
||||||
|
}
|
||||||
|
|
||||||
Ref<StyleBoxFlat> style_itemlist_cursor = style_default->duplicate();
|
Ref<StyleBoxFlat> style_itemlist_cursor = style_default->duplicate();
|
||||||
style_itemlist_cursor->set_draw_center(false);
|
style_itemlist_cursor->set_draw_center(false);
|
||||||
@@ -1325,13 +1369,20 @@ 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,
|
// The original style_widget style has an extra 1 pixel offset that makes LineEdits not align with Buttons,
|
||||||
// so this compensates for that.
|
// so this compensates for that.
|
||||||
style_line_edit->set_default_margin(SIDE_TOP, style_line_edit->get_default_margin(SIDE_TOP) - 1 * EDSCALE);
|
style_line_edit->set_default_margin(SIDE_TOP, style_line_edit->get_default_margin(SIDE_TOP) - 1 * EDSCALE);
|
||||||
|
|
||||||
|
// 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
|
// Add a bottom line to make LineEdits more visible, especially in sectioned inspectors
|
||||||
// such as the Project Settings.
|
// such as the Project Settings.
|
||||||
style_line_edit->set_border_width(SIDE_BOTTOM, Math::round(2 * EDSCALE));
|
style_line_edit->set_border_width(SIDE_BOTTOM, Math::round(2 * EDSCALE));
|
||||||
style_line_edit->set_border_color(dark_color_2);
|
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);
|
|
||||||
|
|
||||||
Ref<StyleBoxFlat> style_line_edit_disabled = style_line_edit->duplicate();
|
Ref<StyleBoxFlat> style_line_edit_disabled = style_line_edit->duplicate();
|
||||||
style_line_edit_disabled->set_border_color(disabled_color);
|
style_line_edit_disabled->set_border_color(disabled_color);
|
||||||
|
|||||||
Reference in New Issue
Block a user