ADD:

- Agregada funcion de cambio de tema para el modo claro STYLE: - Agregadas variantes de estilos, clases en modo claro y oscuro - Quedan pendientes mas componentes a estilizar
2026-02-21 21:16:00 -03:30
parent 8448a9e43b
commit 850a55f257
10 changed files with 84 additions and 51 deletions
@@ -4,6 +4,25 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <script type="module">
+        // Revisamos el almacenamiento local o las preferencias del sistema
+        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+
+        // Función global para cambiar el tema desde cualquier botón
+        window.toggleTheme = function() {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+    </script>
    <title>{{ $title ?? 'Lauck Dashboard' }}</title>
    @stack('styles')
    
@@ -11,7 +30,7 @@
    @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>

-<body class="bg-dark-bg text-gray-300 font-sans antialiased min-h-screen flex flex-col relative overflow-x-hidden">
+<body class="bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-gray-300 font-sans antialiased min-h-screen flex flex-col relative transition-colors overflow-x-hidden">

    <!-- Fondo grilla global -->
    <div class="inset-0 bg-grid-pattern opacity-[0.15] z-0 pointer-events-none fixed"></div>
@@ -35,6 +54,8 @@
        if(btn && menu) {
            btn.addEventListener('click', () => menu.classList.toggle('hidden'));
        }
+
+        
    </script>
    @stack('scripts')