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

[stampycode]

Steps to reproduce

Link to live example: https://mui.com/material-ui/react-app-bar/#enable-color-on-dark

Steps:

1. The theme sets the AppBar colour to "#1976d2".
2. The AppBar actually has colour "#2582D6".
3. If you change the colour to "#000" the AppBar now has colour "#171717".
4. If your remove the color prop and set sx={{background:'#000'}} instead, the AppBar is now "#000" as expected.

I'm using the 'Digital Colour Meter' in MacOS to analyse these colours, using 'sRGB' mode.

Current behavior

The AppBar currently sets a background colour which is lighter than the selected theme colour.

There's nothing in the documentation to suggest why this is happening nor what sub-palette of "primary" the AppBar is using, nor how to make the AppBar actually use the correct colour as defined in the palette.

Expected behavior

The AppBar should be the colour defined in the palette, or the documentation should specify which sub-palette (eg. primary.something) the AppBar is using.

Context

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

Your environment

Just use the online interactive documentation, the bug exists on the live mui.com site.
https://mui.com/material-ui/react-app-bar/#enable-color-on-dark

Search keywords: AppBar Theme Color

[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.

[farhanmian]

Yes, you are right, the issue is background-image: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))
If we remove this it's showing the correct color, So how can I fix this? Should I take a pull of the code and fix this/remove bg-img and then push the code?

[

mui.mp4

](url)

[stampycode]

Initially I'd suggest documenting the fact in the web docs if it is actually intended behaviour. I'm not sure for what purpose or underlying "thematic" reason the linear gradient exists, or if this is a common pattern throughout MUI... If it isn't intended behaviour then it should be removed, but perhaps only when a background colour is defined?