material-maker icon indicating copy to clipboard operation
material-maker copied to clipboard

Theme Upgrade (WIP)

Open Arnklit opened this issue 3 years ago • 5 comments

** This is WIP and not yet ready to merge **

Purpose

This an initial attempt at a Theme overhaul. This only updates the Dark theme, but I think I can pretty quickly do the Light one as well now that I've gone through the Dark. I'd suggest we delete the default theme and turn the Dark into the default as well, but if there are strong feelings about keeping the Default blue theme, I'll do that one as well.

Before (screenshot is from 1.0, so there are a few other changes as well): image

After: image

I tried to modernize things a bit, It seems people generally thought the big rounded corners on the nodes didn't look modern. And the contrast was too high with the nodes being completely black. I was heavily inspired by Blender's default theme in my value choices.

Accents

We didn't really use a consistent accent color in Material Maker, but we did have some colors here and there.

For example the selected level in the Hierachy used a blue shade of text to indicate it was selected. image

The Add node popup had a red tint around it. image

And the scrollbars had a blue color when hovering them. image

I've gone over to using a blue tint in general. I went with the color Blender uses #4772B3 (active) and #405e8c (passive) image image image

For the Hierachy, I went over to using a symbol to indicate the active level instead. Godot_v3 5 1-stable_win64_GHv29ZqGqP

Toggle Buttons also use the accent so they are easier to read. image

Feedback

Please give this PR build a test and see what you think. If there are strong feelings about using a different accent color, I'd be open to that. I'm not a UI/UX person, so for me it was easier to lean on Blender's UI choices.

Arnklit avatar Oct 21 '22 15:10 Arnklit

This can be totally just me but i think this colors would look better image

image

ithink both of this color text fail contrast

image

adambelis avatar Oct 21 '22 18:10 adambelis

That text next to FBM is totally unreadable!

Zireael07 avatar Oct 21 '22 18:10 Zireael07

That text next to FBM is totally unreadable!

That is true, I think they are hard to read currently as well. I seem to remember we lighten / darken these values or similar values elsewhere to make them contrast better against the background, so I'll look at doing the same here.

Arnklit avatar Oct 21 '22 19:10 Arnklit

@Zireael07 I lighten the colors for that view now. image

Arnklit avatar Oct 22 '22 09:10 Arnklit

It's a nice start, cleaner and more consistent.

I'd love to see more white space in the nodes, especially some margin between the header and the content itself. (example from Blender geometry nodes) image

If possible, try making all the different nodes conform to a grid, with consistent increments in height/width etc. This would make them easier to align and organize, and help create a cleaner look to the graph.

fccDunce avatar Oct 22 '22 15:10 fccDunce