fix: dark mode issues kyle found

resources/views/components/darkmode.blade.php

@@ -1,5 +1,5 @@
 <div class="flex items-center">
-    <template x-if="darkMode === 'dark'">
+    <div x-show="darkMode === 'dark'">
         <button x-on:click="darkMode = 'light'" class="pl-6">
             <svg xmlns="http://www.w3.org/2000/svg"
                  x-bind:class="{'border-2 border-red/50': darkMode === 'light'}"
@@ -8,8 +8,8 @@
             </svg>
             <span class="sr-only">light</span>
         </button>
-    </template>
-    <template x-if="darkMode !== 'dark'">
+    </div>
+    <div x-show="darkMode !== 'dark'">
         <button x-on:click="darkMode = 'dark'" class="pl-6">
             <svg xmlns="http://www.w3.org/2000/svg"
                  x-bind:class="{'border-2 border-red/50': darkMode === 'dark'}"
@@ -18,5 +18,5 @@
             </svg>
             <span class="sr-only">dark</span>
         </button>
-    </template>
+    </div>
 </div>

resources/views/layouts/app.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+<html x-cloak lang="{{ str_replace('_', '-', app()->getLocale()) }}"
       x-data="{
         darkMode: localStorage.getItem('darkMode') ||
         localStorage.setItem('darkMode', 'system')

resources/views/layouts/guest.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+<html x-cloak lang="{{ str_replace('_', '-', app()->getLocale()) }}"
       x-data="{
         darkMode: localStorage.getItem('darkMode') ||
         localStorage.setItem('darkMode', 'system')