In Edit, can't make out most icons on dark theme and high res screen

[genachka]

Using 0.98, though this was an issue prior versions too. My specs are:

• Ubuntu 21.04
• Gnome 3.38.5
• Screen res: 3840 x 2160 with Font scaling factor 1.25
• Using Yaru-dark theme

The issue:
The left sidebar icons are almost impossible to see both because of their size and lack of clarity in the dark theme. The top toolbar icons are a little better on the left (like close, save) but then to the right of those it becomes hard to make them out for same reason.

[Photon89]

The icons in the top bar are loaded from the icon theme currently in use, maybe a different icon theme would help? Though the contrast seems fine to me, it's merely about the icon size, I guess. How do other apps perform here? Maybe you could use HiDPI scaling to make everything larger? As far as I understand, an app cannot control the icon size depending on the resolution, and for non-HiDPI resolutions the icon size is just fine.

The icons on the left panel are hard coded Tango icons and some of them indeed are problematic on dark themes. Ideally, we could find suiting icons which are supplied by the icon themes and fit the GTK theme.

[genachka]

If the top icon bar icons were same size that Close, Save are it would be consistent and easier to see. I don't have an issue in any other app so increasing scaling or enabling HiDPI scaling globally just to make shutter work would cause those other apps to have overly large icons.

Though many of the apps offer their own scaling options to increase so maybe this option can be added here in preferences.

But agree, the bigger issue is the left sidebar icons. It would be helpful to allow setting additional scaling options in preferences (1 setting for all icons that Shutter uses) as they are tiny and finding icons that work better on darker themes.

[Photon89]

If the top icon bar icons were same size that Close, Save are it would be consistent and easier to see.

It looks like a theme specific issue to me. Here is how it looks like on my end with the Delft theme:

I think, all the icons have about the same size here.

[genachka]

So if there's anything that can be done to get it to work better with dark themes, like the ones that come with Ubuntu that I'm using it would be helpful, especially with the left side icons. I'm happy to see Shutter getting some love again as for the past couple years I've been forced to switch to something like Flameshot which is getting better but doesn't have many of the features I've grown to love in Shutter. But as you can at least see in the screenshot, it has no issues with icons which are well defined and easy to see with my existing resolution and dark theme. I'm not straining or trying to guess what they are / mean.

[Photon89]

I see your point, those are really very clear. But they appear in the selection screen rather than inside a window and thus are less disturbing. Maybe it's just me but I'd find it not really aesthetic to have flat violet icons in a GTK GUI, though they are clearly very functional.

I search how other apps handle this issue:

• Gimp has just a dark interface with white icons, regardless of the actual GTK theme. It's probably hard to implement and doesn't fit into the desktop nicely.
• Inkscape has really many GUI options (choice of GTK theme, icon theme, a checkbox for using symbolic icons etc). Looks like the best solution but probably rather hard to implement.
• Xournalpp has a checkbox "Use dark theme" which loads a second icon set with light icons.

Ideally, one could find icons which work well on both dark and light themes. Basically what Flameshot does, but not in violet such that it integrates better into a GTK GUI. Not sure if such icons exist though...

[DarthGandalf]

Gimp has just a dark interface with white icons, regardless of the actual GTK theme. It's probably hard to implement and doesn't fit into the desktop nicely.

I think it should be easy to implement via CSS which gtk supports. But I agree wrt desktop. OTOH I don't find gtk nice either way: any Qt app I saw looks so much better than any Gtk app I saw. But I don't think users of light themes would be happy if we make Shutter even uglier than it is now by forcing dark theme on everyone, which as you said, doesn't fit

Inkscape has really many GUI options (choice of GTK theme, icon theme, a checkbox for using symbolic icons etc). Looks like the best solution but probably rather hard to implement.

What's symbolic icons?

Ideally, one could find icons which work well on both dark and light themes. Basically what Flameshot does

From what I can see in https://github.com/flameshot-org/flameshot/tree/master/data/img/material they used material icons, and made them in 2 colors: white or black.

[Photon89]

What's symbolic icons?

Flat black/white icons, see screenshot from Inkscape:

From what I can see in https://github.com/flameshot-org/flameshot/tree/master/data/img/material they used material icons, and made them in 2 colors: white or black.

But how did the icons become violet? Probably, the violet circles are not part of the actual icons but are added programmatically?

[DarthGandalf]

Probably, the violet circles are not part of the actual icons but are added programmatically?

Yep.

[genachka]

Saw some work on the 0.99 release mention changes to the editor's icons thank you but it's still an issue on dark theme and higher resolutions. Still can't make them out. :(

There's two issue here:

1. One is the size of the icons in high resolution is making them very hard to see.
2. The icon coloring in dark doesn't work well, but maybe with 0.99 if the size of the icons were better scaled for higher resolutions, especially the left side-bar icons then most of the icons would probably be better understandable with exception of these which are black on black: Draw a straight line, Draw an arrow, Add an auto-increment shape to the screenshot

Here's a side by side of what Shutter 0.99 icons (labeled as #1 in screenshot below) and Inkscape (labeled as #2 in screenshot below) icons look like on my dark theme and resolution. I can make out each and every Inkscape icon easily -- they are larger and coloring stands out well.

[Photon89]

@genachka Unfortunately, those changes have no visible effect at all.

@DarthGandalf We could actually make the icons in the toolbar on the left larger than 24px (32px maybe?).

Problem is, they are PNGs and I don't know if the SVG sources or just larger versions are available somewhere. @vadi2 Maybe you know something?

[cowabungaa]

I don't use the edit much but the rare time that i do it was always difficult to see which one was the arrow and the line. i inverted the color of some icons for a quick fix. i tried importing a bigger 50px png but it was still scaled down. i don't know if this will help you, i can work with this until the toolbar gets updated

edit: /usr/share/shutter/resources/icons/drawing_tool - if u want to style your own icons and come back to shutter

[tethragon]

I don't use the edit much but the rare time that i do it was always difficult to see which one was the arrow and the line. i inverted the color of some icons for a quick fix. i tried importing a bigger 50px png but it was still scaled down. i don't know if this will help you, i can work with this until the toolbar gets updated

edit: /usr/share/shutter/resources/icons/drawing_tool - if u want to style your own icons and come back to shutter

Thank you for this wonderful idea! At least I can use shutter now until the devs think a solution for dark themes.
Here are the icons I replaced (for dark themes). I inverted the colors mainly and I chose a different icon for censor

And now my icon row looks like this:

At least now I can use shutter properly!