SOLVED

Info on the app colored title bars

%3CLINGO-SUB%20id%3D%22lingo-sub-1043739%22%20slang%3D%22en-US%22%3EInfo%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1043739%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20there%20everyone%2C%3C%2FP%3E%3CP%3EAfter%20the%20version%26nbsp%3B%3CSPAN%3E80.0.351.0%20update%2C%20I%20noticed%20that%20the%20title%20bars%20of%20the%20Apps%20installed%20through%20Edge%20show%20a%20colored%20title%20bar%2C%20which%20looks%20super%20cool...%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EFor%20example%3A%20YouTube%20has%20a%20red%20bar%20now%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159727iC28B9DDE842AE52F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3ESimilarly%20for%20the%20other%20apps%20installed%20through%20Edge%20also%20have%20a%20colored%20bar.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20I%20wanted%20to%20know%20here%20is%20that%20if%20the%20team%20is%20deciding%20on%20the%20colors%20of%20those%20bars%2C%20or%20Edge%20is%20picking%20up%20the%20colors%20through%20an%20algorithm%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThat%20looks%20super%20dope%20though...%3C%2FP%3E%3CP%3EThanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1043866%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1043866%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%3CSTRONG%3EThat's%20really%20awesome!%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3EI%20just%20tried%20it%20on%20popular%20websites%20and%20except%20for%20Outlook%20that%20has%20an%20unexpected%20title%20bar%20color%2C%20the%20rest%20of%20them%20are%20working%20fine%20as%20expected%20and%20nicely.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159731iC543FCF3A9A1A544%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%221.png%22%20title%3D%221.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3ETwitter%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159730i51652693AC6C282C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%222.png%22%20title%3D%222.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EFacebook%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159735i166A7E0F2F0F4F87%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%223.png%22%20title%3D%223.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EOutlook%20(expected%20it%20to%20be%20blue%20not%20white)%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159732i8BA56F02E5B8CD1D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%224.png%22%20title%3D%224.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3ESpotify%20Web%20Player%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159736i3BABADA47F8FB660%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%226.png%22%20title%3D%226.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EAmazon%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159734i53E2D356614B78BB%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%227.png%22%20title%3D%227.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EInstagram%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159737iB81461BD5CF3752C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%228.png%22%20title%3D%228.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EIMDB%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F159738i3D641F32BA216275%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%225.png%22%20title%3D%225.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3ETwich%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1043943%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1043943%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX%3C%2FA%3E%26nbsp%3Bthose%20look%20awesome!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1044742%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1044742%22%20slang%3D%22en-US%22%3EYeah%2C%20makes%20me%20wanna%20add%20all%20of%20the%20websites%20as%20an%20app%20%3A))%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1044945%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1044945%22%20slang%3D%22en-US%22%3E%3CP%3EYes%2C%20this%20is%20a%20new%20feature%20we're%20working%20on!%20Now%2C%20when%20you%20install%20a%20site%20as%20an%20app%2C%20we'll%20automatically%20theme%20the%20title%20bar%20based%20on%20the%20site's%20colors.%20This%20happens%20automatically%2C%20but%20as%20always%20web%20developers%20can%20specify%20their%20own%20color%20and%20override%20this%20automatic%20theming.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI'm%20glad%20you%20all%20like%20it.%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1044951%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1044951%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F17283%22%20target%3D%22_blank%22%3E%40William%20Devereux%3C%2FA%3E%26nbsp%3Bindeed%20a%20great%20feature...%3C%2FP%3E%3CP%3Elike%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX%3C%2FA%3E%26nbsp%3Bsaid%2C%20I%20want%20to%20make%20all%20of%20the%20sites%20into%20apps%20to%20see%20this%20theming...%3Aface_with_tears_of_joy%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20the%20feature!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1044967%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1044967%22%20slang%3D%22en-US%22%3E%3CP%3EThat's%20awesome!%20Is%20there%20information%20posted%20somewhere%20about%20how%20the%20title%20bar%20color%20is%20determined%20from%20the%20site%20colors%3F%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F17283%22%20target%3D%22_blank%22%3E%40William%20Devereux%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1054356%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1054356%22%20slang%3D%22en-US%22%3EThanks!!!%20Spotify%20and%20Twitter%20look%20great%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1170217%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1170217%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F17283%22%20target%3D%22_blank%22%3E%40William%20Devereux%3C%2FA%3E%26nbsp%3B%20Will%20there%20be%20anyway%20for%20the%20end%20user%20to%20change%20the%20color%20of%20the%20title%20bar%3F%20We%20use%20MS%20Dynamics%20365%20and%20for%20some%20reason%20when%20we%20install%20this%20site%20as%20an%20app%20it%20uses%20red%20which%20doesn't%20really%20mesh%20with%20the%20Dynamics%20365%20theme.%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%222020-02-12%20(2).png%22%20style%3D%22width%3A%20566px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F170951i3515B4DE6015BDAC%2Fimage-dimensions%2F566x219%3Fv%3D1.0%22%20width%3D%22566%22%20height%3D%22219%22%20title%3D%222020-02-12%20(2).png%22%20alt%3D%222020-02-12%20(2).png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1180157%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1180157%22%20slang%3D%22en-US%22%3EWilliam%2C%20this%20looks%20good%20in%20installed%20web%20apps.%20So%20good%2C%20that%20I%20think%20Edge%20should%20bring%20this%20to%20the%20browser%20itself%2C%20not%20just%20installed%20apps.%20For%20example%2C%20add%20a%20toggle%20in%20Settings%20under%20Appearance%20to%20%22Use%20adaptive%20colors%20in%20title%20bar%22.%20This%20wouldn't%20suit%20everyone%2C%20but%20some%20people%20would%20love%20it%2C%20and%20you'd%20have%20another%20thing%20setting%20you%20apart%20from%20Chrome.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1403797%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1403797%22%20slang%3D%22en-US%22%3E%3CP%3ECan%20a%20user%20disable%20the%20colored%20title%20bar%3F%26nbsp%3B%20Some%20sites%20(such%20as%20Gmail)%20give%20a%20red%20title%20bar%20that%20is%20distracting%20and%20alarming%20(being%20red).%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1404977%22%20slang%3D%22en-US%22%3ERe%3A%20Info%20on%20the%20app%20colored%20title%20bars%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1404977%22%20slang%3D%22en-US%22%3ENo%20option%20as%20of%20now%20I%20guess.%3C%2FLINGO-BODY%3E
Highlighted
Super Contributor

Hi there everyone,

After the version 80.0.351.0 update, I noticed that the title bars of the Apps installed through Edge show a colored title bar, which looks super cool...

For example: YouTube has a red bar now:

clipboard_image_0.png

Similarly for the other apps installed through Edge also have a colored bar.

 

What I wanted to know here is that if the team is deciding on the colors of those bars, or Edge is picking up the colors through an algorithm?

 

That looks super dope though...

Thanks!

11 Replies
Highlighted

Hi,

That's really awesome!

I just tried it on popular websites and except for Outlook that has an unexpected title bar color, the rest of them are working fine as expected and nicely.

 

TwitterTwitter

 

FacebookFacebook

 

Outlook (expected it to be blue not white)Outlook (expected it to be blue not white)

 

Spotify Web PlayerSpotify Web Player

 

AmazonAmazon

 

InstagramInstagram

 

IMDBIMDB

 

TwichTwich

 

 

 

Highlighted

@HotCakeX those look awesome!

Highlighted
Yeah, makes me wanna add all of the websites as an app :))
Highlighted
Solution

Yes, this is a new feature we're working on! Now, when you install a site as an app, we'll automatically theme the title bar based on the site's colors. This happens automatically, but as always web developers can specify their own color and override this automatic theming.

 

I'm glad you all like it. :)

Highlighted

@William Devereux indeed a great feature...

like @HotCakeX said, I want to make all of the sites into apps to see this theming...:face_with_tears_of_joy:

 

Thanks for the feature!

Highlighted

That's awesome! Is there information posted somewhere about how the title bar color is determined from the site colors?

@William Devereux 

Highlighted
Thanks!!! Spotify and Twitter look great
Highlighted

@William Devereux  Will there be anyway for the end user to change the color of the title bar? We use MS Dynamics 365 and for some reason when we install this site as an app it uses red which doesn't really mesh with the Dynamics 365 theme.  

 

Thanks

 

2020-02-12 (2).png

Highlighted
William, this looks good in installed web apps. So good, that I think Edge should bring this to the browser itself, not just installed apps. For example, add a toggle in Settings under Appearance to "Use adaptive colors in title bar". This wouldn't suit everyone, but some people would love it, and you'd have another thing setting you apart from Chrome.
Highlighted

Can a user disable the colored title bar?  Some sites (such as Gmail) give a red title bar that is distracting and alarming (being red).  

Highlighted
No option as of now I guess.