Microsoft 365
Formerly Office 365, is a line of subscription services offered by Microsoft which adds to and includes the Microsoft Office product line.
4,364 questions
How to enable Addd-in icons with light theme style and dark theme style?
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(224.00000000000003, 91%, 31%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EJS%3C/text%3E%3C/svg%3E)
Joe Shao
0
Reputation points
Hello,
I am Joe, I am a designer preparing the icon design for our Microsoft Add-in which will be shown in the Ribbon menu.
By following the icon design guideline from Microsoft, I create the icon for light mode and dark mode, but when we doing the implementation, we found we only able to use 1 icon file for a button, but when I switch my Microsoft application (Word for example), the icons showing in Ribbon menu will be shown with dark theme as well.
My question is how can we apply our buttons with different theme style icon? Which document we can refer to?
Regards,
Joe
{count} votes
-
Ali AlEnezi 1,061 Reputation points2023-10-11T11:59:31.1033333+00:00 Hello Joe,
When it comes to Microsoft Office Add-ins, Microsoft uses Office.js and its associated manifest file to handle how the Add-in appears within Office applications. The Office theme (either light or dark) will determine the appearance of the ribbon, but for your icons, you'd typically provide high contrast icons which are visible on both light and dark themes.
To ensure your icon works with both light and dark themes:
Design for Contrast: Ensure the icon is visible on both light and dark backgrounds. Typically, this means using a neutral color for the icon itself (like white) with a transparent background.
Use SVG: If possible, use Scalable Vector Graphics (SVG) for your icons. SVGs have the advantage of scaling without loss of clarity, and you can also embed CSS within SVGs that could potentially allow for dynamic styling based on the theme. However, this might not always work with Office themes.
As for documentation:
- For general guidelines on creating Office Add-ins, including design considerations, refer to the official Office Add-ins documentation.
- For more specific guidelines related to the Office UI Fabric - the front-end framework for building experiences for Office and Office 365 - check the Office UI Fabric's GitHub repository and their official website.
- The manifest file schema reference can be beneficial. This schema defines how the Add-in integrates with Office clients, and you might find details on how icons are managed.
I hope this helps, and I wish you the best with your design project! If you have any other questions, feel free to ask.
Regards,
Ali
Sign in to comment