%3CLINGO-SUB%20id%3D%22lingo-sub-1095334%22%20slang%3D%22en-US%22%3EGetting%20Started%20with%20Microsoft%20Search%20and%20Dark%20Mode%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1095334%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20Microsoft%20365%20admin%20center%20and%20the%20Azure%20portal%20both%20support%20Dark%20Mode%2C%20the%20popular%20setting%20available%20in%20Windows%2010%2C%20MacOS%2C%20and%20most%20smartphones.%20Many%20users%20find%20it%20easier%20on%20their%20eyes%2C%20but%20there%20may%20be%20a%20dark%20side%20to%20this%20trend%3A%20Dark%20Mode%20and%20your%20company%20logo%20might%20not%20get%20along.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHere's%20an%20example%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20306px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164128iA99E3CF2649F177C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22contoso_v1.png%22%20title%3D%22contoso_v1.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20300px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164129i94806EF8A71DCF4F%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22contoso_v2.png%22%20title%3D%22contoso_v2.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20272px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164130iD3B2CF94A04B802F%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22contoso_v3.png%22%20title%3D%22contoso_v3.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3EFigure%201%20%E2%80%93%20Now%20you%20see%20it%2C%20now%20you%20don%E2%80%99t.%20Same%20logo%2C%20three%20different%20background%20colors.%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20885px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164131iEEA29FB0E9298EAF%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Figure%202.png%22%20title%3D%22Figure%202.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3EFigure%202%20%E2%80%93%20As%20above%2C%20except%20this%20time%20it%E2%80%99s%20a%20white%20logo%20on%20a%20light-colored%20background%20that%20doesn%E2%80%99t%20show%20up.%20%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20Figure%202%2C%20we%20see%20a%20(mostly)%20white%20logo%20designed%20for%20use%20in%20Dark%20Mode%2C%20set%20over%20three%20different%20background%20colors.%20It's%20only%20visible%20against%20a%20light-colored%20background.%20The%20logos%20shown%20in%20Figures%201%20and%202%20are%20PNGs%20with%20the%20background%20color%20set%20to%20transparent.%20(GIF%20images%20have%20a%20similar%2C%20albeit%20more%20limited%20color%20capability.)%20Thus%2C%20when%20a%20white%20logo%20is%20placed%20on%20a%20white%20background%20(such%20as%20a%20sign-in%20dialog%20box)%20or%20light%20gray%20panel%20(like%20a%20search%20results%20page)%2C%20it%E2%80%99s%20either%20totally%20invisible%20or%20nearly%20so.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOne%20solution%20is%20to%20use%20a%20logo%20on%20a%20solid%20background%20color%2C%20as%20shown%20in%20Figure%203.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20895px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164132i8CA601DB98809A34%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Figure%203.png%22%20title%3D%22Figure%203.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3EFigure%203%20%E2%80%93%20Same%20logo%2C%20but%20with%20a%20solid%20background%20color.%26nbsp%3B%20%26nbsp%3B%3C%2FEM%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAnother%20approach%20is%20to%20take%20the%20middle%20ground%20with%20a%20neutral%20gray%20color%20that%20lacks%20contrast%20but%20remains%20legible.%20Keep%20in%20mind%2C%20however%2C%20that%20low%20contrast%20designs%20can%20present%20accessibility%20issues%20for%20some%20users.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20893px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164133iCEB3EE70C58A509B%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Figure%204.png%22%20title%3D%22Figure%204.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3EFigure%204%3C%2FEM%3E%20%3CEM%3E%E2%80%93%20Beware%20of%20low-contrast%20combinations.%20They%20may%20present%20accessibility%20challenges%20to%20the%20vision%20impaired.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3EAnother%20possible%20solution%20is%20to%20outline%20the%20image%20in%20a%20color%20that%20helps%20it%20stand%20out.%20Figure%205%20shows%20the%20same%20logo%E2%80%94still%20on%20a%20transparent%20background%2C%20but%20with%20a%20dark%20outline%20added.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20895px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164134iD1D153AC8AFFF378%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Figure%205.png%22%20title%3D%22Figure%205.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3EFigure%205%20%E2%80%93%20Set%20your%20outline%20color%20just%20a%20little%20darker%20than%20the%20darkest%20background%20color%20on%20which%20you%E2%80%99ll%20be%20using%20the%20image%20and%20the%20logo%20will%20really%20pop%20off%20the%20page.%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EA%20word%20of%20caution%20here.%20Your%20company%E2%80%99s%20branding%20guidelines%20may%20forbid%20the%20alteration%20of%20colors%2C%20the%20addition%20of%20outlines%2C%20or%20other%20embellishments%20to%20a%20logo%20or%20the%20type%20associated%20with%20it.%20Check%20your%20guidelines%20and%20be%20a%20brand%20hero!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20situation%20may%20be%20trickier%20when%20a%20logo%20has%20multiple%20colors.%20In%20Figure%206%2C%20we%E2%80%99re%20using%20a%20transparent%20background%20for%20our%20multicolored%20logo%20and%20adapting%20the%20background%20colors%20as%20needed.%20Still%2C%20it%E2%80%99s%20hard%20to%20argue%20that%2C%20despite%20our%20best%20efforts%20at%20keeping%20the%20colors%20on%20brand%2C%20the%20logo%20on%20the%20dark%20background%20doesn%E2%80%99t%20show%20up%20quite%20as%20well.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20902px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164135i4B3B022B80BBA865%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Figure%206.png%22%20title%3D%22Figure%206.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3EFigure%206%20%E2%80%93%20No%20outlines%20here.%20This%20logo%20keeps%20brand%20colors%20intact%20across%20both%20light-%20and%20dark-colored%20backgrounds.%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3EThe%20ultimate%20solution%20is%20to%20have%20separate%20logos%20for%20light%20and%20dark%20modes.%20Fortunately%2C%20both%20Microsoft%20Search%20and%20the%20M365%20admin%20center%20support%20this%20feature%2C%20as%20described%20in%20part%202%20of%20this%20article%20(coming%20soon).%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20600px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164137iE7C3E9BCB404F2DB%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Figure%207%201.png%22%20title%3D%22Figure%207%201.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20293px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F164138i5B55F283BDC5CBF7%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Figure%207%202.png%22%20title%3D%22Figure%207%202.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3EFigure%207%20%E2%80%93%20Here%E2%80%99s%20how%20light%20mode%20(left%20and%20center)%20and%20dark%20mode%20will%20look%20on%20various%20background%20colors.%3C%2FEM%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1095334%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EMicrosoft%20Search%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1097182%22%20slang%3D%22en-US%22%3ERe%3A%20Getting%20Started%20with%20Microsoft%20Search%20and%20Dark%20Mode%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1097182%22%20slang%3D%22en-US%22%3E%3CP%3EGreat%20to%20see%20support%20for%26nbsp%3B%3CSPAN%3Eseparate%20logos%20for%20light%20and%20dark%20modes%20coming%20to%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3EMicrosoft%20Search%20and%20the%20Microsoft%20365%20admin%20center.%20Looking%20forward%20to%20part%202!%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1727884%22%20slang%3D%22en-US%22%3ERe%3A%20Getting%20Started%20with%20Microsoft%20Search%20and%20Dark%20Mode%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1727884%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%20thanks%20for%20this%20article%20but%20wondering%20about%20%22%3CSPAN%3EM365%20admin%20center%20support%20this%20feature%22%3F%3C%2FSPAN%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ENo%20it%20doesnt%2C%20unfortuntely%2C%20at%20least%20not%20with%20many%20EU%20tenants%20as%20far%20I%20can%20tell.%20Or%20is%20it%20a%20%22hidden%22%20feature%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ECheers%2C%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EPeter%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

The Microsoft 365 admin center and the Azure portal both support Dark Mode, the popular setting available in Windows 10, MacOS, and most smartphones. Many users find it easier on their eyes, but there may be a dark side to this trend: Dark Mode and your company logo might not get along.

 

Here's an example:

 

contoso_v1.pngcontoso_v2.pngcontoso_v3.png

 

Figure 1 – Now you see it, now you don’t. Same logo, three different background colors.

 

Figure 2.png

 

Figure 2 – As above, except this time it’s a white logo on a light-colored background that doesn’t show up.

 

In Figure 2, we see a (mostly) white logo designed for use in Dark Mode, set over three different background colors. It's only visible against a light-colored background. The logos shown in Figures 1 and 2 are PNGs with the background color set to transparent. (GIF images have a similar, albeit more limited color capability.) Thus, when a white logo is placed on a white background (such as a sign-in dialog box) or light gray panel (like a search results page), it’s either totally invisible or nearly so.

 

One solution is to use a logo on a solid background color, as shown in Figure 3.

 

Figure 3.png

 

Figure 3 – Same logo, but with a solid background color.    

 

Another approach is to take the middle ground with a neutral gray color that lacks contrast but remains legible. Keep in mind, however, that low contrast designs can present accessibility issues for some users.

 

Figure 4.png

 

Figure 4 – Beware of low-contrast combinations. They may present accessibility challenges to the vision impaired.

Another possible solution is to outline the image in a color that helps it stand out. Figure 5 shows the same logo—still on a transparent background, but with a dark outline added.

 

Figure 5.png

 

Figure 5 – Set your outline color just a little darker than the darkest background color on which you’ll be using the image and the logo will really pop off the page.

 

A word of caution here. Your company’s branding guidelines may forbid the alteration of colors, the addition of outlines, or other embellishments to a logo or the type associated with it. Check your guidelines and be a brand hero!

 

The situation may be trickier when a logo has multiple colors. In Figure 6, we’re using a transparent background for our multicolored logo and adapting the background colors as needed. Still, it’s hard to argue that, despite our best efforts at keeping the colors on brand, the logo on the dark background doesn’t show up quite as well.

 

Figure 6.png

 

Figure 6 – No outlines here. This logo keeps brand colors intact across both light- and dark-colored backgrounds.


The ultimate solution is to have separate logos for light and dark modes. Fortunately, both Microsoft Search and the M365 admin center support this feature, as described in part 2 of this article (coming soon).

 

Figure 7 1.pngFigure 7 2.png

 

Figure 7 – Here’s how light mode (left and center) and dark mode will look on various background colors.

2 Comments
Frequent Contributor

Great to see support for separate logos for light and dark modes coming to Microsoft Search and the Microsoft 365 admin center. Looking forward to part 2!

New Contributor

Hi, thanks for this article but wondering about "M365 admin center support this feature"? 

No it doesnt, unfortuntely, at least not with many EU tenants as far I can tell. Or is it a "hidden" feature?

 

Cheers,

Peter