Using a different set of icons in the ribbon menu for the light/dark theme in the MS Word desktop version.

[mikalai-sokarau]

Message from office-js bot:
We’re closing this issue because it has been inactive for a long time. We’re doing this to keep the issues list manageable and useful for everyone. If this issue is still relevant for you, please create a new issue.
Thank you for your understanding and continued feedback.

Dear Office-js team, our department is working on creating a Word add-in and would like to change a color of the icons used in the ribbon menu for different Word themes.
Our designer drew the icons in accordance with the principles from the documentation (https://docs.microsoft.com/en-us/office/dev/add-ins/design/add-in-icons-monoline), icons were added to the manifest file and we can see them in the ribbon menu. In the white/colorful/dark gray themes icons look awesome, please see:

But for the dark theme some icons are barely visible:

At the same time, icons used for native Word's features look good regardles of the theme:

An example of the icons and the manifest file we use can be found in the following repository: https://github.com/mikalai-sokarau/word-js-issue

Screenshots taken from:
Word version: Microsoft® Word for Microsoft 365 MSO (Version 2203 Build 16.0.15028.20242) 64-bit
Windows version: Windows 10 Pro, 19044.1706 OS build, version 21H2

In this regard, I have a question - am I missing something trying to create (or probably add to the manifest file) icons which will stay accessible and sufficiently visible for users using different Word themes?

Thank you in advance for your time and attention to this question!

[trigurl]

Hello, thank you for this feedback. The timing is of your question is great as we are actively working on the ability to make add-in icons look better on various themes. Icons that are native to the application have different behaviors as you have noticed.
We are brainstorming through some ideas right now. I see that you hire your own designer to help you with your add-ins icons, so you had planned on having an icon for each Office theme? We are thinking of ideas to reduce the number of icons that an add-in developer would be required to provide in order to make the buttons look better in different themes.

[mikalai-sokarau]

Hi Angela, thanks for your prompt answer!
We are looking for any working way to support different themes. If we need to prepare a different set of icons with inversed colors only for the dark theme, but this solves the problem - our team will gladly do it.
If there are other options (or workarounds) that would equally support all the themes Word has at the moment - we will happily accept any of them.
If there is no stable solution yet - please keep this issue updated when such an option appears!

[trigurl]

Hi Mikalai, currently there is no workaround. So that is why we are actively working on a design for this. A quick question, do you like the ability to strictly control every aspect of your icon design? What if we had the ability to allow add-in developers to specify an icon for different modes? Like default, dark and light modes? Maybe even a grey mode?

[mikalai-sokarau]

Angela, it would be nice to leave a default solution that would work for all the themes as it works now, but at the same time if it's possible to introduce a specific attribute to the icon element which will contain a name of the theme and will replace the icon used only in that particular theme, it would be convenient enough to use, something like:

<Icon>
	<bt:Image size="16" resid="Circle.Default.16x16"/> // Default icon for all themes
	<bt:Image size="32" resid="Circle.Default.32x32"/>
	<bt:Image size="16" resid="Circle.Dark.16x16" theme="Dark" /> // Icon shown only in the dark theme
	<bt:Image size="32" resid="Circle.Dark.32x32" theme="Dark,Grey" /> // Icon shown in the dark and grey themes
</Icon>

or

<Icon> // Default icon for all themes
	<bt:Image size="16" resid="Circle.Default.16x16"/>
	<bt:Image size="32" resid="Circle.Default.32x32"/>
</Icon>
<Icon theme="Dark"> // Icon shown only in the dark theme, otherwise the default icon is shown
	<bt:Image size="16" resid="Circle.Dark.16x16"/>
	<bt:Image size="32" resid="Circle.Dark.32x32"/>
</Icon>
<Icon theme="Grey"> // Icon shown only in the grey theme, otherwise the default icon is shown
	<bt:Image size="32" resid="Circle.Dark.32x32"/>
</Icon>

[trigurl]

Our team has discussed auto recoloring as an option in order to have just one icon. Office doesn't restrict the colors on developer icons, so recoloring might not work for every add-in (some developers don't like it when we change the branding of their icon).