From d40b11fbf02a976cd39d38560d86622d49400de9 Mon Sep 17 00:00:00 2001 From: Jess Archer Date: Tue, 15 Nov 2022 00:11:28 +1000 Subject: [PATCH] Opt-in dark mode support :crescent_moon: (#209) * Add opt-in dark mode support * Formatting --- src/Console/InstallCommand.php | 15 +++++++++++++++ src/Console/InstallsBladeStack.php | 9 +++++++++ src/Console/InstallsInertiaStacks.php | 17 +++++++++++++++++ .../views/auth/confirm-password.blade.php | 2 +- .../views/auth/forgot-password.blade.php | 2 +- .../resources/views/auth/login.blade.php | 6 +++--- .../resources/views/auth/register.blade.php | 2 +- .../views/auth/verify-email.blade.php | 6 +++--- .../views/components/auth-card.blade.php | 4 ++-- .../components/auth-session-status.blade.php | 2 +- .../views/components/danger-button.blade.php | 2 +- .../views/components/dropdown-link.blade.php | 2 +- .../views/components/dropdown.blade.php | 2 +- .../views/components/input-error.blade.php | 2 +- .../views/components/input-label.blade.php | 2 +- .../resources/views/components/modal.blade.php | 4 ++-- .../views/components/nav-link.blade.php | 4 ++-- .../views/components/primary-button.blade.php | 2 +- .../components/responsive-nav-link.blade.php | 4 ++-- .../components/secondary-button.blade.php | 2 +- .../views/components/text-input.blade.php | 2 +- .../resources/views/dashboard.blade.php | 6 +++--- .../resources/views/layouts/app.blade.php | 4 ++-- .../views/layouts/navigation.blade.php | 12 ++++++------ .../resources/views/profile/edit.blade.php | 8 ++++---- .../partials/delete-user-form.blade.php | 8 ++++---- .../partials/update-password-form.blade.php | 6 +++--- .../update-profile-information-form.blade.php | 12 ++++++------ .../resources/js/Components/Checkbox.jsx | 2 +- .../resources/js/Components/DangerButton.jsx | 2 +- .../resources/js/Components/Dropdown.jsx | 4 ++-- .../resources/js/Components/InputError.jsx | 2 +- .../resources/js/Components/InputLabel.jsx | 2 +- .../resources/js/Components/Modal.jsx | 4 ++-- .../resources/js/Components/NavLink.jsx | 4 ++-- .../resources/js/Components/PrimaryButton.jsx | 2 +- .../js/Components/ResponsiveNavLink.jsx | 4 ++-- .../js/Components/SecondaryButton.jsx | 2 +- .../resources/js/Components/TextInput.jsx | 2 +- .../js/Layouts/AuthenticatedLayout.jsx | 18 ++++++++++-------- .../resources/js/Layouts/GuestLayout.jsx | 4 ++-- .../js/Pages/Auth/ConfirmPassword.jsx | 2 +- .../resources/js/Pages/Auth/ForgotPassword.jsx | 4 ++-- .../resources/js/Pages/Auth/Login.jsx | 4 ++-- .../resources/js/Pages/Auth/Register.jsx | 5 ++++- .../resources/js/Pages/Auth/VerifyEmail.jsx | 6 +++--- .../resources/js/Pages/Dashboard.jsx | 6 +++--- .../resources/js/Pages/Profile/Edit.jsx | 8 ++++---- .../Pages/Profile/Partials/DeleteUserForm.jsx | 8 ++++---- .../Profile/Partials/UpdatePasswordForm.jsx | 6 +++--- .../Partials/UpdateProfileInformationForm.jsx | 12 ++++++------ .../resources/js/Components/Checkbox.vue | 2 +- .../resources/js/Components/DangerButton.vue | 2 +- .../resources/js/Components/Dropdown.vue | 2 +- .../resources/js/Components/DropdownLink.vue | 2 +- .../resources/js/Components/InputError.vue | 2 +- .../resources/js/Components/InputLabel.vue | 2 +- .../resources/js/Components/Modal.vue | 4 ++-- .../resources/js/Components/NavLink.vue | 4 ++-- .../resources/js/Components/PrimaryButton.vue | 2 +- .../js/Components/ResponsiveNavLink.vue | 4 ++-- .../js/Components/SecondaryButton.vue | 2 +- .../resources/js/Components/TextInput.vue | 2 +- .../js/Layouts/AuthenticatedLayout.vue | 16 ++++++++-------- .../resources/js/Layouts/GuestLayout.vue | 4 ++-- .../js/Pages/Auth/ConfirmPassword.vue | 2 +- .../resources/js/Pages/Auth/ForgotPassword.vue | 4 ++-- .../resources/js/Pages/Auth/Login.vue | 4 ++-- .../resources/js/Pages/Auth/Register.vue | 2 +- .../resources/js/Pages/Auth/VerifyEmail.vue | 6 +++--- .../resources/js/Pages/Dashboard.vue | 6 +++--- .../resources/js/Pages/Profile/Edit.vue | 8 ++++---- .../Pages/Profile/Partials/DeleteUserForm.vue | 8 ++++---- .../Profile/Partials/UpdatePasswordForm.vue | 6 +++--- .../Partials/UpdateProfileInformationForm.vue | 12 ++++++------ 75 files changed, 208 insertions(+), 162 deletions(-) diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php index 1f46dd88d..be09ca38b 100644 --- a/src/Console/InstallCommand.php +++ b/src/Console/InstallCommand.php @@ -6,6 +6,7 @@ use Illuminate\Filesystem\Filesystem; use Illuminate\Support\Str; use RuntimeException; +use Symfony\Component\Finder\Finder; use Symfony\Component\Process\PhpExecutableFinder; use Symfony\Component\Process\Process; @@ -19,6 +20,7 @@ class InstallCommand extends Command * @var string */ protected $signature = 'breeze:install {stack=blade : The development stack that should be installed (blade,react,vue,api)} + {--dark : Indicate that dark mode support should be installed} {--inertia : Indicate that the Vue Inertia stack should be installed (Deprecated)} {--pest : Indicate that Pest should be installed} {--ssr : Indicates if Inertia SSR support should be installed} @@ -221,4 +223,17 @@ protected function runCommands($commands) $this->output->write(' '.$line); }); } + + /** + * Remove Tailwind dark classes from the given files. + * + * @param \Symfony\Component\Finder\Finder $finder + * @return void + */ + protected function removeDarkClasses(Finder $finder) + { + foreach ($finder as $file) { + file_put_contents($file->getPathname(), preg_replace('/\sdark:[^\s"\']+/', '', $file->getContents())); + } + } } diff --git a/src/Console/InstallsBladeStack.php b/src/Console/InstallsBladeStack.php index a6ee67048..910a4bc7f 100644 --- a/src/Console/InstallsBladeStack.php +++ b/src/Console/InstallsBladeStack.php @@ -3,6 +3,7 @@ namespace Laravel\Breeze\Console; use Illuminate\Filesystem\Filesystem; +use Symfony\Component\Finder\Finder; trait InstallsBladeStack { @@ -36,6 +37,14 @@ protected function installBladeStack() (new Filesystem)->ensureDirectoryExists(resource_path('views')); (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/default/resources/views', resource_path('views')); + if (! $this->option('dark')) { + $this->removeDarkClasses((new Finder) + ->in(resource_path('views')) + ->name('*.blade.php') + ->notName('welcome.blade.php') + ); + } + // Components... (new Filesystem)->ensureDirectoryExists(app_path('View/Components')); (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/default/app/View/Components', app_path('View/Components')); diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php index 3e4f0cd3e..f774b351f 100644 --- a/src/Console/InstallsInertiaStacks.php +++ b/src/Console/InstallsInertiaStacks.php @@ -3,6 +3,7 @@ namespace Laravel\Breeze\Console; use Illuminate\Filesystem\Filesystem; +use Symfony\Component\Finder\Finder; use Symfony\Component\Process\Process; trait InstallsInertiaStacks @@ -58,6 +59,14 @@ protected function installInertiaVueStack() (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-vue/resources/js/Layouts', resource_path('js/Layouts')); (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-vue/resources/js/Pages', resource_path('js/Pages')); + if (! $this->option('dark')) { + $this->removeDarkClasses((new Finder) + ->in(resource_path('js')) + ->name('*.vue') + ->notName('Welcome.vue') + ); + } + // Tests... $this->installTests(); (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-common/tests/Feature', base_path('tests/Feature')); @@ -171,6 +180,14 @@ protected function installInertiaReactStack() (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-react/resources/js/Layouts', resource_path('js/Layouts')); (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-react/resources/js/Pages', resource_path('js/Pages')); + if (! $this->option('dark')) { + $this->removeDarkClasses((new Finder) + ->in(resource_path('js')) + ->name('*.jsx') + ->notName('Welcome.jsx') + ); + } + // Tests... $this->installTests(); (new Filesystem)->copyDirectory(__DIR__.'/../../stubs/inertia-common/tests/Feature', base_path('tests/Feature')); diff --git a/stubs/default/resources/views/auth/confirm-password.blade.php b/stubs/default/resources/views/auth/confirm-password.blade.php index 288292a90..b3dcd1a07 100644 --- a/stubs/default/resources/views/auth/confirm-password.blade.php +++ b/stubs/default/resources/views/auth/confirm-password.blade.php @@ -6,7 +6,7 @@ -
+
{{ __('This is a secure area of the application. Please confirm your password before continuing.') }}
diff --git a/stubs/default/resources/views/auth/forgot-password.blade.php b/stubs/default/resources/views/auth/forgot-password.blade.php index ab0d70af3..45728d84d 100644 --- a/stubs/default/resources/views/auth/forgot-password.blade.php +++ b/stubs/default/resources/views/auth/forgot-password.blade.php @@ -6,7 +6,7 @@ -
+
{{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
diff --git a/stubs/default/resources/views/auth/login.blade.php b/stubs/default/resources/views/auth/login.blade.php index f686b29f7..b99afd569 100644 --- a/stubs/default/resources/views/auth/login.blade.php +++ b/stubs/default/resources/views/auth/login.blade.php @@ -36,14 +36,14 @@
@if (Route::has('password.request')) - + {{ __('Forgot your password?') }} @endif diff --git a/stubs/default/resources/views/auth/register.blade.php b/stubs/default/resources/views/auth/register.blade.php index 9dae87fba..ba8ad8327 100644 --- a/stubs/default/resources/views/auth/register.blade.php +++ b/stubs/default/resources/views/auth/register.blade.php @@ -51,7 +51,7 @@
- + {{ __('Already registered?') }} diff --git a/stubs/default/resources/views/auth/verify-email.blade.php b/stubs/default/resources/views/auth/verify-email.blade.php index 15e313d25..3bb3da317 100644 --- a/stubs/default/resources/views/auth/verify-email.blade.php +++ b/stubs/default/resources/views/auth/verify-email.blade.php @@ -6,12 +6,12 @@ -
+
{{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
@if (session('status') == 'verification-link-sent') -
+
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
@endif @@ -30,7 +30,7 @@
@csrf -
diff --git a/stubs/default/resources/views/components/auth-card.blade.php b/stubs/default/resources/views/components/auth-card.blade.php index 71235cf24..3495a0996 100644 --- a/stubs/default/resources/views/components/auth-card.blade.php +++ b/stubs/default/resources/views/components/auth-card.blade.php @@ -1,9 +1,9 @@ -
+
{{ $logo }}
-
+
{{ $slot }}
diff --git a/stubs/default/resources/views/components/auth-session-status.blade.php b/stubs/default/resources/views/components/auth-session-status.blade.php index c4bd6e23c..a39bc7d2e 100644 --- a/stubs/default/resources/views/components/auth-session-status.blade.php +++ b/stubs/default/resources/views/components/auth-session-status.blade.php @@ -1,7 +1,7 @@ @props(['status']) @if ($status) -
merge(['class' => 'font-medium text-sm text-green-600']) }}> +
merge(['class' => 'font-medium text-sm text-green-600 dark:text-green-400']) }}> {{ $status }}
@endif diff --git a/stubs/default/resources/views/components/danger-button.blade.php b/stubs/default/resources/views/components/danger-button.blade.php index 60602236c..d7417b210 100644 --- a/stubs/default/resources/views/components/danger-button.blade.php +++ b/stubs/default/resources/views/components/danger-button.blade.php @@ -1,3 +1,3 @@ - diff --git a/stubs/default/resources/views/components/dropdown-link.blade.php b/stubs/default/resources/views/components/dropdown-link.blade.php index 761ee8a39..6b54bfbd7 100644 --- a/stubs/default/resources/views/components/dropdown-link.blade.php +++ b/stubs/default/resources/views/components/dropdown-link.blade.php @@ -1 +1 @@ -merge(['class' => 'block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out']) }}>{{ $slot }} +merge(['class' => 'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out']) }}>{{ $slot }} diff --git a/stubs/default/resources/views/components/dropdown.blade.php b/stubs/default/resources/views/components/dropdown.blade.php index c015664ca..f51d335b7 100644 --- a/stubs/default/resources/views/components/dropdown.blade.php +++ b/stubs/default/resources/views/components/dropdown.blade.php @@ -1,4 +1,4 @@ -@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white']) +@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white dark:bg-gray-700']) @php switch ($align) { diff --git a/stubs/default/resources/views/components/input-error.blade.php b/stubs/default/resources/views/components/input-error.blade.php index 9e6da217b..ad95f6b57 100644 --- a/stubs/default/resources/views/components/input-error.blade.php +++ b/stubs/default/resources/views/components/input-error.blade.php @@ -1,7 +1,7 @@ @props(['messages']) @if ($messages) -
    merge(['class' => 'text-sm text-red-600 space-y-1']) }}> +
      merge(['class' => 'text-sm text-red-600 dark:text-red-400 space-y-1']) }}> @foreach ((array) $messages as $message)
    • {{ $message }}
      • @endforeach diff --git a/stubs/default/resources/views/components/input-label.blade.php b/stubs/default/resources/views/components/input-label.blade.php index 1cc65e21d..e93b059ac 100644 --- a/stubs/default/resources/views/components/input-label.blade.php +++ b/stubs/default/resources/views/components/input-label.blade.php @@ -1,5 +1,5 @@ @props(['value']) -
merge(['class' => $classes]) }}> diff --git a/stubs/default/resources/views/components/primary-button.blade.php b/stubs/default/resources/views/components/primary-button.blade.php index 8f18773da..99bf38907 100644 --- a/stubs/default/resources/views/components/primary-button.blade.php +++ b/stubs/default/resources/views/components/primary-button.blade.php @@ -1,3 +1,3 @@ - diff --git a/stubs/default/resources/views/components/responsive-nav-link.blade.php b/stubs/default/resources/views/components/responsive-nav-link.blade.php index 02bb5279e..1148d9a9b 100644 --- a/stubs/default/resources/views/components/responsive-nav-link.blade.php +++ b/stubs/default/resources/views/components/responsive-nav-link.blade.php @@ -2,8 +2,8 @@ @php $classes = ($active ?? false) - ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out' - : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'; + ? 'block w-full pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-left text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out' + : 'block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-left text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out'; @endphp merge(['class' => $classes]) }}> diff --git a/stubs/default/resources/views/components/secondary-button.blade.php b/stubs/default/resources/views/components/secondary-button.blade.php index 2c9cff47f..fa1c54918 100644 --- a/stubs/default/resources/views/components/secondary-button.blade.php +++ b/stubs/default/resources/views/components/secondary-button.blade.php @@ -1,3 +1,3 @@ - diff --git a/stubs/default/resources/views/components/text-input.blade.php b/stubs/default/resources/views/components/text-input.blade.php index d6d857bc0..7779a13ad 100644 --- a/stubs/default/resources/views/components/text-input.blade.php +++ b/stubs/default/resources/views/components/text-input.blade.php @@ -1,3 +1,3 @@ @props(['disabled' => false]) -merge(['class' => 'rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) !!}> +merge(['class' => 'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm']) !!}> diff --git a/stubs/default/resources/views/dashboard.blade.php b/stubs/default/resources/views/dashboard.blade.php index 025a79a45..4e9a0a1be 100644 --- a/stubs/default/resources/views/dashboard.blade.php +++ b/stubs/default/resources/views/dashboard.blade.php @@ -1,14 +1,14 @@ -

+

{{ __('Dashboard') }}

-
-
+
+
You're logged in!
diff --git a/stubs/default/resources/views/layouts/app.blade.php b/stubs/default/resources/views/layouts/app.blade.php index 9dabf19be..9fd8680c4 100644 --- a/stubs/default/resources/views/layouts/app.blade.php +++ b/stubs/default/resources/views/layouts/app.blade.php @@ -14,12 +14,12 @@ @vite(['resources/css/app.css', 'resources/js/app.js']) -
+
@include('layouts.navigation') @if (isset($header)) -
+
{{ $header }}
diff --git a/stubs/default/resources/views/layouts/navigation.blade.php b/stubs/default/resources/views/layouts/navigation.blade.php index 45ab1f5ed..9beb379ac 100644 --- a/stubs/default/resources/views/layouts/navigation.blade.php +++ b/stubs/default/resources/views/layouts/navigation.blade.php @@ -1,4 +1,4 @@ -