Angular looks different between browsers | Angular Community | Page 1

tough warren Feb 7, 2023, 4:56 AM

#

I use Firefox, but I know not everyone does, so I test my products to make sure they look good across browsers. It is more of a formality, I don't really expect to find something too big, maybe just a weird offset padding or smth. For this smaller project where UI isn't everything, (small product for internal distribution), I decided to use Angular Material on this project to save time. I chose the Indigo & Pink as the blue looked really good for me, on my project. Anyways, after a little bit of work I open up Chrome as I wanted some of the developer tools and the colors looked completely different. The image I was seeing on Chrome more closely resembled a purple and not the nice blue I had seen in Firefox. I quickly went back and did a sanity check, and dragged Firefox from my second monitor too my first and sure enough they are very different. The only possible reason I could think of is that Chrome and Angular are made by the same company and as such they do things a little different. And yes, I do know what indigo is and yes it does more closely resemble what I see in Chrome, but I have grown quite fond of the image delivered in Firefox and would like to know how to get that. Image is in the thumbnail for your comparison.

#

is this only possible through custom themes or is there a setting I need to disable

grand flower Feb 7, 2023, 5:20 AM

#

You toggle the active color palette on that website in the web page, which means the browser is responsible for storing and remembering the preference you set

You opened it up in a different a browser, so you got the default theme again…

#

You just need to activate indigo in the top right corner, between the version and GitHub link

tough warren Feb 7, 2023, 2:06 PM

#

Yah both have indigo activated

verbal aurora Feb 7, 2023, 2:12 PM

#

Just checked, but I don't see any difference between chrome and firefox. have you checked other websites for differences?

#

Also inspected the element: both use #3f51b5 for background color of the header

tough warren Feb 7, 2023, 3:02 PM

#

weird...

#

same theme, same monitor

#

maybe I have smth messed up in settings

#

on my laptop now and sure enough Firefox and Chrome are nearly identical

#

so the problem stems from chrome on my desktop, alr

grand flower Feb 7, 2023, 5:52 PM

#

I would entirely suspect that it’s something to do with the browser instance

Because while it’s possible there could be an issue where the same code shows different from A to B, that’s not just a hue shift away from Indigo, that’s a spot on match for the default color theme, meaning you may have flipped the switch but I don’t think it took/did anything

Perhaps it has to do with the way that they persist the preference? Do you have your chrome browser on that machine setup to block anything like local storage or cookies perhaps?

tough warren Feb 7, 2023, 6:45 PM

#

grand flower I would entirely suspect that it’s something to do with the browser instance Be...

my chrome installation is factory, I don't use the browser

#

I pulled the HEX for each using the inspect element and sure enough they are the same, here it is in a color picker on Google. Left is Firefox, right is Chrome

#

#

this is the amazon footer, something is seriously wrong with Chrome

#

charred nymph Feb 7, 2023, 6:53 PM

#

Quite sure Chrome is using a different color profile.
What version is it?

frail kelp Feb 7, 2023, 6:53 PM

#

It can happen when the browser applies (or not) OS color settings

#

I have that with some apps too

charred nymph Feb 7, 2023, 6:53 PM

#

Yes.
FF almost sure take system color profile.

frail kelp Feb 7, 2023, 6:54 PM

#

And anything that triggers HDR is chaos

#Angular looks different between browsers