SuiteBar renders incorrect with custom theme in Office 365

Question

When creating an spcolor-file (and a composed look bound to this file) we see an error in the rendering in our Office 365 tenant.

I think the issue is related to the new SuiteBarin Office 365 (App Launcher). The problem is that the App Launcher icon turns to the same color as the whole SuiteBar and hence there is no indication that there is an icon there to be clicked.

To clarify, this is how the icon should look:

But as soon as we apply a custom theme, the grey color surrounding the nine dots turns to the same color as the background of the suite bar.

Can this be fixed with CSS, or is there an even better solution?

Answer 1

I'm afraid there is no better solution than to use CSS:

To fix the icon in the left corner via CSS is pretty much straight forward because it's no icon is just a character out of the Office 365 icon font.

#O365_MainLink_NavMenu{
    color: lime;
}

The small css will turn the icons into lime. (OK it doesn't look nice but shows perfectly how they are colored).

Fonts have a huge benefit over images because they can be customized in any color you like to have without changing the image. The icon fonts also save bandwidth and are widely supported. Microsoft added the font support for custom font in IE 5.5 but the fonts had to be in a Microsoft specific format at this time.

Just in case you have a problem with the gear icon too. Here is the code to change those too: /* Gear icon in suite bar */ #O365_MainLink_Settings{ color: lime; }

 /* Question mark in suite bar */
 #O365_MainLink_Help{
     color: lime;
 }

This will then look like this:

Another option to brand those icons all at once is to assign a color to the specific class.

button.o365cs-nav-button{
    color: lime;
}

This will only align with the buttons. The text won't be affected. Remove the button in front of .o365cs-nav-button and you set the color for the text all elements too.