Godot: More advanced UI themes

[Soaku]

Godot version: v3.1.stable.official

OS/device: Ubuntu Mate with the Arc theme

Issue description:

The built-in Arc theme (added in #8929, later modified in #9535) doesn't really fit in the original Arc theme.

As you can see, in the original Arc theme (on the right) the title bar is the same color as the top bar color. This doesn't apply to Godot, the colors are way different, same goes for other UI parts, none of them really fit the original theme. The border parts (active tab, the background of icons below) fit the best but still could be better.

I tried to fit the background Godot color (the one right below the title bar, where the main menus are) so it matches the title bar, here are the results:

Target BG color: #2F343F (title bar color)

With lighter base color (#404552, this one is used for background of content, such as docs, inspector, scene tree...):

• (opacity) (resulting BG color)
• 16% #31343E
• 17% #30333D
• 18% #2F323C

With darker base color (#353945, used for navigation, side menus, in the screenshot, on the right – "Places", on the left – active tabs and icons below):

• 10% #2D303B
• 8% #2F323D
• 7% #2F333E ← Best fit

The last match can be seen on this screenshot:

The title bar has a nearly perfect fit for the title bar and the active tabs color fits the navigation menu color on the right. Another problem: the docks and the background have too low contrast. On the right, you can see a dark (#21242C) line between them. Similar line can be seen on higher contrast levels in Godot, but on these as low as 7% it's nearly invisible. Also, in Godot, background color for content is slightly darker (#313540) than the tab color, with nearly no contrast, while on the right, it's a lighter color (#404552) with, again, a dark line between.

So, I'd suggest making it possible to specify each color separately instead of the contrast option, to be enabled with a checkbox above it. Some colors that should be customizable:

• Background
• Dock border
• Active tab
• Inactive tab
• Content background
• Settings/inspector section header background
• Settings/inspector input background
• Output section header background (they have a different, darker color than in inspector)

Considering we have somewhat advanced syntax highlighting themes, this shouldn't be a problem to implement. Maybe this could be even more advanced if stylebox support would be added here.

[Calinou]

I'm not sure if making more colors customizable is a good idea. This makes it much more difficult for occasional users to set up a theme quickly, since they need to configure much more colors compared to before. If we can derive better colors from a base scheme, we should do that instead.

By the way, I have an editor theme redesign in the works. Its default color scheme ended up looking very close to the Arc theme, so I removed that one.

[Soaku]

@Calinou That's why I mentioned that advanced color schemes could be turned on and off:

I'd suggest making it possible to specify each color separately instead of the contrast option, to be enabled with a checkbox above it.

So the contrast option would still be available, but if someone wants to be more creative, they could set up a theme themselves.

[hackini]

The easy quick theming derived from BaseColor/AccentColor/Contrast of Godot is really cool and I think should be definitively keep it. But it would be nice to provide the option to customize the theme further for those who want to. But it should not come at the cost of making things too complicated in the code base.

@Calinou If the editor theme redesign is the one you posted on your twitter, I really like the extra option to tweak corner radius too

[mhilbrunner]

Feature and improvement proposals for the Godot Engine are now being discussed and reviewed in a dedicated Godot Improvement Proposals (GIP) (godotengine/godot-proposals) issue tracker. The GIP tracker has a detailed issue template designed so that proposals include all the relevant information to start a productive discussion and help the community assess the validity of the proposal for the engine.

The main (godotengine/godot) tracker is now solely dedicated to bug reports and Pull Requests, enabling contributors to have a better focus on bug fixing work. Therefore, we are now closing all older feature proposals on the main issue tracker.

If you are interested in this feature proposal, please open a new proposal on the GIP tracker following the given issue template (after checking that it doesn't exist already). Be sure to reference this closed issue if it includes any relevant discussion (which you are also encouraged to summarize in the new proposal). Thanks in advance!