SOLVED
Home

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
Frequent 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!

7 Replies

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.

 

1.pngTwitter

 

2.pngFacebook

 

3.pngOutlook (expected it to be blue not white)

 

4.pngSpotify Web Player

 

6.pngAmazon

 

7.pngInstagram

 

8.pngIMDB

 

5.pngTwich

 

 

 

@HotCakeX those look awesome!

Yeah, makes me wanna add all of the websites as an app :))
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. :)

@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!

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

@William Devereux 

Thanks!!! Spotify and Twitter look great