blog icon indicating copy to clipboard operation
blog copied to clipboard

Published 20 hours ago • verified publisher icon kyleshevlin

Image Component that will invert colors based on Theme

Open kyleshevlin opened this issue 4 years ago • 1 comments

I think it'd be dope to add an image component that will automatically invert the colors of an image based on the theme.

I think the way to do this is to add a CSS Custom Property aka CSS Variable combined with a prop. If an image is deemed invertable, when the theme indicates that the var is inverted it sets the correct style.

kyleshevlin avatar Feb 06 '21 19:02 kyleshevlin

An alternative is to make an Image component that takes two img sets and shows them based on theme. This is probably simpler.

kyleshevlin avatar Sep 04 '23 17:09 kyleshevlin

This has been resolved in #141. It was easy to make an Image Astro component that takes an invertable prop and uses dark:invert to invert the image.

kyleshevlin avatar Jan 20 '24 23:01 kyleshevlin