[Breeze Icons] Get rid of redundancy in icons-dark/
Open, Needs TriagePublic

Description

This is what really annoys me in Breeze Icons: We are adding icons to icons-dark/ although they are almost exact copies of the icons in icons/. That means double file hazzle.

I’ve got a list of icon files in icons-dark/, which do not exactly look like the ones from icons/ after simple color substitution. There are 319 such icons, which is less than 10%.

To reproduce and check, I am leaving the script here.
change-to-dark.pl contains 4 very simple color substitutions. It should be no problem to implement them in the Breeze Icons build process.

  1. Clone breeze-icons
  2. Copy icons/ and icons-dark/ to a new folder
  3. Do color substitution on all icons in icons/:
$ ./change-dir-to-dark.pl icons/
  1. (Optional) Modify some icons in icons/, to see that compare-light-dark.pl works as expected. I let actions/16/accept_signal.svg be modified.
  2. (Optional, for clarity) Rename icons/ to icons-dark_generated/, and icons-dark to icons-dark_original/
  3. Compare the original icons with the generated icons (order is important!):
$ ./compare-light-dark.pl icons-dark_original/ icons-dark_generated/ >icons-with-differences.txt
  1. This will tell you that there are 319 (+ the modified ones) icons which can not be reproduced exactly by swapping the color codes. It will also tell you that 0 icons in icons-dark/ have no partner in icons/.
  2. To see which icons in icons/ have no partner in icons-dark/, remove the compare call in compare-light-dark.pl (and optionally the symlink check), and call it with reverse argument order.
  3. This will tell you that there are 93 icons in icons/ but not in icons-dark/.

Description:

  • change-to-dark.pl replaces all #c0ffee style color codes. It is based on https://community.kde.org/Guidelines_and_HOWTOs/Icon_Workflow_Tips and icons-dark/light2Dark.
  • change-dir-to-dark.pl traverses the directory tree of icons/, skips all files and directories which are symlinks, and calls change-to-dark.pl on the icon files. It is important to skip symlink directories, otherwise icon files are modified twice, and colors are swapped twice. It is important to skip symlink files, otherwise symlinks will be replaced by actual files (and sometimes colors are swapped twice again).
  • compare-light-dark.pl traverses the directory three of icons-dark/ the same way, and looks for each icon file whether it has a “partner” in icons/. If it has, it compares them with ImageMagick compare.
  • compare-light-dark.pl needs the perl module Term::ProgressBar, because it needs very much time to complete. If you don’t need that, because you don’t have such a slowbook like me, you can remove the respective code lines.
  • compare-light-dark.pl needs the perl module Capture::Tiny.



Now my suggestions are these tasks:

  • Revise the remaining 319 icons, and decide which really need their own dark version. Would make sense to write a script to call montage-breeze, montage-breeze-dark, and montage with these icons.
  • Extent the build process to copy icon files from icons/ to icons-dark/ if there isn’t already a file in icons-dark/, and swap their color codes.

Complaints?

davidhurka added projects: Frameworks, VDG.

None whatsoever. :)

I suspect that most of the dark icons that are different from their light counterparts could be auto-ted and the differences are errors. So yeah, for any that aren't, the built script would simply avoid making an auto-generated version during compilation if there's already a handmade version in place. This would make it completely obvious which dark icons are handmade on purpose, since they would be the only dark monochrome icons in the source repo.

I have created montages of the different icons. The original files to the left, the generated to the right. (Hover the images to see the file path)

There are false positives:

Many have title bar buttons or panel buttons which should not be recolored:


Many have more subtle differences (look at the screws):

Many have big differences (which can maybe be avoided by improving the color substitution):

Sometimes the generated ones look better (debatable):


In some icons I don’t see whether the difference is intended (look at the border):

The script takes the output file of compare-dark-light.pl as argument. First you need to create the directory montages/.

Can you write a bash script which copies the icon files to icons-dark/ and substitutes the colors? Apparently you know how to do that, my bash skills are a bit worse.

Yeah, I was planning to. It would probably be helpful to do the cleanup first though.

I have to take some short notes here.

I have written a .sed script which we can use to convert icons/ files to icons-dark/ files. It does the same substitutions as my perl script above, but matches only in the stylesheet. That means, fixed colors will not be changed. That should fix things like this:

The script must be called with the -E option, because it uses new POSIX regexes.

$ sed -E -f swap_colors.sed -i file/to-change.svg


Of course you may give it a better name.

Open questions are:

  • The icons in applets/ use #314045 as ColorScheme-ViewBackground, altough Icon_Workflow_Tips defines #232629. I think it should really be #232629, because that is the color which is actually used by the Breeze Dark theme. swap_colors.sed substitutes to #232629. The following picture illustrates what that means: (Auto-generated left, original right)
    I think we can do it how swap_colors.sed does it now, and get rid of icons-dark/applets/.
  • Icon_Workflow_Tips defines #232629 for ColorScheme-Text, but many icons have #4d4d4d as ColorScheme-Text, for example those in icons/applets/, but also some in icons-dark/actions/. The latter is a mistake which will be fixed by auto-generating. The former is currently respected by swap_colors.sed, and auto-generated icons correspond to those in icons-dark. (I think the icons should actually use #232629, but than can be fixed independently.)

Next steps:

  • Run the compare-dark-light.pl again with the new swap_colors.sed script, to be sure it does color swapping fine now.

By the way I looked through the 319 icons.

  • Some icons actually need fixing in icons/.
  • The emblem rating is blue in icons-dark/, because it links to another class. We can:
    • Leave rating in icons-dark/
    • Change the light version to be blue too
  • (Probably) All mimetype icons in size 32px and 64px look significantly different in light and dark

Ah, that was an oversight on my behalf. I changed the rating icon to be black to fix a bug where it becomes invisible on a selected item. I probably forgot to change it to be white for the dark version. :/

Can anyone explain why rating-unrated and semi-starred-symbolic[-rtl] have 50% transparency, while rating has 100% opacity? That makes my compare script go wild, and I think it doesn’t look intended.

ndavis added a subscriber: ndavis.Mar 29 2020, 3:19 AM

Can anyone explain why rating-unrated and semi-starred-symbolic[-rtl] have 50% transparency, while rating has 100% opacity? That makes my compare script go wild, and I think it doesn’t look intended.

Any inconsistencies in the -symbolic icons are probably unintentional

davidhurka added a comment.EditedApr 6 2020, 3:35 PM

Now we have less than 130 icons which are different in icons/ and icons-dark/, and less than 100 icons which we should keep as dark version. Maybe we can keep even less.

I have sorted them into two files.

@ngraham How’s your progress with the bash script? I’m currently trying to understand bash syntax. Maybe I can do it, if you don’t have done it already.

I haven't been working on it. There's an outstanding request to do this in a combination of CMake and Python, so it's cross-platform for Windows users of Breeze Icons too (see D27557#622879). Honestly I need to re-do the existing thing before that. But it's hard to gin up the motivation since I find working with CMake for anything more trivial than bumping a dependency version to be exceptionally unpleasant.

I could probably make the python script instead, but I'm in the same spot when it comes to writing CMake.