Improve the editor theme

[Calinou]

The editor theme now makes use of rounded corners and less borders to follow modern visual trends. The corner radius and border width are configurable in the Editor Settings, so you can revert to the old appearance by setting corner radius to 0 and border width to 1.

The default theme's colors were also tweaked to make the blue hue more subtle (similar to the Arc theme, which was removed as a consequence). The Alien theme was replaced by a Breeze Dark theme, which should blend in well with the KDE theme.

The new editor theme will allow distinguishing Godot 4.0 easily from Godot 3.2, even if the version number is not visible on screenshots/videos. This is important for tutorials and the like 🙂

TODO

• Increase contrast (make the main background darker) by reduz's request.
  • In a future PR, increase saturation for icon colors. This will require modifying all the SVGs and tweaking the light theme icon conversion code accordingly.
    • Edit: Done in Increase icon saturation by 30% for all editor icons #48644.
• Make corner radii more consistent across nodes, such as the top of PopupMenus.
  • Consider making LineEdits/TextEdits not use rounded corners to distinguish them more easily from buttons.
• Fix some 2D/3D editor buttons not being marked as flat when they should be (following the ToolButton removal).
• Fix PopupMenu hover styling so the highlight line spans the whole width of the popup.
  • Done by Improved PopupMenu visuals. Removed x-y margin, made it 'padding' instead #45704.
• Improve tab/subtab styling in windows such as the project/editor settings. I'm not sure how to improve it, so ideas are welcome.
  • This can be done by changing the background color of subwindows to be darker. It might not always be a good idea, so we can try that in a future PR.

Preview

Click to view at full resolution.

Note: The screenshots below are outdated and don't reflect the version of the pull request that was merged.

Dark theme

Light theme

[YuriSizov]

There are some weird artifacts due to the new border styling, namely in tabs and window headers:

[Calinou]

There are some weird artifacts due to the new border styling, namely in tabs and window headers:

For the first case, this is due to antialiasing blurring out borders as long as one of the corners has a radius greater than zero. It regressed sometime around 3.2.2 or 3.2.3.

For the second case, this is likely due to me not setting the bottom corner radii of the window title to 0. I'll look into fixing that.

[HungryProton]

I'm all in for an editor theme overhaul, but I think having consistent margins is more important than putting rounded corners everywhere. (Don't get me wrong, I like rounded corners).

One case in particular is in this screenshot, having the highlighted part stuck to the text is quite jarring in my opinion.

It would look better if the hover style took the entire width, without the rounded corners, kind of like this: (ignore the colors)

[Calinou]

One case in particular is in this screenshot, having the highlighted part stuck to the text is quite jarring in my opinion.

It used to look like the second screenshot you posted, but it regressed since the PopupMenu rework was merged. I haven't been able to fix it so far.

[barbaros83]

i think the inspector could also use an update, it sometimes hard to distinguish where an expanded tab starts and ends

[Calinou]

i think the inspector could also use an update, it sometimes hard to distinguish where an expanded tab starts and ends

This is something reduz also mentioned, but I'd prefer to tackle it in a future PR.

Edit: Proposal opened: godotengine/godot-proposals#2230

[EricEzaM]

@HungryProton

It is I, PopupMenu person. How's this?

• removed horizontal margin
• kept vertical margin
• added horizontal padding for items.

(this is using the current 4.0 theme, not the one from this PR)

[HungryProton]

@EricEzaM
Looks a lot better like this in my opinion! (I'm no PopupMenu authority though)

[EricEzaM]

I agree. Much more modern. I will submit a PR with these changes. It is tangentially related to this PR, but it can stand alone in it's own PR too.

[EricEzaM]

Overall on the theme though, I must say I quite dislike the mix of sharp and rounded corners. I think one should be chosen. Sharp edges is by far more common in the editor currently and it looks pretty clean I think.

The rounded edges are just sort of there randomly... on PopupMenu hover highlight (why?), on Tree selection, on the search bar, on the unselected tabs but not on the selected tabs (???). All the inspector widgets are still with sharp edges. Just clashes imo.

I know it's configurable... but I think the default should be putting the best foot forward.

Some parts don't mesh correctly either.

[Calinou]

I made the selected tabs have rounded corners (for consistency with unselected tabs) and fixed the corner bug between single-window mode window titles and bodies:

Edit: I pushed another update that disables StyleBoxFlat antialiasing to work around #35279 and increases tab highlight thickness to 2 pixels:

Edit 2: Removed obsolete Highlight Current Script and Current Script Background Color editor settings. These have been superseded by the built-in theme highlighting a long time ago (around Godot 3.0).

[fabriceci]

I found the rounded selected tab looks like there is a problem, plus the left border stop abruptly. In Blender you have some elements rounded others not, it's hard the keep coherence.

Maybe this PR should be split in multiple little PR step by step (like #45704) , start by steps where there is a consensus (maybe color? decrease the padding? etc.).

[Calinou]

I found the rounded selected tab looks like there is a problem, plus the left border stop abruptly.

I can fix this by making the tabs' top corners non-rounded, let's give it a try.

Edit: Done:

Maybe this PR should be split in multiple little PR step by step (like #45704) , start by steps where there is a consensus (maybe color? decrease the padding? etc.).

Unfortunately, things tend to depend on each other when you do UI design. Therefore, this isn't really possible in a meaningful way. That said, I definitely want to get this PR merged in an acceptable state (rather than a perfect state). Otherwise, we'll never merge it 👀

[fabriceci]

I can fix this by making the tabs' top corners non-rounded, let's give it a try.

@Calinou this is way way much better!

• Still 2 minor remarks

1. The arrows should be aligned (same padding right and same arrow (size?)):

2. The icon of the button should be centered or the button's size reduced.
   

In the subjective area, I had suggestions:

1. The toolbar seems to me more airy/cleaner in the current version than the new one, mainly due to the lack of separators.

2. In the settings panel there is not left padding before the text, I don't know if it's customizable:
   
   

3. In the settings panel, in the treeview, the items are higher than the headers. If again it's customizable, it will be great to decrease de padding up/down, to be able to see more element.

[Calinou]

1. The arrows should be aligned (same padding right and same arrow (size?)):

That issue was already present before the editor theme redesign. I'd prefer tackling stuff like this in a future PR.

2. The icon of the button should be centered or the button's size reduced.

This is a "ghost" dropdown which should be hidden entirely until an OpenGL renderer is implemented in the master branch.

1. The toolbar seems to me more airy/cleaner in the current version than the new one, mainly due to the lack of separators.

Separators will disappear if you set the border width to 0 (which is the default). This is a bug, I'll look into fixing it.

Edit: Fixed. I also fixed the 2D/3D editor tool buttons to be all flat (i.e. without a background).

2. In the settings panel there is not left padding before the text, I don't know if it's customizable:

This change needs to be done in the Tree control, I'd prefer leaving it to a future PR.

[Calinou]

I've added subtle outlines below LineEdits and TextEdits to make them easier to notice and distinguish from OptionButtons:

This is similar to what you can see in Android's Material Design.

[Riteo]

I don't know, the fact that the line is under the rounded rectangle makes it look kind of weird IMO, why not putting it on top of the field?

Edit: I just now noticed how actually they're more like an outline, since they follow the curves of the fields, but for some reason in the editor preferences this doesn't apply, making it look like there's a normal line under them, and that's what I was talking about.

[Riteo]

Here's my opinion:
Usually, one selected tab has its small little space for its content.

This isn't the case for sub-windows though. There, the active background color is, for some reason, the main color, except around the tabs, which creates this kind of ugly square outline:

This could be resolved by making the background color consistent with the main window.
Also, I think that it would look better if the tabs were rounded. I made a little mock-up explaining what I mean:

Also, as I noted earlier, there are some artifacts with text fields inside sub-windows, which don't appen at all in the main window.
Main window:

Sub-window:

I have no idea if these issues are actually only present in sub-windows, but AFAICT it looks like it.

[Calinou]

Changing the background color of subwindows is a good idea; I hadn't thought about it before.

Edit: I just now noticed how actually they're more like an outline, since they follow the curves of the fields, but for some reason in the editor preferences this doesn't apply, making it look like there's a normal line under them, and that's what I was talking about.

This is because I made the bottom corners non-rounded. Otherwise, this kind of line always ends up looking weird.

Also, I think that it would look better if the tabs were rounded. I made a little mock-up explaining what I mean:

See above. There are just as many people disliking rounded tab highlights as people liking them. I can't please everyone 🙂
(And no, I won't add an option for such a small difference.)

I'm neutral about it personally.

[jasperbrooks79]

I'd consider adding, so all icons, are 1 color, to give it more consistent look . . at least, as an option . . . maybe, as toggle, ' monochrome icons ' . . I mean, in node inspector . . :O would give it that ' classic ' application look . . . <3

I love everything I see here, can't wait, Thanks . . 10 / 10 <3

pls. add it soon, so I can tweak it and, make an awe-some theme <3

[YuriSizov]

@jasperbrooks79 You will be able to make icons look monochrome in 4.0. See #45924

[jasperbrooks79]

Ok, a few thoughts . . I like top tabs being rounded, but not sure, about the other stuff . . Tabs make sense, it's even a classic look, hoping one can have them, as customization options, ie. numbers, or 'roundedness' . . . .

Basically, all these things can be ' fixed ', if we could ' set ' the rounded value, for the different parts, so users could ' tweak ', that would give best of both worlds, a new look, and an easy way, to make it ' custom ', for almost all users . . :OO I really like this entire proposal, I hope all these things will be added, as customization options, and when that has been done, the core - team can make some themes, together, after this becomes the ' main theme ' . . With a theme editor, and all these things as options, making it ' just right ', be a breeze <3 <3 . .

ps. Really like the slightly rounded look, around icons :OO again, since some users will want the ' old ' look, some, are different . . it'd be a good idea, if this could be a customization toggle, ie. 1 pixel roundedness, 2 pixel roundedness, or I think, 0 for the old look :OO

All these features, they all feel like an improvement to me, IF they were customization options, 1. it'd be nice to have a new look, for Godot 4, a bit different, polished . . 2. users could set them, to their favorites, assuming any-one, would want to change this . .

To keep it short, Thank you . . . <3 . . .

[Xrayez]

I also think that the accent is too bright, that's the first thing which caught my eye with the new theme, especially with panel/viewport outlines (unless this was already fixed).

[Riteo]

it'd be a good idea, if this could be a customization toggle, ie. 1 pixel roundedness, 2 pixel roundedness, or I think, 0 for the old look :OO

This PR already adds an editor setting for that :)

[Calinou]

I made some changes to prepare for merging:

• Make the active tab highlights less prominent.
• Make Trees have a slightly darker background to make them easier to distinguish from LineEdits/TextEdits.
• Don't use rounded corners for PopupMenu hover highlights since they now fully extend to the PopupMenu's corners.

[Ansraer]

Looking at all the screenshots that have been posted so far I have to say that I definitely prefer the tabs with rounded top corners. imo the rounded corners make it easier to see where one tab ends and the next begins.

Have you ever considered removing the padding around the entire editor?

[aaronfranke]

@Ansraer He did consider it #40287

[projekt2502]

About the Toggle Split Mode button I think better without background for consistency

[akien-mga]

Let's give this a spin and address additional feedback in follow-up issues/PRs once we've gotten used to the changes.

[akien-mga]

Thanks!

[SilencedPerson]

On twitter i saw mockup that removed the outer borders, could we instead get rid of the inner borders to remove bit of visual clutter but keep the visible separation of the information? I also feel like the color separation inside the inspector may be little bit overkill. Here is quick and dirty mockup:

[YuriSizov]

@SilencedPerson If you are talking about the removal of paddings inside of the docks, it was the original idea (by jfons, I think?) which groud take one step further to remove gaps as well. It's a good idea, but it would require to change the actual layout of every dock (so it's not just a theme change), which makes it harder to try as an experiment.

Feel free to open a proposal, I guess. It would be preferable to discuss it there rather than in a closed PR.

I also feel like the color separation inside the inspector may be little bit overkill

Yeah, reduz wanted to remove the background color for sub-sections there and only rely on the bold font. I agreed with him, but the majority wanted some backgrounds, so a compromise was reached with a faint but visible background for sub-section headers.