Theming: coloring of folders and log in background

[savely-krasovsky]

Also I think, that on login page we should use CSS color filter to color the picture on background. Of course, this feature should work only with default background.
I think it's easy to realise, just convert RGB hex code to HSV and then use three CSS tricks:

hue-rotate(0deg);
brightness(0%);
contrast(0%);

[Bugsbane]

I agree on having the element accent color either continue to match the header color when changed, or have its own color picker.

Tinting the login background image is an interesting idea, although I'd place it way down the list of theming priorities after things like switching all of the white text everywhere to black when the lightness of the chosen header CSS color goes above a certain lightness level, making it hard to read (eg white header color with white text)

[juliusknorr]

Changing white text to black text could also be triggered automatically. You can take the lightness of the chosen theme color and define a limit to switch the text color, e.g. lightness of color > 0.5 -> dark text.

Then we could avoid adding another configuration option.

[schiessle]

Changing white text to black text could also be triggered automatically. You can take the lightness of the chosen theme color and define a limit to switch the text color, e.g. lightness of color > 0.5 -> dark text

do you want to provide a pull request? Would be great! 😃

[juliusknorr]

Sure, but it may take a while, possibly at the end of the next week.

[schiessle]

Sure, but it may take a while, possibly at the end of the next week.

Great! No need to rush... Looking forward to your pull request!

[jancborchardt]

@Lord-Protector yeah, great points! I also thought about tinting the background image via CSS. Do you want to prepare a pull request for that maybe? We just need to take care that it works in all browsers.
Also I’d leave the normal blue background by default and only use that method for theming to avoid a flash of white when loading.

Regarding the folder icons and checkmarks, we have to somehow mess with the SVG. Since the new version will remove the PNG fallback that’s a lot easier. @Lord-Protector do you know how to do that?

[juliusknorr]

Checkboxes even work without messing around with the SVG. (see #415)

We could use mask-image CSS to colorize the folder icons, but that is still not supported in IE/Edge.

[savely-krasovsky]

@jancborchardt sorry, I am not a programmer. May be a little bit as hobby.
But I can help with some graphic stuff (mockups, icons, logos etc).

[jancborchardt]

@juliushaertl awesome, great work! :) Good to have you on the Design team.

We could use mask-image CSS to colorize the folder icons, but that is still not supported in IE/Edge.

Why is it not possible there – aren’t they also SVG?
But yeah, we can use mask-image, it will just be a nice enhancement which is available in most browsers but not Edge.

[juliusknorr]

@jancborchardt Thanks!
I thought about generating SVGs dynamically by replacing the contained color value in mind when you talked about 'messing' with the SVG. 😄

Yeah, if support for Edge isn't that important for this specific feature, than using mask-image would be a good solution to solve this.

[jancborchardt]

Changed the title of this since the checkboxes are basically fixed by #415 – @Lord-Protector would be nice if you can review it since you opened the issue. ;)

[Brahmachari]

Great! Thanks to all.

Don't forget the status bar (displayed while uploading a file)
core/css/jquery-ui-fixes.css
.ui-widget-header {border: 1px solid #0082c9; background: #0082c9; color: #ffffff;}

[jancborchardt]

@Brahmachari I think this is fixed in latest master (cc @juliushaertl)

[juliusknorr]

@Brahmachari
@jancborchardt is right. This has been fixed in #771

[juliusknorr]

Fixed with #840

[jancborchardt]

Big thanks to our theming guru @juliushaertl! :) 🎉