Opt-in dark mode support 🌙

[jessarcher]

This PR introduces opt-in dark mode support to Breeze 😎

This has been requested quite often, but the issue has always been that it forces developers to continue adding dark classes to everything they build. Otherwise they'll end up with partial dark mode, with dark text on a dark background. This PR solves this by making dark mode opt-in on installation with the --dark flag:

php artisan breeze:install {stack} --dark

Rather than maintaining two sets of stubs, the dark mode classes have been added to the existing stubs and the installer just strips them out unless dark mode is enabled.

Screenshots

Light	Dark

Minor improvements that impact light-mode

I've improved the focus states for the form components as some had no visible indication when focused. I've used examples from Tailwind rather than re-inventing the wheel.

Example

Light	Dark

I've also added focus states to the links such as "Forgot password" because the default browser focus states were ugly and inconsistent.

If this PR is not accepted, I'm happy to resubmit just those fixes.

Notes

• There is currently no theme selector (like the one on the Laravel docs) so the mode is based purely on the system theme. It's fairly trivial to implement one, and we could look at including one with Breeze later on, as long as we make sure no trace of it exists when dark mode is not installed.
• The "welcome" view already had dark classes as it is completely stand-alone and intended to be replaced by the user. I have configured the installer to ignore this file when stripping dark classes to preserve the existing behaviour.
• I used the Vue stack as the basis when adding dark classes and then copied the affected class lists over to the React and Blade stacks. While doing this I found that there were some minor inconsistencies across stacks which are now improved. Sometimes it was just the class ordering, other times there were minor visual differences - keep this in mind when reviewing the diff.
• I would like to run Tailwind's Prettier plugin over this repo to standardise the class ordering but will save that for after the review to avoid noise.
• I have no plans to add this to Jetstream.
• I am not a designer, but I've read the dark mode chapter of Refactoring UI 👩‍🎨 I am open to suggestions!

[innocenzi]

The solution to strip dark classes is pretty smart. Nice PR.

[Bosphoramus]

Pretty cool!

[andrewdwallo]

So how do I implement said dark mode? I just tried it out with the regular laravel breeze with blade...

[abrahamputraprakasa]

Can we toggle in run time? or only can choose once at installation?

[jessarcher]

Can we toggle in run time? or only can choose once at installation?

The dark mode provided by this PR can only be enabled upon installation because the CSS classes are part of the components that are published into your application's resources/ directory.

You could manually copy over the new components from the stubs/ directory of this repository. However, you will lose any customisations you may have made unless you manually apply the CSS classes only.

[abrahamputraprakasa]

Can we toggle in run time? or only can choose once at installation?

The dark mode provided by this PR can only be enabled upon installation because the CSS classes are part of the components that are published into your application's resources/ directory.

You could manually copy over the new components from the stubs/ directory of this repository. However, you will lose any customisations you may have made unless you manually apply the CSS classes only.

Thanks for the information and guide!

[AiFxApp]

thanks for this.

I installed fresh Laravel 10 breeze with dark opt-in -- out of the box I dont see frontend user toggle switch - am i missing something here?

[jessarcher]

By default Breeze uses the media strategy in Tailwind for enabling dark mode based on the browser/operating system preferences.

See the Tailwind dark mode docs for how you can implement the class strategy to allow this to be manually toggled.

[AiFxApp]

Of course.. silly of me.. Thanks for your reply

[andrew21-mch]

@jessarcher is there a way to undo dark mode once installed in a laravel project,
i got some inconsistent UI which i want to undo

[Sumaya1409]

@andrew21-mch
I just manually removed all the "dark: " tailwind classes.

[andrew21-mch]

@andrew21-mch
I just manually removed all the "dark: " tailwind classes.

Oh, thanks alot, i had to reinstall breeze without dark theme

[elmergustavo]

thanks !! ❤️