Toggle Dark Mode

[jeffchown]

Morning, @calebporzio and team.

Could you share the code you use on https://fluxui.dev for the Toggle Dark Mode function?
I'd like to add it to an existing app during development so I can easily view/test both modes of my newly Fluxified pages :)

Thanks!

[ITSYV]

@jeffchown One way is to add this to your tailwind conf:
module.exports = { darkMode: 'selector', ... }
See: https://fluxui.dev/docs/installation#using-dark-mode

After adding this, you can toggle a "dark" class on your html or body tag with Alpine.
At the FluxUI website they store a boolean with javascript in "darkMode" ("x-on:click="$store.darkMode.toggle()"). But you can do the same storing a session or cookie and retrieving this in your app layout file

For local dev, you could just add / remove "dark" to your html/body tags to switch between themes.

[jeffchown]

Are you working SPA style or just navigating the old-school way? One solution could be to use wire:navigate so that css files aren't reloaded on navigating?

Not sure how to prevent this in another way

We were typing at the same time :). Most of my link use wire:navigate and they perform without the 'blink', it is only the legacy links (that I still need to convert/test using wire:navigate) that cause the blinking.

[jeffchown]

I think you may be right re: no way to prevent this on the non-wire:navigate links/navigation

[ITSYV]

Hmm, I guess some more experienced javascript dev should answer this.
Maybe it's because Alpine isn't loaded simultaniously? (because your code runs after Alpine initializes)
Does it work if you set it in javascript in your head tag?

[jeffchown]

If you mean via raw js in my head tag, haven't tried that yet.

I'll probably wire:navigate all my links first, then maybe revist that afterwards as I am curious to see if there's a way to make it work for all links without the blink.

[jeffchown]

Thanks again for your help, @ITSYV 🙏🏻