Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Black (OLED) editor theme preset #67871

Merged
merged 1 commit into from
Nov 28, 2022
Merged

Add Black (OLED) editor theme preset #67871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions doc/classes/EditorSettings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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].
Expand Down
3 changes: 2 additions & 1 deletion editor/editor_settings.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down
2 changes: 1 addition & 1 deletion editor/editor_settings_dialog.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
75 changes: 63 additions & 12 deletions editor/editor_themes.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand All @@ -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;

Expand Down Expand Up @@ -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);
Expand All @@ -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();
Expand All @@ -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
Expand All @@ -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);
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down