Call for participation: an ubuntu default theme lead by the community?

https://discourse.ubuntu.com/t/mockups-new-design-discussions/1898/362?u=meetdilip

Full orange with horizontal fold looks much better than others

1 Like

A little while back I did a small weekend project as a PoC that does just that. It inserts a white background automatically to all third party installed apps to get a uniform look in Ubuntu. Maybe Yaru theme could use something similar?

An old screenshot from my desktop:

image

8 Likes

Holy crap nice! Quiet late to the show but this looks interesting!!!

How exactly did you do that? Is that a dashtodock modification?

3 Likes

Interesting, it would even be a little better if the squircle background can be checked according to the preminent icon color (like Unity did)

3 Likes

It is basically a python script that checks /usr/share/icons/hicolor/*/apps for icons that are not already part of Yaru, then use an ImageMagick python library to generate new squircle icons under ~/.local/share/icons/. The script is called every time I install a new package from apt to ensure new icons get reshaped.
There are some limitations like ImageMagick not handling SVG icons correctly which cause a quality drop (another library is probably needed), also some apps (especially proprietary) don’t store icons in hicolor folder.

2 Likes

I believe I can do that when I have some time.

Based on your suggestion, I extracted color palettes from the icons separately, and each time tried to apply a different color to the squircles. These are the results so far:

  • Applying the primary color of the icons to the squircles:
    Screenshot-20181102175829-1366x768

  • Using the secondary color:
    Screenshot-20181102175104-1366x768

  • The tertiary:
    Screenshot-20181102180614-1366x768

The results are quite random with some icons looking better than the others each time. I don’t know how Unity used to do things but its clear this is not the right way. I appreciate any suggestions.

Here’s the link if anyone wants to experiment with the script too:
https://github.com/Eskander/surufy/tree/colored-squircles

7 Likes

I vote for the squircles script!

EDIT: Tbh if @Eskander can incorporate a complementary background colour too then we don’t even need the Libre office icons.

2 Likes

Great start @Eskander - how about picking the colour and then turning it into a pastel shade? Perhaps pick one of the values in the colour (the “white” if these were paints) and then set it to midway between the original value and maximum? Then refine the formula if the end result is too pale or still too dark and maybe bring other values like saturation into the process…

EDIT: Whatever script is used we can manually edit the ones where the colour isn’t great (or we can use the white script as a fallback and manually choose colours for key apps like Libre Office). It’s still a massive time-saver and great for consistency in the UI!

1 Like

As you said @Eskander the extracted color palettes is pretty hit and miss, so that’s not an option IMHO.

I really like this idea :+1:

I wonder if you can make the white background transparent? I did a mockup where opacity is at 15% (sorry, I got lazy and didn’t do all the icons in this mockup, but you get the idea).
This way we don’t touch the branding of the icon, we hint/imply the suru squircle to frame the icon and the squircle background works with any icon color.

image

2 Likes

This is also a really nice approach. Would be interesting to see how the opacity works on the (changing) launcher, when the squircles change on some apps and not others as the launcher darkens. When I picture it I think it would be fine?

Honestly, I’m a fan of what @madsrh suggested, as well as the idea of taking a prominent color like unity7 did. Although I think changing saturation values in script would probably be sufficient, I understand how it could still be problematic, so the half opacity is still a good alternative.

I did wanna bring up, though, that if some sort of automated squircleization happened, could we possible change the shape of the hover highlight, too? Rn it’s rectangular, but it’d be really cool if it was instead a squircle slightly bigger to feel like there’s an outline around the icon. Extending further, we could make the app drawer button significantly different and make it circular.

Could do a mock-up in a bit if people are interested.

1 Like

An even quicker mockup (sorry) with the primary colors but at 25% opacity:

image

I’m not sure that only targeting the icon is actually possible, but you’re right that the current hover isn’t perfect. IMO because the hover effect is almost identical to the icon grouping (like Utilities). This is also an upstream (read Adwaita) issue.

@madsrh I think my favourite is your original opacity, followed by the original script with white squircles.

Is it possible for @Eskander to run the script with the 15% opacity to show the launcher too? Very exciting times for Yaru IMO. This effectively makes the whole squircle dilemma vanish.

2 Likes

Maybe white with as small percentage of primary color

great work! I was experimenting myself, but my script is not so mature :smiley:

It looks that secondary color might be a better solution, maybe working with alpha level

I prefer a solid white background for all than the transparent one, otherwise I think that the difference from the other icons, which have all very solid colors, would be too much.

The scripting solution is promising but it requires some more effort and filtering. This is my attempt using only PIL library.

Screenshot from 2018-11-03 22-48-35

as @Eskander said, not all the icons are in the canonical folders, moreover some applications seems to have icon which size is not enough to produce well defined surufied icons. See as example HexChat vs Dropbox .

The best would be to have ha filter that creates the icon shadow, to improve the definition over a background color too similar to the icon color

5 Likes

@c-lobrano If you want solid colours, how about if the script does a HSV operation like:

  • identify the colour using your current method
  • reduce “S” to 30 out of 100 if it’s greater than 30
  • increase “V” by 30, to a maximum of 100 out of 100

…to make a lighter colour, for more contrast and less luridness? Using the colours from your screenshot as a starting point, that would give the following colours for the squircles:

Firefox:

image

GIMP:

image

Chromium:

image

Dropbox:

image

GParted:

image

Inkscape:

image

Clementine:

image

Builder:

image

Then if the script runs and the output doesn’t look great, tweak the formula?

5 Likes

I remember reading an article on OMG Ubuntu. It was about making the glossy icon highlight flat. If that is how Unity is treating backgrounds, we can use a single SVG as background and then try to add a colour to it.

This

https://www.omgubuntu.co.uk/2016/08/flat-unity-launcher-icons-flatify-script

1 Like

Unity 7 automatically insert icons into shapes.

Here you go, (script)

Screenshot-20181104194755-1366x768

and this one for transparent icons with primary colors: (script)

Screenshot-20181104194640-1366x768

Note, I’m using 50% opacity due to my limited image manipulation skills. If I set the value lower some noise around the edges would appear. Could anyone provide me with a white (#ffffff) 512x512 png Suru-like squircle for the background?

4 Likes