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.

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

New dark theme and glyph icons #4 #50 #83

Merged
merged 47 commits into from Aug 15, 2018

Conversation

Projects
None yet
7 participants
@0xaryan
Copy link
Contributor

0xaryan commented Aug 8, 2018

Editor

  • Editor currently has a new theme. It's fully dark based on Dark Blend colors #50
  • Window Chrome icons and Xenko logo replaced with glyph versions
  • Chrome is now a little smaller
  • Support for HslColor and conversation methods to Rgb (System.Color)

Dark Editor

Menus

  • Menus redesigned. Theirs margins/paddings are changed.
  • Menus are now fully dark. (#101011)

Dark Menu

Icons

  • A huge number of small png icons and almost all of the icons in the Image Dictionaries replaced with flat responsive icons of visual studio. #4
  • Icons now support Luminosity Transform. It means, they can automatically change color based on the theme of the editor. Currently all the transformation are set to dark.
    I believe that this mechanism can be used for future features of Theming (Support for Light theme as an example)
  • New ImageThemingUtilities class API that changes the luminosity of drawing image.
  • New ThemedSource markup extension that can change source of an icon to another theme on the fly.
    <Image Source="{xk:ThemedSource {StaticResource ImageOpenFolder}, Dark}" />

Icons

Job is not done.

It is obvious that this new skin is not still good enough, but for me, as a student and a newbie to UI and game designing it took only a few days to understand the project and make these changes.
So to the great and professional community of Xenko, please make this engine even better.

Xenko

@Kryptos-FR

This comment has been minimized.

Copy link
Collaborator

Kryptos-FR commented Aug 10, 2018

@0xaryan I am getting a notification every time you push a new commit to that branch. Maybe commit only locally and when everything is ready push it all. Then I will know when to resume the review 😉

Also it will allow you to squash all your intermediary commits into one, which I think @xen2 should do anyway before merging.

@0xaryan

This comment has been minimized.

Copy link
Contributor Author

0xaryan commented Aug 10, 2018

@Kryptos-FR Alright (:

@0xaryan

This comment has been minimized.

Copy link
Contributor Author

0xaryan commented Aug 10, 2018

Besides the previous changes, new changes made to Scene Tabs, Menus, Property Grid title, Footer status bar and some color fixings. I'm not going to make any other changes in this PR, but only fixing review issues.
But there are still changes that can be made (specially in AvalonDock theme) by the community in further developments.

@Kryptos-FR

This comment has been minimized.

Copy link
Collaborator

Kryptos-FR commented Aug 10, 2018

@0xaryan Sure. I think it is good enough at the moment. We can always improve later.

Thanks for the contribution. I'll do another quick review and then I think we can merge.

@Kryptos-FR

This comment has been minimized.

Copy link
Collaborator

Kryptos-FR commented Aug 13, 2018

I see some places were the old gray colors are still used, e.g. the background of combo boxes.

Also I'm wondering if the colors/brushes should be externalized in a separate file to make it easier to have other theme/color. But we can have that discussion later when we actually implement a new theme.

@0xaryan

This comment has been minimized.

Copy link
Contributor Author

0xaryan commented Aug 13, 2018

I see some places were the old gray colors are still used, e.g. the background of combo boxes.

Blend uses a lighter color for background of combo boxes (#212125) in compare to whole IDE. In Xenko it is (#333333) which is 6% lighter than Blend.
I'm making some other changes to combo boxes, scrollbar, ...

Also I'm wondering if the colors/brushes should be externalized in a separate file to make it easier to have other theme/color. But we can have that discussion later when we actually implement a new theme.

Exactly. It makes creating a new theme much easier when you have an integrated theme file or folder. Currently creating a new theme requires changing files in different parts of the projects which is hard to debug and extend.

@0xaryan

This comment has been minimized.

Copy link
Contributor Author

0xaryan commented Aug 13, 2018

I talked with one of the Icons8 supports. They said:

Actually all logos should be free, but it seems that this icon is in other category, that's why it's not shown as free . I will surely pass it to our team to look into! Can you please tell me which size do you need this icon in - I will send them to you . And if you need other logos - sen me the links and sizes, I will send them as well

They sent icons I've requested (Apple, Windows, UWP, Android, Linux and iOS) in SVG format, so we can replace OS icons too.
They have a specific license described here.
All it needs is to set a link to Icons8 in the about dialog of Xenko. Is there any problem about this?

@Kryptos-FR

This comment has been minimized.

Copy link
Collaborator

Kryptos-FR commented Aug 13, 2018

All it needs is to set a link to Icons8 in the about dialog of Xenko. Is there any problem with this?

We have links to the libraries we use in the THIRD PARTY.md document. The document is available here and also from the about dialog through a link. I suppose it complies to their license if we add it there (even though it is one click away).

@Kryptos-FR
Copy link
Collaborator

Kryptos-FR left a comment

Last changes LGTM.

@0xaryan

This comment has been minimized.

Copy link
Contributor Author

0xaryan commented Aug 13, 2018

@Kryptos-FR Ok, I changed those icons.

@Kryptos-FR Kryptos-FR referenced this pull request Aug 13, 2018

Closed

Editor: Theme #50

@Tonedus

This comment has been minimized.

Copy link

Tonedus commented Aug 14, 2018

Version Dark Xenko isn't the most successful from the point of visual perception , too sharp contrast of black color and light colors. My opinion - the ideal option would be a gray color with a light gradient of monochrome icons like Blender 3D, Modo, Atomic Game Engine, Wave Game Engine, Shiva Game Engine, etc. This is the most favorable option for the eyes.

blender264_interface
robobeach2017
sffbzqr
mosque3
makinggameassetsw_modo_scrnsht02

@Tonedus

This comment has been minimized.

Copy link

Tonedus commented Aug 14, 2018

Here is an example of the interface in Amazon Lumberyard. Very well readable and pleasing for the eyes light gray icons with a light gray gradient on the background of a slightly darker gray interface. The interface as you can see consists of two variants of gray color, more dark gray and slightly lighter, this combination looks very nice.
1234

amazon-lumberyard

@0xaryan

This comment has been minimized.

Copy link
Contributor Author

0xaryan commented Aug 14, 2018

@Toriadus Thanks for sharing.

the ideal option would be a gray color with a light gradient of monochrome icons.

I'm not fan of a gray color editor, and I think most people prefer to have a light or dark theme, not something in the middle. Just take a look at the most voted request of Unity3d community feedback, near 13000 votes for a free dark theme.
To me it was the best option to use Dark UI of Blend. As Xenko is a game engine built on .Net and it's API is the most comfortable API for .Net developers, why not an editor like Visual Studio?

Blend

So, tried to transform the gray editor of Xenko from this:
Gray Xenko

To this:
Dark Xenko

I barely saw that someone change clean theme of Visual Studio to something fully different.
But all these ideas and styles that some people like and some people don't can be fixed when a theming system comes to the Xenko.

@Tonedus

This comment has been minimized.

Copy link

Tonedus commented Aug 14, 2018

Thank you for your feedback, my previous reply is my subjective opinion. I got acquainted with your version of the new theme more closer and I can say that your option is much better than the previous one. Color icons look more attractive (without a gradient as before), new icons of light gray color (movement, camera, e.t.c) look more interesting, thanks for the work done, but I still have questions (my opinion).
I got acquainted with the color gamma of the UI of the top ten most popular game engines and none of them didn`t have so much dark color, even the dark theme of Godot is much lighter than this option.

You said that most people prefer to have a light or dark theme, but in fact I gave the example of the popular engines and none of them doesn't own as much a dark color theme as in your version. Once again I repeat that in your version of the dark theme the color gamma is too dark (approaching black) and against the background of light inscriptions creates a very sharp and uncomfortable contrast for the eyes (this is my opinion), I have not seen anything like this in any of the engines. Now a few words about my recommendations and advice:

  • As someone said, icons would not hurt to be grouped by purpose
  • The colored icons that you left, you can also make a light gray
  • It also seems to me that the menu-bars not enough a small chamfer with a glare on the edges, so the menu bars will be seem to stand out from the rest, it can be well traced in the UI amazon-lumberyard
  • Perhaps worth considering the option of barely noticeable light gray border around the icons, similarity to the three-dimensional buttons

Thanks again for your work, I appreciate it.

amazon-lumberyard21

@0xaryan

This comment has been minimized.

Copy link
Contributor Author

0xaryan commented Aug 14, 2018

@Toriadus

You said that most people prefer to have a light or dark theme, but in fact I gave the example of the popular engines and none of them doesn't own as much a dark color theme as in your version.

I didn't mean that the examples you gave are not dark, except the Blender and MODO that are semi-dark, all others are dark. But this is what I'm talking about:

  1. Unity Feedback Editor: Dark skin theme in Free available in options.
  2. How can I change Blender's theme?

In Blender, you can easily change the theme in options. Maybe that's why they are not worried about changing default theme to a darker one.
In Unity, I think it is a part of their business model. Dark theme is only available in the professional edition and this became a revenue stream for unity owners.

As I said before, these are all preferences. I prefer to have a dark UI just like I have in Blend editor, and I know that there are lots of folks out there that agree with me and lots of people who don't.
The only thing that can solve these type of style issues, is to bring more themes into the editor to support more people.

Supporting more theme is not something that can happen anytime soon as it needs a lot of changes and active work, so the best option is to change the editor to something that the most members of the community like.
When I was creating this new theme, I was afraid that the community don't accept it as it is very dark (as you said), so I asked some people as a small statistical people about this new color and they all said that it is OK.

Besides your helpful advices, I have other ideas that could make Xenko editor much cleaner and better, but my time is very limited to implement them.

Anyway, I do not insist on this color theme. If you think that a lighter color is a better choice for Xenko, you are only a PR away.

Thanks again for your work, I appreciate it.

Your welcome @Toriadus (: 🙏

@Tonedus

This comment has been minimized.

Copy link

Tonedus commented Aug 14, 2018

Thanks for the answer, adding themes to options is really a good idea! Is it possible to general overview several options for an UI with different colors gamma and different configurations of the layout of icons? In any case, I respect the opinion of the community and will always listen to it

@xen2

This comment has been minimized.

Copy link
Member

xen2 commented Aug 15, 2018

Besides your helpful advices, I have other ideas that could make Xenko editor much cleaner and better, but my time is very limited to implement them.

@0xaryan If you don't have the time, feel free to open an issue and if it's good, somebody else might take care of it!

@xen2 xen2 merged commit bab1a5f into xenko3d:master Aug 15, 2018

1 check passed

license/cla Contributor License Agreement is signed.
Details
@xen2

This comment has been minimized.

Copy link
Member

xen2 commented Aug 15, 2018

Thanks!

@xen2

This comment has been minimized.

Copy link
Member

xen2 commented Aug 22, 2018

@Kryptos-FR Update: if you want to collaborate on external user PR branches, seems like github allow it automatically by default:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.