I spent way longer than I'd like to admit chasing a dark mode bug that made zero sense on paper.
I'm building WidgetForge, a drop-in AI chat widget you can paste into any site — static HTML or Next.js, pick a theme, done. Four themes, one shared JS core. Nothing exotic.
Except one small piece of it kept breaking dark mode, and I couldn't figure out why.
The setup
Every message in the chat has little icons — a voice note badge, status icons, that kind of thing. I wanted those to invert properly in dark mode, so I wrote the obvious CSS:
