add toggle to public view

app/View/Components/ThemeToggle.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class ThemeToggle extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.theme-toggle');
+    }
+}

resources/js/app.js

@@ -4,6 +4,9 @@ import Clipboard from '@ryangjchandler/alpine-clipboard'
 
 Alpine.plugin(Clipboard)
 
+import { themeToggle } from './theme-toggle.js';
+Alpine.data('themeToggle', themeToggle);
+
 Livewire.start()
 
 

resources/js/theme-toggle.js

@@ -0,0 +1,25 @@
+const themeToggle = () => ({
+  theme: 'light',
+
+  init() {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
+
+    const currentTheme = localStorage.getItem('theme') || this.theme;
+
+    this.setTheme(currentTheme);
+  },
+
+  setTheme(theme) {
+    this.theme = theme
+
+    if (theme === 'dark' || theme === 'light') {
+      localStorage.setItem('theme', theme)
+    } else {
+      localStorage.removeItem('theme');
+    }
+
+    updateTheme();
+  },
+})
+
+export { themeToggle }

resources/views/auth/login.blade.php

@@ -32,7 +32,7 @@
                                for="email">{{ trans('auth.email') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-brand-600 focus:border-brand-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-brand-600 focus:border-brand-600 dark:bg-gray-900 dark:border-white/10"
                             id="email"
                             name="email"
                             value="{{ old('email') }}"
@@ -44,7 +44,7 @@ class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shado
                                for="password">{{ trans('auth.password') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-brand-600 focus:border-brand-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-brand-600 focus:border-brand-600 dark:bg-gray-900 dark:border-white/10"
                             id="password"
                             name="password"
                             type="password">

resources/views/auth/register.blade.php

@@ -34,7 +34,7 @@
                                for="name">{{ trans('auth.name') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:border-blue-600 focus:ring-1 focus:ring-inset focus:ring-blue-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:border-blue-600 focus:ring-1 focus:ring-inset focus:ring-blue-600 dark:bg-gray-900 dark:border-white/10"
                             id="name"
                             name="name"
                             value="{{ old('name') }}"
@@ -46,7 +46,7 @@ class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shado
                                for="email">{{ trans('auth.email') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600 dark:bg-gray-900 dark:border-white/10"
                             id="email"
                             placeholder="{{ trans('auth.email_placeholder') }}"
                             name="email"
@@ -59,7 +59,7 @@ class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shado
                                for="password">{{ trans('auth.password') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600 dark:bg-gray-900 dark:border-white/10"
                             id="password"
                             name="password"
                             type="password">
@@ -70,7 +70,7 @@ class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shado
                                for="password_confirmation">{{ trans('auth.confirm_password') }}</label>
 
                         <input
-                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
+                            class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600 dark:bg-gray-900 dark:border-white/10"
                             id="password_confirmation"
                             name="password_confirmation"
                             type="password">

resources/views/components/theme-toggle.blade.php

@@ -0,0 +1,4 @@
+<button x-data="themeToggle" x-cloak type="button" class="bg-white text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 rounded-lg text-sm p-2 dark:focus:ring-gray-700 dark:bg-gray-800 dark:border-white/10 dark:border-1">
+    <svg x-show="theme === 'light'" x-on:click="setTheme('dark')" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+    <svg x-show="theme === 'dark'" x-on:click="setTheme('light')" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+</button>

resources/views/livewire/header.blade.php

@@ -57,6 +57,10 @@
                 <li>
                     {{ $this->submitItemAction }}
                 </li>
+
+                <li>
+                    <x-theme-toggle />
+                </li>
             </ul>
 
             <!-- Hamburger -->