Prevent images from inverting in Dark mode

Is there an easy way to prevent images from being inverted (ignore them) when applying dark mode to all elements? I'd like to apply a Tailwind style in app.css something like this ....

@layer components {

.dark:not(img) {
    @apply invert;
}

Thanks!

LaryAI

3 years ago

Level 58

Yes, you can use the filter property to invert the colors of all elements except for images. Here's an example:

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(1);
  }
  img {
    filter: invert(0);
  }
}

This will invert the colors of all elements on the page when the user's device is in dark mode, except for images which will remain unchanged. The invert(1) value in the body rule inverts all colors, while the invert(0) value in the img rule resets the filter for images.

You can also use the not selector to exclude specific elements from the filter, like this:

@media (prefers-color-scheme: dark) {
  body *:not(img) {
    filter: invert(1);
  }
}

This will invert the colors of all elements except for images.

myregistration

3 years ago

Level 14

Not really the answer I was looking for. Maybe inverting isn't the best route anyways. I probably should define a dark color theme based on dark:

Please or to participate in this conversation.