[material-ui][AppBar] Background color is lighter than what the theme defines about material-ui

[stampycode]

It appears to be the 'backgroundImage' to blame, setting sx={{backgroundImage:'none'}} clears the problem.

[ZeeshanTamboli]

I see it working as expected:

issue-41602.mp4

[stampycode]

You're not checking the colour of the element with a colour picker, you're just reading the css value. If theres a`filter` or other element layer affecting the colour of the object on screen then the colour on screen won't match thebcss value either. Use a desktop colour picker to check the actual colour of the object on your screen; you're not following the reproduction steps as listed in the report.

…

-------- Original Message --------

On 30/03/2024 05:25, Zeeshan Tamboli wrote: I see it working as expected: https://github.com/mui/material-ui/assets/20900032/6a6c9a4c-3b8b-4387-ae56-fe1e84e790d2 — Reply to this email directly, [view it on GitHub](#41602 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/ABK563F2IILP73HXFSJISIDY2ZEGFAVCNFSM6AAAAABFDAPVHKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRXHEZDGNRVGA). You are receiving this because you authored the thread.Message ID: ***@***.***>

[stampycode]

@ZeeshanTamboli See this screenshot, the CSS shows the correct colour, the on screen colour picker shows it is not the correct colour.

[ZeeshanTamboli]

@stampycode Apologies for not following the steps initially. This is the first time I've encountered this scenario. Isn't what's displayed in the browser's CSS correct? I'm using Windows OS, so I don't have access to a color picker tool.

If theres afilter or other element layer affecting the colour of the object on screen then the colour on screen won't match thebcss value either.

I'm unsure why there's a discrepancy between the color picker and CSS due to some "filter". However, I'll mark it as a bug.

Context

Trying to set the theme of my MUI app to use specific colours set via theme.

I'm curious why you used a color picker tool for this demo. Did you notice that the color defined in the theme wasn't being applied?

[stampycode]

@ZeeshanTamboli, no problem at all! I noticed it when I saw two components next to each other that were supposed to have the same colour but were clearly different, prompting me to look harder.
For Windows I recommend this colour picker tool published by Microsoft: https://learn.microsoft.com/en-us/windows/powertoys/color-picker

If you set sx={{backgroundImage:'none'}} on the AppBar then the problem goes away - so I'm assuming the problem is that there's a partially transparent background gradient effect on the AppBar; maybe the AppBar gradient should be set to off if the background colour is applied, or if there needs to be a gradient then it should only affect the edges - the centre of the image should at least have the colour as defined by the site palette...

I understand the need for some components have colour variation for a non-flat appearance, but straying from a defined colour palette which might be corporate-mandated in many cases, without being documented, isn't helpful or obvious.