PNG in <img> tag in dark mode in Chrome-CodePudding

For some reason Chrome is modifying my PNGs in dark mode and I cannot fix it in CSS... I tried resetting the filter, but to no avail

        filter: brightness(1) contrast(1)  grayscale(1)  invert(1) saturate(1) hue-rotate(0);

Source:

Dark mode:

Any idea?

CodePudding user response：

You could use the element for you image. Inside the element you can use elements. These source elements can use a media query, like in CSS, to determine if it should show based on the query.

In your case you could check the prefers-color-scheme: dark query to see if dark mode is enabled.

If it is not enabled then the default src on the image is used. If it is enabled then the srcset on the element will be used as the new value for the src on the image.

<picture>
  <source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
  <img src="light-image.jpg" alt="Animated wave shape">
</picture>

CodePudding user response：

try to add !important to your filter property.

filter: none !important;