Introduce generic theme variants.

[TurboGit]

The main theme can now be adapted with variants.

• condensed
• rounded header
• focused module border (light, dark, green, blue, yellow, orange)
• expanded module border (light, dark, green, blue, yellow, orange)
• accent color (green, blue, yellow, orange)

The "condensed" variant was already available into the Miscellaneous / Interface section. It is now part of the general theme section and handled as a standard variant.

The variants controls are proposed just below the main theme and are indented to make it clear that those are part of the theming.

The GUI:

Why?

Many people are today asking for this, rounder corner, colored accent, more condensed UI (already in master). Having a more structured way to support sub-theming (or variant) seems a good way to give more freedom.

This has been tested on the 3 main themes : grey, dark and darker.

Green accent + module border:

Yellow accent + rounded border

[hats-np]

The colored accent is nice. Is this accent available via css? If not it would be nice to have an "other" entry in the dropdown which opens a text box where the user can input a hex value for the accent.

[TurboGit]

The colored accent is nice. Is this accent available via css? If not it would be nice to have an "other" entry in the dropdown which opens a text box where the user can input a hex value for the accent.

It is part of the CSS.

[Donatzsky]

Good idea.

Some feedback:

• "condensed panels' controls" is bad grammar and should be "condensed panel controls". But wouldn't it be more correct if it was "condensed module controls"?
• "accent color" is better than "colored accent" and also matches the phrasing of the other options.
• Not sure I like the | option formatting. I would leave out the | and rely purely on indentation.
• Visually separating the theme section from the other options would be good. Some space above and below should be enough, or maybe a horizontal line. Then the indentation might not be needed either.
• An option to show a border around expanded modules would be a massive usability improvement, since currently it can be hard to see where a module ends and the next begins.
• And finally I would add a warning about changing the theme, since many are not aware it can be a bad idea and think the grey theme is a bad joke by the devs. Something like: "Changing the theme can adversely affect your perception of brightness, contrast and saturation <more info>", with a link to the manual.

[TurboGit]

@Donatzsky : Thanks for the detailed feedback.

[TurboGit]

@Donatzsky : Something like this or you have something else in mind?

[Donatzsky]

@TurboGit No, on the outside of the module. It should also be lighter than the background. This is too much, but you get the idea:

[Donatzsky]

Actually, both light and dark could work:


But I prefer light.
Maybe light for focused module and dark for expanded, but not focused.

[TurboGit]

@Donatzsky : And only the one having the focus or all expanded modules?

[Donatzsky]

@TurboGit If all expanded modules have a border, which I think they should, then the focused module should have a light border and the others a dark border.

Edit: That is in the darkroom, of course. Not sure if light or dark would be best in the lighttable, but I suspect dark.

[TurboGit]

@Donatzsky : I find the currently focus module border good, but the darker border for expanded ones not very nice.

I'm more leaning toward having only a border for currently focused module. What do you think?

[Donatzsky]

@TurboGit I was actually thinking about this earlier today :) I suggest letting the user decide for each case. Like this:

• Focused module border [none, lighter, light, dark, darker]
• Expanded module border [none, lighter, light, dark, darker]

So, no border and four shades of grey to choose from. Maybe also add [light accent, accent, dark accent], but now we're getting dangerously close to Christmas tree territory.

"rounded header variant" should be renamed "rounded module headers".

[TurboGit]

@Donatzsky : The Christmas tree is implemented :)