While working on a client project last week, building an embeddable AI chat widget, I ran into a theming challenge. The client wanted the widget to support light and dark modes, but not based on the entire page’s theme. The widget needed to be self-contained, meaning its theme shouldn’t care what the rest of the site was doing.
Tailwind CSS, of course, has a well-known dark mode setup using the .dark class or the user’s system preference via media. But neither of those worked for this use case. I didn’t want to rely on the host page’s global classes or ask developers to manually toggle .dark on the `
` tag. ### So I went with `data-theme`, scoped right inside the widget. Let’s break down how I pulled this off, and why you might want to do the same. — ### The problem: Tailwind’s `.dark` class is global The traditional Tailwind setup expects dark mode to be triggered globally: “`html
