search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.8k stars 192 forks source link

Extend --HDcolor custom MQ with color-gamut #443

Closed cbontems closed 12 months ago

cbontems commented 12 months ago

My MacBook pro has a p3 capable display, but returns false to the --HDcolor media query.

I ended up extending this media query this way: @custom-media --HDcolor (dynamic-range: high) or (color-gamut: p3);

This way, I can benefit from these gorgeous colors. I am probably not the only one in this situation, so if this sounds like a good update, I would be happy to submit a PR.

argyleink commented 12 months ago

oh dang, that stinks, yeah, let's fix that.

have you found if there's a Chrome bug about it? (assuming you're using Chrome here?) PR is welcome here 👍🏻

that is curious tho.. i have a macbook pro and dynamic-range is true for it's screen, curious why yours isn't.

cbontems commented 12 months ago

Hi Adam! Well, I am using Chrome, but this is not Chrome specific. Safari is the only one to return true. Chrome / Brave / Arc / Firefox all return false.

When using (color-gamut: p3), only Firefox keeps denying me the right to display nice colors...

I use a quite old but faithful 2018 15" mbp.

By the way, Chrome dev tools allow to emulate the color-gamut MQ, but not the dynamic-range MQ. Is there a specific reason for that?