[Resolved] Colors not working in Safari 14.0.2 while in dark mode

[emanharout]

When on Safari 14.0.2 with dark mode enabled, colors don’t seem to work. Safari instead gives me random rgb colors I never specified *anywhere* in my site’s CSS or in prism.js.

For instance, if I go to view the inline code RaceCar on this post, the background color I have set appears fine in FireFox and Chrome, but not the latest version of Safari.

Safari instead has additional CSS I never added under the @media screen:

1. The extra CSS Safari adds is always based off the selector I specify. Here it’s p code, li code, if I changed that then it’ll update to reflect.
A. Not sure why only Safari is adding @media screen and replacing the colors I specified.
2. Adding fallback colors doesn’t solve the issue, Safari just replaces my colors.
3. !important doesn’t help.
4. Hard coded colors don’t work.
5. If curious, here’s a stackoverflow post with more details.

[David]

Hi there,

i checked the post provided on Chrome and Safari 14 ( and the latest Tech Preview 14.1) and this is the result i got:

Unless i am missing something – i cannot see the difference. Do you have any browser extensions enabled ?

[emanharout]

David, you are BRILLIANT! It was an extension after all! Thank you so much 🙂

[David]

Glad to hear that!

[Author]

Posts