Make dark theme higher contrast

[Giwayume]

I renamed a few css variables so they start with what they're targeting instead of how they're styling. This makes it easier to scan, e.g. finding all the variables that style an input will start with "input".

[Giwayume]

#167

[viliusle]

Just tested it on local PC (edited). I still want to think about:

• Do we need to invert left side tools? After some time it does not looks so strange anymore, not sure about it yet. (low priority)
• Inverted logo also look strange, still thinking. (low priority)
• active button color strange too. (low priority)
• Background color near main canvas (gradient like #75797a) too grey? (normal priority)
• You mainly used all grey colors, just different brightness. What i am using is almost gray, but it the blue component is increased, and it gives that solid look, that i really like (#424f5a or RGB: 66,79,90)

Everything else looks solid and nice.

Maybe i just got used to current colors, so its hard to see something different. Let me think about it before excepting this PR.

[Giwayume]

You mainly used all grey colors, just different brightness. What i am using is almost gray, but it the blue component is increased, and it gives that solid look, that i really like (#424f5a or RGB: 66,79,90)

I know, I styled it the way you'd find a typical dark theme in most applications, & kept it a little bit blue. Most dark themes are pure gray, and there's an argument specifically for photo manipulation programs that they should be pure gray. The reason for this is that human color perception is relative.

This image of strawberries is a fantastic example. There is no red pixel in this image, but you see red. Pull out a color picker and check.

The point is the colors surrounding an image affect your perception of that image, and this includes the editor theme itself.

Background color near main canvas too grey?

As stated above, ideally for photo manipulation specifically you want the background to be pure gray so your color sense doesn't get thrown off.

Though I was thinking during this it would make sense in the future to let the user customize the background to be whatever color they want in the settings.

Do we need to invert left side tools?

I'd say yes, though it doesn't need to be pure white. The problem is with the spritesheet it's difficult to style, would be better if these were redone as SVG icons so it's easy to manipulate the color in the theme, but that'd take too much time right now.

GIMP & Photoshop have more muted shades for example.

[Giwayume]

active button color strange too. (low priority)

I think the use of the active color makes the most impact here. It should be more subtle in most places. I'm just trying to get a color palette as a starting point so it's easier to restyle the existing application controls.

The nice thing about CSS variables is we can always adjust the colors later if they don't make sense after the controls are redesigned.