If you use AI-generated icons/illustrations in your app, you don't have to pay for both the light AND dark theme versions. There is this nice little CSS trick that makes the light version of the illustration also work in dark mode. (The video below shows the assets generated for one of our ecom customers that sells skincare products) So why do we need it and how do we use it? Well, when you connect your website to Aranx, one of the many things the platform does is research the categories of content that would produce high-opportunity (high intent / low competition) SEO content for your blog. Each of those categories is called a Content Strategy and is used by Aranx to research high-opportunity keywords and AI researched terms. We've learned that adding an illustration makes it much clearer to understand for our users. But since it is an image with a transparent background, it just doesn't work well when you use the dark theme. The obvious fix is to generate a second image for dark mode. BUT: 1. It doubles the AI cost. 2. Worse, it’s a different drawing. One prompt never gives the same image twice, so your light and dark cards don't 100% match. But there is a simple trick that solves it with 1 line of CSS: filter: invert(1) hue-rotate(180deg); In Tailwind dark:invert dark:hue-rotate-180 How does it works? invert() flips lightness, so dark ink on white becomes light ink on black. It also flips hue. Blue turns orange. Coral turns teal. • hue-rotate(180deg) spins the hue back. • Lightness stays flipped. • The colors return. • Transparent pixels stay transparent. • Only the lines flip, and the card color shows through. With gpt-image-2.5 that’s one parameter: background: "transparent" Just make sure to generate a PNG. Light mode: $0.12 Dark mode: $0 Every dark card matches its light twin exactly, because it’s the same file.

Today we got a clearer confirmation that AGI is here. 🧵