fix(playground): gate Tailwind dark: variant on the theme class

MarioCadenas · MarioCadenas · commit a077ba8cc64b · 2026-04-27T15:27:09.000+02:00
appkit-ui's globals.css already defines dark-theme tokens via two paths
— an explicit `.dark` class on &lt;html&gt;, and `@media (prefers-color-scheme:
dark)` guarded by `:root:not(.light)` so an explicit `.light` class
wins. Tailwind v4's default `dark:` variant, however, is purely media
driven. That mismatch shows up when the user forces light via the
playground's theme selector while their OS is in dark mode: the
bootstrap script sets `&lt;html class="light"&gt;`, --card/--background
correctly resolve to light, but every `dark:*` utility keeps firing
under the media query — cards end up painted with dark-mode
backgrounds layered under light-mode chrome.

Declare a playground-local `@custom-variant dark` that mirrors the
token logic exactly: fire when the element is (or descends from)
`.dark`, or when `prefers-color-scheme: dark` matches and no `.light`
ancestor is present. This rebinds every `dark:*` utility to respect
the theme selector's forced choice, keeping the rest of appkit-ui's
consumers — which don't ship the bootstrap script — on the existing
media-only behaviour.
diff --git a/apps/dev-playground/client/src/index.css b/apps/dev-playground/client/src/index.css
@@ -1 +1,40 @@
 @import "@databricks/appkit-ui/styles.css";
+
+/**
+ * Realign Tailwind v4's `dark:` variant with appkit-ui's theme tokens.
+ *
+ * `packages/appkit-ui/.../globals.css` defines two paths into dark theme:
+ *   - An explicit `.dark` class on <html> (wins unconditionally).
+ *   - `@media (prefers-color-scheme: dark)` on `:root:not(.light)` — i.e.
+ *     the media query is ignored when the user has explicitly opted into
+ *     light via the `.light` class.
+ *
+ * Tailwind v4's default `dark:` variant, however, is purely media-query
+ * driven. That mismatch produces a split-personality theme in exactly one
+ * scenario, which is the one we hit: OS set to dark, user forces light
+ * via the theme selector (bootstrap script in index.html sets
+ * `<html class="light">`). `--card`, `--background`, etc. correctly
+ * resolve to light, but every `dark:*` utility keeps firing under the
+ * media query — cards end up with dark-mode backgrounds layered under
+ * light-mode text and chrome.
+ *
+ * This `@custom-variant dark` rebinds the variant to mirror the token
+ * logic exactly:
+ *   - Element is (or descends from) `.dark`      → dark utilities fire.
+ *   - `prefers-color-scheme: dark` AND no `.light` ancestor → also fire.
+ *   - Everything else                            → no-op.
+ *
+ * Scoped to the playground because the bootstrap script in index.html is
+ * what makes the `.light` / `.dark` classes meaningful here; other
+ * appkit-ui consumers may rely on the current media-only behaviour.
+ */
+@custom-variant dark {
+  &:where(.dark, .dark *) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where(:not(.light):not(.light *)) {
+      @slot;
+    }
+  }
+}
