Toolbar icon theming support #64177

New Issue

William Reynish · 2019-05-05T17:55:26+02:00

William Reynish commented

2019-05-05 17:55:26 +02:00

Currently, the toolbar icons work well on dark backgrounds:

But on light backgrounds they become hard to read:

Since the toolbar icons are vectors, stored as meshes with materials, we could actually make the colors themable.

Details:
Each color is stored as a separate material, such as theme.general.base (white), theme.mesh.add (green), theme.mesh.modify (purple), theme.mesh.remove (Red) etc.

We could simply let the theme set these colors, so that bright themes can set the base color to be dark.

Currently, the toolbar icons work well on dark backgrounds: ![Screenshot 2019-05-05 at 17.48.19.png](https://archive.blender.org/developer/F7007865/Screenshot_2019-05-05_at_17.48.19.png) But on light backgrounds they become hard to read: ![Screenshot 2019-05-05 at 17.48.53.png](https://archive.blender.org/developer/F7007868/Screenshot_2019-05-05_at_17.48.53.png) Since the toolbar icons are vectors, stored as meshes with materials, we could actually make the colors themable. Details: Each color is stored as a separate material, such as theme.general.base (white), theme.mesh.add (green), theme.mesh.modify (purple), theme.mesh.remove (Red) etc. ![Screenshot 2019-05-05 at 17.55.14.png](https://archive.blender.org/developer/F7007877/Screenshot_2019-05-05_at_17.55.14.png) We could simply let the theme set these colors, so that bright themes can set the base color to be dark.

William Reynish commented

2019-05-05 17:55:26 +02:00

Added subscribers: @WilliamReynish, @ideasman42

Duarte Farrajota Ramos commented

2019-05-05 20:12:57 +02:00

Added subscriber: @DuarteRamos

ThinkingPolygons commented

2019-05-06 14:25:58 +02:00

Added subscriber: @ThinkingPolygons

ThinkingPolygons commented

2019-05-06 14:25:58 +02:00

Icon outlines would do the trick, I guess.

William Reynish commented

2019-05-06 15:09:44 +02:00

Not sure if the outlines will be supported for these. Also I think it would look rather strange. It's cleaner to just use contrasting colors, rather than outlines

Ankit Meel commented

2019-09-10 01:38:57 +02:00

Added subscriber: @ankitm

Ankit Meel commented

2019-09-11 00:33:16 +02:00

@WilliamReynish I think this was addressed in this revision. https://developer.blender.org/rB5f7eebda23b844e932294b1ecaced46b5c75dde0.

Though for learning more, can I revert these changes and try the direction you hinted? I found the function def_internal_icon in interface_icons.c Line 181. But I couldn't find where the mesh colors are. If they are found, theme_color could be changed and this function could be called(alongside the one which currently changes all the colors.) whenever themes are changed. This would, however, redraw all the icons too.

@WilliamReynish I think this was addressed in this revision. https://developer.blender.org/rB5f7eebda23b844e932294b1ecaced46b5c75dde0. Though for learning more, can I revert these changes and try the direction you hinted? I found the function `def_internal_icon` in `interface_icons.c` Line 181. But I couldn't find where the mesh colors are. If they are found, `theme_color` could be changed and this function could be called(alongside the one which currently changes all the colors.) whenever themes are changed. This would, however, redraw all the icons too.

Ankit Meel commented

2019-10-02 16:27:59 +02:00

Turns out my interpretation of the issue and the said commit was wrong. So questions now:

Which file is open the third screenshot (with the icons and colour settings) ?

Where are the icons stored ? as I came to know, they're in a blend file, but couldn't find which one.

Turns out my interpretation of the issue and the said commit was wrong. So questions now: Which file is open the third screenshot (with the icons and colour settings) ? Where are the icons stored ? as I came to know, they're in a blend file, but couldn't find which one.

Yevgeny Makarov commented

2019-10-02 18:17:46 +02:00

Added subscriber: @jenkm

Yevgeny Makarov commented

2019-10-02 18:17:46 +02:00

source file:
https://developer.blender.org/diffusion/BL/browse/trunk/lib/resources/

utility to generate geometry icons:
https://developer.blender.org/diffusion/B/browse/master/release/datafiles/blender_icons_geom.py

these icons are stored in the ../datafiles/icons/ directory

BKE_icon_geom_from_memory - reading .dat files
BKE_icon_geom_rasterize - icon rasterization

source file: https://developer.blender.org/diffusion/BL/browse/trunk/lib/resources/ utility to generate geometry icons: https://developer.blender.org/diffusion/B/browse/master/release/datafiles/blender_icons_geom.py these icons are stored in the `../datafiles/icons/` directory `BKE_icon_geom_from_memory` - reading .dat files `BKE_icon_geom_rasterize` - icon rasterization

Ankit Meel commented

2019-10-19 22:58:10 +02:00

See if this workflow can be used: Since the mesh material is stored in icon_geom.blend file, and it is accessible using some APIs (todo for me), they can be put in the datafiles in /datafiles/icons/ in the form of strings or hashes if required. This can be done if not done yet in the utility file Yevgeny mentioned.

Those values can be read in BKE_icon_geom_from_memory where now geom->colors is being updated. According to the theme, new colors can be assigned there, and then the Icon_Geom can be sent for rasterization.

Part two of the task will be to run this process again, or only the "assigning the color" part when the user changes the theme in Preferences.

Do comment about mistakes or starting points.

See if this workflow can be used: Since the mesh material is stored in icon_geom.blend file, and it is accessible using some APIs (todo for me), they can be put in the datafiles in `/datafiles/icons/` in the form of strings or hashes if required. This can be done if not done yet in the utility file Yevgeny mentioned. Those values can be read in `BKE_icon_geom_from_memory` where now `geom->colors` is being updated. According to the theme, new colors can be assigned there, and then the `Icon_Geom` can be sent for rasterization. Part two of the task will be to run this process again, or only the "assigning the color" part when the user changes the theme in Preferences. Do comment about mistakes or starting points.

JPG commented

2019-10-20 13:50:41 +02:00

Added subscriber: @joules-2

JPG commented

2019-10-20 13:50:41 +02:00

The ability colorize icons at runtime is available under Preferences/Themes: Icon Colors.
There doesn't appear to be categories for the toolbar icons, but this would be the best approach. Some of the Toolbar icons already appear to be colorized from their default white foreground.
It may be a matter of some interface hooks, or there may be another reason why these icons can't be colorized at this stage. In any case it may be the best option to start with how it's approached colorizing other icons I mentioned.
There may be some technical insights a developer can give, since there must be some reasoning behind the ability to colorize the toolbar icons not being available.

The ability colorize icons at runtime is available under Preferences/Themes: Icon Colors. There doesn't appear to be categories for the toolbar icons, but this would be the best approach. Some of the Toolbar icons already appear to be colorized from their default white foreground. It may be a matter of some interface hooks, or there may be another reason why these icons can't be colorized at this stage. In any case it may be the best option to start with how it's approached colorizing other icons I mentioned. There may be some technical insights a developer can give, since there must be some reasoning behind the ability to colorize the toolbar icons not being available.

William Reynish commented

2019-10-20 14:12:26 +02:00

@joules-2 They are already dynamically displayed, and each color is a separate material, so that it's easy to set up for theming. All that needs to be added is the necessary hooks to the theming system.

Harley Acheson commented

2019-10-28 18:45:54 +01:00

Added subscriber: @Harley

Harley Acheson commented

2019-10-28 18:45:54 +01:00

Okay, was talking to @WilliamReynish and the following might be a nice and easy solution that would do all we need and would not require any extra theme settings:

The only real issue right now is that we are wanting the ability to select a light color for the background of the icons. That is now set in Themes / User Interface / Toolbar Item / Inner. Currently the value needs to be dark in order to give enough contrast with the colors of the icons.

But we could allow that background color to dictate the color of the icons themselves.

interface_icons.c icon_draw_size() has a btheme var. Use that to get the toolbar item inner color. Pass that along to BKE_icon_geom_rasterize(). Inside that function check to see whether that color is darkish or lightish. The best way to do that is to send the color to rgb_to_grayscale() and if over 0.5f then it is lightish. If darkish leave the icon colors as is. If light then convert the icon colors to HSV, using rgb_to_hsv(), invert the V (so 1 becomes 0 and 0 becomes 1) then convert back to rgb and use that. This way white portions of the icon will be black, black will be white, and light green will be dark green, dark blue will become light blue, etc.

Okay, was talking to @WilliamReynish and the following might be a nice and easy solution that would do all we need and would not require any extra theme settings: The only real issue right now is that we are wanting the ability to select a light color for the background of the icons. That is now set in Themes / User Interface / Toolbar Item / Inner. Currently the value needs to be dark in order to give enough contrast with the colors of the icons. But we could allow that background color to dictate the color of the icons themselves. interface_icons.c icon_draw_size() has a btheme var. Use that to get the toolbar item inner color. Pass that along to BKE_icon_geom_rasterize(). Inside that function check to see whether that color is darkish or lightish. The best way to do that is to send the color to rgb_to_grayscale() and if over 0.5f then it is lightish. If darkish leave the icon colors as is. If light then convert the icon colors to HSV, using rgb_to_hsv(), invert the V (so 1 becomes 0 and 0 becomes 1) then convert back to rgb and use that. This way white portions of the icon will be black, black will be white, and light green will be dark green, dark blue will become light blue, etc.

Ankit Meel commented

2020-01-01 20:15:28 +01:00

I wrote the required for color inversion and it darkens the color when "inner" is light (>0.5f). This is the result of the diff I have attached: The color(say in last icon) is black even when it is expected to be a darker shade (of say green) because the original color had the maximum component out of RGBA over 200, which translates to over V >= 80 in HSV. 1-V should be edited to 1-V + 0.35 or close to see better color at the expense of darkness. toolbar_icon_dark.diff

Some comments I anticipate are:

not respecting const nature of const uint col.
whether the for loop used for separating RGB and A is endian-safe or not.
General formatting and code style guidelines.

Work to do: Making the icons change colour when in preferences, "inner" slider is changed.

I wrote the required for color inversion and it darkens the color when "inner" is light (>0.5f). This is the result of the diff I have attached: ![toolbarmodified.png](https://archive.blender.org/developer/F8254980/toolbarmodified.png) The color(say in last icon) is black even when it is expected to be a darker shade (of say green) because the original color had the maximum component out of RGBA over 200, which translates to over V >= 80 in HSV. `1-V` should be edited to `1-V + 0.35` or close to see better color at the expense of darkness. ![Screenshot 2020-01-02 at 00.32.27.png](https://archive.blender.org/developer/F8254988/Screenshot_2020-01-02_at_00.32.27.png) [toolbar_icon_dark.diff](https://archive.blender.org/developer/F8255007/toolbar_icon_dark.diff) Some comments I anticipate are: - not respecting `const` nature of `const uint col`. - whether the `for` loop used for separating RGB and A is endian-safe or not. - General formatting and code style guidelines. Work to do: Making the icons change colour when in preferences, "inner" slider is changed. ![image.png](https://archive.blender.org/developer/F8255010/image.png)

William Reynish commented

2020-01-01 21:07:17 +01:00

@ankitm Thanks for this! Could you post your patch via the patch tracker: https://developer.blender.org/differential/diff/create/ ?

Then add the User Interface group as a reviewer. Thanks!

@ankitm Thanks for this! Could you post your patch via the patch tracker: https://developer.blender.org/differential/diff/create/ ? Then add the User Interface group as a reviewer. Thanks!

blender-admin commented

2020-02-03 17:47:04 +01:00

This issue was referenced by 03a29090b5

This issue was referenced by 03a29090b57d087b7996dd25e1505537221233f9

Brecht Van Lommel commented

2020-02-03 18:43:28 +01:00

Changed status from 'Confirmed' to: 'Resolved'

Brecht Van Lommel closed this issue

2020-02-03 18:43:28 +01:00

Brecht Van Lommel self-assigned this 2020-02-03 18:43:28 +01:00

Brecht Van Lommel commented

2020-02-03 18:47:05 +01:00

Changed status from 'Resolved' to: 'Confirmed'

Brecht Van Lommel reopened this issue

2020-02-03 18:47:05 +01:00

Brecht Van Lommel commented

2020-02-03 18:47:05 +01:00

With the colors auto inverting at least the icons are readable, I'll leave this task open if we want to make it possible to pick the specific colors.

William Reynish commented

2020-02-03 19:02:32 +01:00

@brecht IMO I think it’s fine to close this task now. The main issue was addressed. I would no longer push for any changes in this area for now.

Brecht Van Lommel commented

2020-02-03 19:07:03 +01:00

Changed status from 'Confirmed' to: 'Resolved'

Brecht Van Lommel closed this issue

2020-02-03 19:07:03 +01:00

Harley Acheson commented

2020-02-03 19:14:52 +01:00

@brecht - AFAIK we wouldn't have a way of selecting specific colors since all we are getting at the point we read them is rgb values, so there is nothing that can be used to group them.

One big "to do: though, is caching. These items take a while to rasterize and we are only caching one copy. So the cached copies are invalidated if we ask for a different size or (with this patch) if we require a reversed one. So the cache should be fairly useless right now in many circumstances as it is quite easy to get a workspace where we see multiple sizes.

Another "to do" would be to support multiple differing tool areas. So a set of tools that are light on dark background in one editor, while reversed in another.

@brecht - AFAIK we wouldn't have a way of selecting specific colors since all we are getting at the point we read them is rgb values, so there is nothing that can be used to group them. One big "to do: though, is caching. These items take a while to rasterize and we are only caching one copy. So the cached copies are invalidated if we ask for a different size or (with this patch) if we require a reversed one. So the cache should be fairly useless right now in many circumstances as it is quite easy to get a workspace where we see multiple sizes. Another "to do" would be to support multiple differing tool areas. So a set of tools that are light on dark background in one editor, while reversed in another.

Sign in to join this conversation.

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Toolbar icon theming support #64177