Add a new vector-based default editor theme

[Calinou]

A new, vector-based theme for the editor is required for good-looking hiDPI support. It should probably be drawn using Inkscape and be exportable to PNG with a script, just like the current icons.

Related issue: UI Concept for Godot

[toger5]

@djrm what exactly do you mean by margin? I think there are also a couple of positions which are a little odd. Too close to the border especially when making it borderless. Maybe we should make screenshots, draw on them what we would like to be changed and than split the work.

[djrm]

@toger5 yeah that what i mean by margins, and yes we should make some screenshots and then show what we want to change.

[SirPigeonz]

+1

[ghost]

Holy crap! If this is the design that Godot 3 will have, it's going to look like the most modern game engine on the market. The free market at that :-) Please don't say this is just playing around cause you might send me to tears.

[ghost]

It is looking great! I really dig flat design. :) Definitely better than those other engines.. :D But I also agree with toger5 that it might be better to darken a little input fields which are now just a floating line (search fields, address field in filesystem, ...). It doesn't have to be much but little contrast might help to reduce missclicks.

[toger5]

I would like to try some rounded corner ones. I really have fallen in love with the UI Concept. It just has a great balance, and just works really well as a ui style. I also like blender a lot and I think the number input in blender is one of the best i've ever tried (with the horizontal sliding for increasing/decreasing and the rounded style).

[djrm]

@toger5 i've actually made some test with rounded buttons, but im not convinced yet

now i have some concerns about them, first of all, since there are buttons with different height, rounded buttons dont look perfectly rounded in some cases, they dont look bad but its not like in the concept, now i thats other thing i would like to discuss, @toger5 i know you like the UI Concept but it is not a perfect fit for the engine, as you can see the concept is perfect for its idealistic use case, for example big buttons are not good for the engine (wasted space) and it simplifies the ui a lot (which may be a good thing) but unfortunately some engine menus are very complex, so i would suggest to take some elements from the ui concept but without making an exact copy of it. Also another reason why the editor does not look very good is because its weird metrics, the font rendering (the UI concept screenshot is a HiDPI one) and the great amount of data that needs to be handled in some menus, currently im working to improve some of those topics but it is proving to be a really big and annoying task (because of the workflow to change the ui, and the very nature of the toolkit itself), so i know that you are in love with the UI Concept but im not willing to implement it, im open to reasonable suggestions, but "because thats how it is in the UI Concept" is not a reasonable one, maybe i can create a PR and then people can comment on that and then we can iterate later on.

Currently im not convinced with my own theme but there are certain things that i like, and also im still working on it so things can be rough in the screenshots.

[reduz]

Dont like rounded much either.. i think it was better before too

On Apr 4, 2017 2:37 PM, "Daniel Ramirez" notifications@github.com wrote:

@toger5 https://github.com/toger5 i've actually made some test with rounded buttons, but im not convinced yet [image: screenshot from 2017-04-04 09-25-37] https://cloud.githubusercontent.com/assets/1103897/24667812/86910612-1919-11e7-8109-fafe07398527.png [image: screenshot from 2017-04-04 09-26-11] https://cloud.githubusercontent.com/assets/1103897/24667817/8a6cf6f6-1919-11e7-9be6-ac67b9978d03.png

now i have some concerns about them, first of all, since there are buttons with different height, rounded buttons dont look perfectly rounded in some cases, they dont look bad but its not like in the concept, now i thats other thing i would like to discuss, @toger5 https://github.com/toger5 i know you like the UI Concept but it is not a perfect fit for the engine, as you can see the concept is perfect for its idealistic use case, for example big buttons are not good for the engine (wasted space) and it simplifies the ui a lot (which may be a good thing) but unfortunately some engine menus are very complex, so i would suggest to take some elements from the ui concept but without making an exact copy of it. Also another reason why the editor does not look very good is because its weird metrics, the font rendering (the UI concept screenshot is a HiDPI one) and the great amount of data that needs to be handled in some menus, currently im working to improve some of those topics but it is proving to be a really big and annoying task (because of the workflow to change the ui, and the very nature of the toolkit itself), so i know that you are in love with the UI Concept but im not willing to implement it, im open to reasonable suggestions, but "because thats how it is in the UI Concept" is not a reasonable one, maybe i can create a PR and then people can comment on that and then we can iterate later on.

Currently im not convinced with my own theme but there are certain things that i like, and also im still working on it so things can be rough in the screenshots.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/7294#issuecomment-291575521, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z2_8EulxUfY5Sa17KikXpv97iL4tGks5rsn_egaJpZM4LMKXr .

[toger5]

@djrm really good statement. I aree that the ui concept shouldnt be just copied without good reason. I also sterted to do some minor ui adjustments and it is rally tidius since im not that familiar with the codebase. and just copying the ui concept might not be the bes approch. In addition i think im focusing on the visuals too much. :) and of course bigger -> less ui lements might look better but doesnt improove usability.

About the rounded corners: I think they look good in general. although I dont like them that much on buttons. maybe would use them in places where we have inputs. textfields, number inputs, color fields, paths... About the differnt height problem (which actually makes rounded corners look weird) is ther a chance to implement that efficient with shaders? Since its only a visual addition (and reduz doesnt like it !! ;) ) its definitly low priority. @djrm I really like that you changed to icons for the [ 2d 3d script ] panel. Overall the theme is coming along very well. A huge thanks for all the effort you put into the engines look. Especially when taking into consideration that you also did all the new icons. (didnt even than you for that yet)

[reduz]

@djrm I think current trends are against rounded corners, currently rounded corners feel kind of old. If you check Windows, Android, and all other modern UIs, trends seem to be going towads mostly square corners but with some strong colors here and there. IMO this looks best:

and this:

https://cloud.githubusercontent.com/assets/6152134/24617960/c60297c2-1895-11e7-8eca-4d19dbf83d44.png

[erodozer]

The left aligned tabs and darker theme definitely looks more appealing in my eyes, and kind of makes me think of Defold's dark editor, as well as Atom/VS Code. I don't mind rounded vs flat, but if tabs are going to be left or right aligned at least keep them flush with the side of the pane.

[ghost]

I agree with @reduz for sure. That looks like a beautiful, sleek and modern user interface that I could look at for hours. No rounded ftw :)

[SirPigeonz]

It's true that rounded corners are going away in current trends.

[cart]

I am a huge fan of the new theme. The flatness is a huge step up and the new colors are fantastic. I only have one comment/suggestion:

There are WAY too many widgets using saturated colors at the same time. Specifically: the animation dropdown , AnimationPlayer button, the search boxes, the loc / rot / scl / key buttons.

Looking at the screen I have no clue where to direct my focus because there are so many widgets demanding my attention at the same time.

Here is a quick comparison of the original mockup's use of color to the current implementation:

Original:

Current:

Save that level of saturation for selected/focused things.

[cart]

Contrast analysis (Created by bumping up the contrast to max in gimp then removing white. I also removed the viewport content):

Original Mockup (EDIT: I just realized I didn't use the same method for this one ... its fixed now!):

Current Godot 3.0:

Godot 2.0:

[djrm]

After updating my ancient godot version and solving all the conflicts, i've made some progress with the theme.

I know about the weird tab

[akien-mga]

Wow. Let's get this merged already :)

[volzhs]

LOVE IT ! :heart_eyes:

[cart]

Agreed! I love the new shade of blue for input items. It contrasts less with the background color and brings down the perceived urgency of the widget. The subtle curves on the input box underlines were also a nice touch. ❤️

[SirPigeonz]

merge <3

[ndee85]

This really looks super sleek! Love this theme! Looking forward to it being merged!

[bojidar-bg]

Looks cool, tho the font used for the "db" numbers is a bit strange to me..

Maybe the underlines of the text inputs should be a bit grayer-ish when not focused?

[TeddyDD]

I'm not big fan of new LineEdit controls. They are a bit heavy with this blue colour and rounded corners. IMHO there is too much blue everywhere - it's pretty distracting. Maybe only active controls (on hover, clicked) should have blue border? Beside this new theme looks fantastic :)

[ndee85]

btw. how does the default 3d viewport look like? I really didn't like the green grid ^^

[TeddyDD]

@ndee85

[eon-s]

The bright (in contrast) blue lines and borders looks like all are focused controls.

The rest is good, also tested captures with some colorblind filters and everything stays visible and distinguishable.

[toger5]

@djrm damn, you introduced some really nice looking stuff. Its getting better. I thint the text intput looks really cool with the blue line but i agree that the line only should be there when the input is fucused. Otherwise it gets too much attention compared to other inputs. Although you made them really suddle i dont like the slightly rounded corners for te docks enough to make up for the issue with the small gap on the tabs for the main center dock. I also think the docks look much better without the border. Just some opinios. Ill also do a mock with the changes im thinking about so its easier to understand.

[toger5]

I changed a couple of minor things: position of buttons in docks, removed borders for docks (left right), removed color for input fields (I really like them they are asking for too much attentions so I would prefer them as the active stylebox), got rid of the green color to make the editor itself even more calm (keep in mind it's a screenshot without any content: node tree, scene, code, inspector/properties... so it should be really saddle since the content should get focus (coloured node icons...))

@djrm I love the 3 dots instead of the arrow on the top right of the docks!

I also would make the blue color brighter I think.

@djrm I love the 3 dots instead of the arrow on the top right of the docks!

The other background was to distracting and made it hard to compare the two... I also would make the blue color brighter I think.

[djrm]

@toger5 i think the changes you've made makes the theme look more conventional and serious, the problem with the lineEdits you've proposed is that it is harder to distinguish between enabled and disabled inputs, also i like the green highlight instead of the blue and the borders for the docks, i know there are things in the editor that looks weird but i think thats a good thing like the bus numbers those things will make the engine look more crazy, different and unique unlike any other engine out there, also the rounded elements make the engine look more friendly (sharp edges are dangerous).

the only think i would probably change is the color for the widgets, will try grey (icon color) instead of blue.

[ghost]

@djrm Did you say that you know some things look weird and the bus numbers help the engine look more crazy? What did I just read? You WANT the engine to look crazy? Those bus numbers look totally off from the rest of the design and squished together. Sharp edges are dangerous? Are you serious..? Yes, on a knife, not in software.

The blue that @toger5 proposes actually offers some continuity as well. The overall theme looks great. Saying that @toger5 made changes that make the theme look conventional and serious is actually a good thing. The way Godot's theme is currently is the reason why conventional and serious is the way to go for 3.0

[reduz]

For 2D and 3D we can make them as icons that show "2D" and "3D", instead of the vectors.. shoukd be clearer

On Apr 10, 2017 2:39 PM, "boogabelly" notifications@github.com wrote:

@djrm https://github.com/djrm Did you say you know things look weird and the bus numbers help the engine look more crazy? What did I just read? You WANT the engine to look crazy? Those bus numbers look totally off from the rest of the design and squished together. Sharp edges are dangerous? Are you serious..? Yes, on a knife, not in software.

The blue that @toger5 https://github.com/toger5 proposes actually offers some continuity as well. The overall theme looks great. Saying that @toger5 https://github.com/toger5 made changes that make the theme look conventional and serious is actually a good thing. The way Godot's theme is currently is the reason why conventional and serious is the way to go for 3.0

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/7294#issuecomment-293023522, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z22wNjUml05FV3FxId98rHDkJrn7bks5rumlTgaJpZM4LMKXr .

[reduz]

Green grid ia because its the Y axis grid.. but does not need to be that color..

On Apr 10, 2017 3:12 PM, "Juan Linietsky" reduzio@gmail.com wrote:

For 2D and 3D we can make them as icons that show "2D" and "3D", instead of the vectors.. shoukd be clearer

On Apr 10, 2017 2:39 PM, "boogabelly" notifications@github.com wrote:

@djrm https://github.com/djrm Did you say you know things look weird and the bus numbers help the engine look more crazy? What did I just read? You WANT the engine to look crazy? Those bus numbers look totally off from the rest of the design and squished together. Sharp edges are dangerous? Are you serious..? Yes, on a knife, not in software.

The blue that @toger5 https://github.com/toger5 proposes actually offers some continuity as well. The overall theme looks great. Saying that @toger5 https://github.com/toger5 made changes that make the theme look conventional and serious is actually a good thing. The way Godot's theme is currently is the reason why conventional and serious is the way to go for 3.0

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/7294#issuecomment-293023522, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z22wNjUml05FV3FxId98rHDkJrn7bks5rumlTgaJpZM4LMKXr .

[ghost]

I'd side with the vectors myself. I can contribute for vectors too, if required. Sharp edges, left-aligned tabs and blue active textbars is what I'd get behind. BTW, is basic theme support to be included in 3.0? Could solve a lot of opinion conflicts here itself. Maybe a JSON/XML theme value system would do it for 3.0?

[toger5]

@kn1ght99 yea theme support is already there. Godot has its own theme file. So saving as json is not necassary. Its a good point you bring up that this allows for personal adaption.

@djrm so you basically dont want to change anything based on my proposals? Which is fine since you definitly put most effort in it. I still was hoping that I could make a little influence since I also did work (probably wont get merged). But I wanted to have some influence, because I have strong reasons. I like the unique touch you added and we should try to keep that wherever possible. BUT some things just are more or less pracrical. In a software where i want to produce things (Games), it is important to have a non distracting ui: This doesnt mean there cant be unique colors or crazy looking things as long as it has a perpus. For example for the 2d 3d ... Buttons its important to know what editor is used, or which edit mode (scale , move ...). But the search bars are not a main action which has to be easy to find and understand when not yet used to the ui so they dont need a lot of additional attention. I coild write thw same for the the green blue discussion: why two colors when they both have the same meaning ( they only say: "look this is important") for the nodes instead multiple colors make a lot of sense becaus of different node types, there is an additional message behind the color which is worth making the ui more distracting. I decided for blue because of the godot logo but using green as the highlight color is also fine. (just not both)

The reason why i really would love to see the borderless design is that this compleatly removes vertical lines in the ui. It seems as if there would be less things going on. In other words: we remove distraction, without loosing functionality and even the overview doesnt increse (which is often a disadvantage of removing lines). Another minor advantage ia that we gain a tiny amount of space... (almost negligible though). I also know that there are some tiny issues that this approach introduces: some buttons are too close to the border. But even fixing the possitions would be worth the effort to give this tiny improovement. So it is not really an opinion based motivation and i think it should be taken into consideration even if it doesnt fit into everybodys personal preferences. Djrm you would make me really happy with forfilling my whishes. But the theme how you have it right now makes me also happy :)

[ghost]

@toger5 Is it possible after merging for you to have your own theme and share it? Or will it be too late to customize the things you're talking about? I really like your approach. I like the stuff @djrm has done, but I think he's more or less designing it for himself now instead of for pure functionality, purpose and form. Once he said he's adding things cause it will make Godot look crazy, that's when he lost me. It's important to take design cues from elsewhere, see what works and then improve on them, not just add stuff cause of personal wants like weird db bus numbers or no sharp corners cause they're dangerous.

[ghost]

I believe adding these to the theme options won't do any harm and effectively remove all the conflicts here. @djrm and @reduz can decide what UI Godot 3.0 shall officially ship with but theming options are kind of becoming necessary now, otherwise different versions of Godot might also sprout up according to the UI the person prefers.

[toger5]

@boogabelly the minor changes i proposd are easy to do and also able to implement as optional theme without recompiling. Although im jot sure if djrm uses different colored icons or modulate color. Modulate color would make it a little less flexible for a alternative theme. But the changes to the border needs some clean up in terms of spacing which is not possible to do without recompiling. Its still doable but would look missaligned in some places. (thats another reason why i would prefer to make and adapt the theme to no border. Because using a theme with borders on the editor adapted for no borders looks better than a no border theme in the current editor adapted for borders.)

[ghost]

@toger5 Aren't you the one who kinda pushed the UI theme change that @alelepd created in the beginning? I think your ideas should be heard more, and the borderless idea concept is definitely great. I think between you and @djrm you guys have done a good job making Godot look like an even more professional game engine with a sleek design. It's headed in the right direction. I just hope your input isn't being tossed to the side.

[djrm]

@toger5 first of all, i dont want to cause conflicts here, if you check the issue history you can see that when too many people have an opinion about something i try to do the best i can to match what they suggest with what i have in mind, now obviously it is impossible to please every, but as you probably know i do read what people comments, but the opinion of the users (many real godot users), im currently even thinking about what i can do to fix the most commented issue (too bright buttons and inputs). is what matters to me, for example now you and i have some personal preference over some insignifcant things, but it is just you and me if many people are on your side then i would gladly change it, second your previous suggestions have helped to shape the current theme so you essentially have participated in it, if you want to make the commit, honestly i dont care, im not doing this for fame or anything and you should not be either.

About the distraction argument, i do understand that focusing user atention to certain areas is important however that is applicable in case where there is little content, and it is trivial what is promary and what is not, in the case of the engine you are navigating through the different docks and panels very often, so i dont see what is primary action and what is not, for example if you are in the animation editor, that is your current context so obviously you have the focus there and the viewport and everything else might be a distraction, i dont want to have some almost imperceptible buttons and inputs, but again thats a preference.

Also as you can see i haven't created a PR, and thats because i want to make sure we create the best theme for godot.

@boogabelly Dont go there trying to cause problems between community members and please read the rest of the thread, you will see that i do consider users input.

[ghost]

@djrm Oh I'm not trying to cause anything. I've said numerous times how great it is that you created such a nice theme. I just remember @toger5 from years ago doing things with the theme that @alelepd created that started all this. It's just the last couple times he mentioned something, you kinda shot his ideas down and gave reasons to why you think they shouldn't be implemented, like making Godot crazy looking compared to other engines.

I like what you've done. Read things I've said. But there's a few things that you've said that shouldn't be overlooked. Keep on doing a good job. I just ask that @toger5 has more input since I've seen him mess with the UI since a long time ago. But then again, I'm no one important here so do what you want.

[djrm]

@boogabelly, first of all i think that every godot user is important, but the ones that have a "better opinion" are those that are willing to do something about it, it is so easy to say that things are ugly or doesnt fit, but i see too little people that suggest actual improvements, like @toger5, thats the reason why we both and the rest of the community are discussing about design decisions (i haven't created a PR yet).

[ghost]

@djrm That's fair enough. I wish I knew enough about the source code to make a contribution. The only things I can suggest are what @toger5 already said. I'm just using Godot to make games, or at least learn it the best I can. So I'm no one when it comes to helping to improve the engine.

It's not that I'm on his side; it's just that I agree with his aesthetic. Nothing personal. You did a lot of good things on this design that made me say "wow" when I first saw it on this page.

[toger5]

@djrm hell no you will do the pr ;). The way I wrote my complain that i didnt manage to bring my work into a state where it is ready to be merged sounds a little desperate ;). ( i can assure you thats not the case) Im more dissappointed by myself that i did so little lately... I guess u already tried the no margin stylebox for the docks or looked ad screenshots. How much work do you think would it take to adapt to move things around so that there always is acceptable spacing?

Another topic: it seems that the property editor is almost not affected by the theme? Are there differnet styleboxes used? I know that the editor is a tree with two columns and coustom fields. But arent the coustom fealds the default ui elements which than also use the styleboxes from the theme? ... Checked the screenshot again. Are they special ones? Seems as if they are not the same than the default number inputs... Does someone has an idea how to modify them. Would look nice to also darken the input fields like it is with text fields. Oh one tiny thing i wanted to mention some time ago: Maybe you could play with the expand arrows of the node tree. Maybe you find sth that fits better with the style of the back/forward arrows.

Maybe you can try to merge the commit with the border changes and your theme (or just do the changes yourself in another branch. Since you also already implemented the left aligned tabs there definitly would be conflicts). If you keep both versions update, it would be easy to decide later which one to use.

[djrm]

@toger5 about the borderless docks and containers, you need to see this

as you can see containers with rounded corners look more consistent with the rest of the interface (they would look better with the correct margins)

what is going to happen with those containers with borderless containers (they will look ugly)

about the tree widgets, i think they are custom buttons or some kind of hack, i will have to work on those things, currenlty they have problems (i dont know if i messed them up).

and yeah i will create new icons for the expand arrows.

i will also try to expose the button and highlight color (green vs blue thing) in the editor settings, in order to end the colors war.

[alelepd]

Hello there! Glad to see such great progress on the UI. Here are my thoughts on some of your ideas and comments.

1. Color scheme The goal with any color scheme is to be coherent, that means, to create a harmony of shades or color tones. The contrasting colors should always be used very carefully, they are supposed to highlight the important actions or selected tools. If too many elements are in contrast, there is no clue to decipher which ones are selected.

Example. If you decide to make a theme using the green as your base color, you need to create a color palette that works with that color. You could use the orange as a contrasting color and the blue as a key helper in the palette.

If we do an analysis of the current theme, you can easily see that the 3d view is off the color scheme because the lines and the background aren't based on the same blue of the interface. This is why I changed the way the 3d view looks in my initial UI concept to be coherent with the overall color scheme, the result is that you have an UI component that blends very well.

2. Visual Hierarchy In this regard, it is good to understand that any design needs to have a visual hierarchy, a structure that establishes which elements are more important than others.

Some elements of the UI, like buttons, are more important than others like labels because a button has interaction and a label doesn't (only displays information). Also, some buttons are important than other buttons. For example, a button to increase a value is less relevant than a button to close or save the project, so the later should be bigger because of its higher position in the visual hierarchy.

The visual hierarchy also involves the understanding of the elements states. Let me give you an example on this with a simple button: A button could have several different states: Normal, Hover, Pressed, Disabled. When a button changes its state, it also changes his position in the visual hierarchy. If is pressed, it means is going to do an action, if is disabled, it means is has no relevance anymore.

A change in the visual hierarchy means a change in the element itself. Most of the times this is accomplished by a change in color, but sometimes it can be a change in form too.

3. Design System & Visual Coherence I often see that you have troubles to make a theme look coherent. This happens because this is actually the most complicated part of any design system, so it is not easy to get done properly.

To make a good design system you need to understand a fundamental part of the system: reusable components. Once you define a set of design rules that guides how your UI components should behave, it should always behave like that.

If some components are similar in their action, then they should look and behave similarly too. A common misconception is to think every single element in the UI needs to stand alone. Thinking like this will only get you bad results (see old UIs of Blender).

Summary

1. Use a coherent color scheme in all the UI elements, not just to some of then.
2. Give more relevance to the elements that require more attention.
3. Define a set of coherent rules that establish how the UI components work, how they are related to each other and how the should behave.
4. Don't do overdesign. Don't design something just because it looks fun or cool.

To consider

• Having bigger buttons can sometimes increase usability! This is a well-known fact in design. Just look how Github does. You just need to learn how and when to increase the size and give higher visual priority in the hierarchy.
• Just making a theme without making fundamental changes on the UI will never result in a complete improvement, in fact, it could be a step backward if you don't make changes in the way some elements behave; you may end up with some sort of Frankenstein.

[ghost]

Woohoo @alelepd if it weren't for you, this UI might not even be happening. Godot is gonna be so much nicer to work with just because it's​ nice on the eyes. @reduz has made it even better with all the new updates to 3.0. Exciting times :-)

[HummusSamurai]

Massive hype!

[djrm]

As i promised here is the version with neutral color buttons, also tweaked some other things.

[SirPigeonz]

It is looking better and better :) Great work!

But man, editor really needs tweaks to margins all over the place :/

[toger5]

@djrm i like the saddle xolors you are using now. But you are right it looks less special. But i think there is still a whole lot going on when a project is loaded and the inspector, nodetree is filled.

1. There is a blurred border in the 3d view when acrive. The blurr is strange for a flat theme. Maybe you could do a really thin green line. Although the green is kind of strong... Or just a grey thin line?

2. What if we dont use rounded corners for the docks and the tab container in there? Than there would be no issue with no borders and it also would fit to the flat overall style? We will run into issues with rounded corners anyways. The left aligned tabs would look better if they are aligned with the container. That would work by removing the borders (expand margins of the docks) or by moving the tabs to the left (dont know how that works tbh) but than we have a little gap between thw container and the tab since the container has a small rounded corner. Removing the borders would be much easier but would result in more fixes needed in terms of margins/positions. When keeping the borders we need to figure out how to move the tabs and fix the gaps. Or keep the offset but thats not an ideal solution in my opinion.

About the margins: We really should make a screenshot where we mark all the missalignments. I wpuld be interested in fiximg them when i have a list where work has to be done.