Icons with theme colours

[vkbo]

The themes would look better if the icon colours matched the themes. Currently, the icons have colours from the default themes, which do not necessarily match the others.

A solution is to define a set of icon colours in the theme files, like red, green, blue, gray, etc. The icons themselves are SVG files, so the colours can be added on the fly:

svg = b"<svg ...>"
pixmap = QPixmap(24, 24)
pixmap.fill(QtTransparent)
pixmap.loadFromData(svg, "svg")
return QIcon(pixmap)

Icons could be loaded from a text buffer of Google Font Icons. Setting the fill colour should be easy, and should be done on icon request so that there's no need to store multiple copies of the same icon.

Since the icon SVG entries are single line, they could potentially be stored in a single file, which would make it easier to make icon themes, and also easier to distribute. However, the file format is a little trickier. In the repo, they can be stored as individual SVG files and compiled into icon theme files with one icon per line at release.

[vkbo]

I gave this a try. It looks quite OK, although single colour icons look quite different. Not sure that's a problem.

This approach also makes it easy to generate new icon themes. It also means there is no longer a need for "dark" and "light" themes as they will match the GUI theme automatically.

[vkbo]

What do you think, @HeyMyian? Didn't you create your own theme, or was that someone else?

I created 6 variations of the Material Symbols theme from Google, and it is auto-generated with a script. I just have to match icon keys in the code to icon keys in the theme (much like before) and adding new generator scripts is fairly easy. It takes a while to select icons for all the icon slots though.

I was also thinking about adding a setting to disable icon colours for the project tree and for the GUI in general. Since the colours are added programmatically, that's trivial.

[HeyMyian]

Yes, I created my own icon theme because you gave us the option 🙂 (and if I don't procrastinate my own writing, no one will.)

The sidebar was too colorful for my taste so I monochromed the icons. The document icons I created from scratch, I prefer the un-rounded corners. If you're interested in any of them, I'll look for the license.

In the new system, is it still possible to use icons with multiple colors? Like in my screenshot the white page and the colored accent to indicate the level? I know technically SVGs can use CSS variables like "currentColor". Would python simply fill all shapes in the svg with the same color?

[HeyMyian]

I only saw the new colorful icons in the panel. I noticed that the other icons were also changed:

I like their style much more than the current default icons. I see we had the same idea with the folder for the first icon 😄

The fourth icon (Outline) however is a calendar. Or a calculator. I struggled to find a fitting icon myself. My snowflake (for snowflake method) probably indicates even less what this tab is.

If the "i" icon would be adopted for "Novel Details" like in my theme, the current Novel Details icon that looks a bit like a bullet list could be freed up for the Outline, which visually resembles a list of headlines.

[vkbo]

Yes, I created my own icon theme because you gave us the option 🙂 (and if I don't procrastinate my own writing, no one will.)

Familiar problem 😄

The sidebar was too colorful for my taste so I monochromed the icons. The document icons I created from scratch, I prefer the un-rounded corners. If you're interested in any of them, I'll look for the license.

The new setup I'm testing out pulls directly from a repository for icons, and does not operate on individual files. See the script I created for the Material Symbols. Each theme is written to a single file.

It's still possible to design icons from scratch. but they have to be assembled into the single file. THat's relatively easy though. The file format is pretty basic. Here's an example.

In the new system, is it still possible to use icons with multiple colors? Like in my screenshot the white page and the colored accent to indicate the level? I know technically SVGs can use CSS variables like "currentColor". Would python simply fill all shapes in the svg with the same color?

No, it's not. The design principle is much simpler. The new icons are more like fonts, as is customary on the web these days. They have a single fill colour. If you design them manually, the colour must be set to #000000 (black), which is replaced by a colour in novelWriter that is defined in the theme file. This means the icons will adapt to each theme, which was my initial idea. Here's an updated theme example.

I see that also Google dropped duotone icons in their new Material design set. I don't really want to go back to manually editing icons. With the new system, it should be easier to generate full new themes and instead pick a better source. I do like duotone icons though, so if you can find a good icon set, I can add that too. I'm looking for more options as well.

I only saw the new colorful icons in the panel. I noticed that the other icons were also changed:
I like their style much more than the current default icons. I see we had the same idea with the folder for the first icon 😄

The current icons are Typicons, which are nice, but there are very few of them, so it is a continuous pain to find icons for new things, and I have to design a lot of them manually. It is also a lot more work to manually colour in each version of the icon theme, and basically out of the question to make new ones.

The fourth icon (Outline) however is a calendar. Or a calculator. I struggled to find a fitting icon myself. My snowflake (for snowflake method) probably indicates even less what this tab is.

It's a table actually. Which fits, but that icon is poorly designed in my opinion.

If the "i" icon would be adopted for "Novel Details" like in my theme, the current Novel Details icon that looks a bit like a bullet list could be freed up for the Outline, which visually resembles a list of headlines.

I'll look into that. The icons aren't settled. I just went through the existing icons and looked for Material Symbols equivalents.

About colours ...

I have reduced the colourfulness of the project tree icons. It is another issue I wanted to solve. There is the challenge of indicating the document types though. I've considered dropping the document vs note distinction, but that may disrupt people's projects, so maybe I should instead look for a different icon for notes.

If notes have their own icon, the document icons can be monotone too. You can enable emphasis to distinguish between header levels anyway.

Since the icon colours are defined in the theme files, they can be tweaked for each theme. I can also add a semi-transparent version of each colour internally in the code and use those for the tree to tone down the brightness a little.

[vkbo]

I've also made some more changes since yesterday:

I've extended the theme colour section for icons to have separate settings for the project tree items. This should help to keep button icons separate from the tree icons, and also allow to tone down the icon colours or turn them off in custom theme files.

[Icons]
default         = 204, 204, 204
red             = 242, 119, 122
orange          = 249, 145,  57
yellow          = 255, 204, 102
green           = 153, 204, 153
aqua            = 102, 204, 204
blue            = 102, 153, 204
purple          = 204, 153, 204

[Project]
root            = 102, 153, 204
folder          = 255, 204, 102
file            = 204, 204, 204
title           = 153, 204, 153
chapter         = 242, 119, 122
scene           = 102, 153, 204
note            = 255, 204, 102

I think the new icons implementation works fine though, so I'm going to make the change. It won't be for 2.6 though. I'll hold off on it until I can merge it into the 2.7 branch.

[vkbo]

Oh, and I changed the document and note icons. They are now different, and I found some that are more square than rectangular. The rectangular ones have different margins so they look a little off.

With the now different icons, and with emphasised labels for chapters and partitions, you can easily go full monochrome too: