How to toggle dark mode in Jetstream

[citricguy]

After installing Jetstream (v3) with --dark, how do you actually toggle it?

Is this a configuration option and not a UI setting?

The documentation is fairly vague: Link to Docs #dark-mode

[Sophist-UK]

I checked out the PRs that created Dark Mode and as far as I can see this only does 2 things:

1. Adds HTML classes for dark mode.
2. Adds an install flag to remove the dark classes if you don't specify --dark.

In other words, Dark Mode is a standard functionality of Livewire or Vue that this PR enables.

I haven't researched how you do Dark switching in Livewire or Vue, but I assume that this information is not difficult to find on t'internet.

[Sophist-UK]

https://tailwindcss.com/docs/dark-mode

[devheydrian]

To make it clear:

1. just go to your tailwin.config.js file at the root directory of your Laravel project.
2. Then add the darkMode: "class" inside the export default {} json configuration.

You'll be able to see how your components would look like when not in dark mode.

[GrimShadow]

I wrote an article on this if anyone is interested:
https://devdojo.com/brianh/embrace-the-shadows-adding-a-dark-mode-toggle-in-laravel-jetstream

[Jxazy]

thanks

[askasim]

Hey guys I have made a component for this here
https://gist.github.com/askasim/5a0c44d77a6e5e96a603899094b6cd13

Please make sure you have added darkMode: 'class' in tailwind.config.js