NEXT: Improved dark mode support

[endigo9740]

This will act as a hub to centralize for this information.

See Also

• NEXT: Tailwind Plugin #2360
• NEXT: New Theme Generator #1142
• Proposal: Rethink Tailwind Dark Mode Strategy #951
• https://tailwindcss.com/docs/dark-mode

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

• Support both the OS and Class-based strategies from Tailwind
• @AdrianGonz97 believes this technique may make it easier to author custom classes

Community Requests

The following requests have come from the community and are under consideration:

...

Bugs and Issues

• autoModeWatcher does not work when a content security policy blocking 'unsafe-inline' is set #1657

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

[endigo9740]

@AdrianGonz97 I shared this on Discord, but to echo here for future reference:

---

So I've finally had a chance to sit down and look through the TW plugin's CSS compile scripts and I think I've found where our OS strategy dark mode bug is coming from. It seems you use a local Tailwind Config to determine the way the styles are processed:

https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/scripts/compile-css-to-js.ts#L32

If I update both the doc site TW config AND this script TW config to remove the darkMode: class option, then all styles suddenly start working with the OS toggle. BUT, the two configs have to be in sync. If I try OS+Class or Class+OS things are out of sync and we get the weird style issues.

Here's what class-based generates:

Here's what OS-based generates:

So ideally we need some way for our plugin to capture the same darkMode setting the users are using in their local project's Tailwind Config and match it. It's the only way to ensure this will work IMO. Zero clue how we handle this though!

[endigo9740]

With #2431 we can now consider this task done as well. Closing this out!

Per the Lightswitch feature - this will likely take the form of a guide rather than a single component, so I'm going to move that over to the Documentation ticket for now. The instructions for setting this up may differ framework to framework (especially meta frameworks like Astro) so we'll handle this in a dedicated section.