Dark mode broken in 3.4.0, last working 3.3.7

[bilogic]

What version of Tailwind CSS are you using?
3.4.0

What build tool (or framework if it abstracts the build tool) are you using?
CDN

What version of Node.js are you using?

CDN, so N/A

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

We identified the offending CSS in #12627 (comment)

3.3.7:

.dark .dark\:bg-neutral-700 { ... }

3.4.0:

:is(:where(.dark) .dark\:bg-neutral-700) { ... }

If the :where() pseudoclass is removed, everything starts to look the same.

Describe your issue

Dark mode is broken.

[andreww2012]

See also #12627 (reply in thread)

[Sarenor]

Skeleton is also making use of darkMode: 'class' to enable the LightSwitchs behaviour of toggling the mode depending on the users choice persisted in Local Storage. That means that all projects utilizing Skeleton will be using darkMode: 'class'.

This update is breaking for all of our users that customized Skeleton components depending on light/dark mode since instead of dark:bg-primary-800 they now have to use dark:!bg-primary-800.

A resolution to this problem and preferably a revert until a major Tailwind version will be published would be very much appreciated.

[adamwathan]

Hey! Can you please provide a reproduction? Something that shows some specific code that used to work and doesn't work now.

Dark mode does work generally: https://play.tailwindcss.com/WZBZxlIUzn

[andreww2012]

A basic example: https://play.tailwindcss.com/sxcXJrc50E

The button on hover used to preserve its color in the dark mode (stay violet), but in 3.4.0 it becomes green.

[Sarenor]

A more convoluted example using Skeleton:

Working (with Tailwind 3.3.3): https://stackblitz.com/edit/skeletonlabs-repl-ojdt8e?file=src%2Froutes%2F%2Bpage.svelte

Not Working (with Tailwind 3.4.0): https://stackblitz.com/edit/skeletonlabs-repl-hxd8qn?file=src%2Froutes%2F%2Bpage.svelte

How the card style is implemented: https://github.com/skeletonlabs/skeleton/blob/dev/packages/plugin/src/styles/components/cards.css

How the background token Skeleton uses is generated: https://github.com/skeletonlabs/skeleton/blob/dev/packages/plugin/src/tailwind/tokens/backgrounds.ts#L34

So bg-surface-100-800-token is basically:

.dark .bg-surface-100-800-token {
  background-color: rgb(var(--color-surface-800))
}

.bg-surface-100-800-token {
  background-color: rgb(var(--color-surface-100))
}

[sheepa]

Can confirm dark mode is broken in 3.4.0. Hopefully this will get fixed.

[adamwathan]

Was hoping to push out a solution for this before the holidays but likely not going to be until first week of January after the Christmas break, sorry folks. Use v3.3 in the mean time if you're affected by this and we'll push out an update right after the holidays.

[Sarenor]

No problem Adam, we'll follow that advice for now. Thanks and have a nice holiday!

[ghost]

Thanks for letting us know! Let's see on the first week of jan. Enjoy the holidays.

[bilogic]

Thanks @adamwathan

[AugustinBriolon]

Hey, I have the same issue... So the only solutions for now is to downgrade to 3.3.7 ?

[Sarenor]

That is the case until Adam and the rest of the team come back from a well deserved holiday break.

[thecrypticace]

We've got a fix for this in #12717. I've got to backport this to v3.4, get a release out an update play + the cdn. It'll take a bit before everything's updated but everything should (hopefully) be out in the next hour or two. I'll leave a comment here when done.

[thecrypticace]

Release is out — play and CDN are both updated

[Sarenor]

Successfully verified with the package. Thank you very much!

[thecrypticace]

Fantastic — thanks for checking! ✨