<div class="flex flex-col items-center ">
    <img style="max-height: 170px" src="/logos/Sidev.png" alt=""  id="theme-toggle">
</div>
<script>
    // Función para cambiar entre temas claro y oscuro
    function toggleTheme() {
        const currentTheme = localStorage.getItem('theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

        // Cambiar el tema de la aplicación
        document.documentElement.classList.toggle('dark');

        // Guardar el tema seleccionado en localStorage
        localStorage.setItem('theme', newTheme);
    }

    // Evento de clic en el logo para cambiar el tema
    const logo = document.getElementById('theme-toggle');
    if (logo) {
        logo.addEventListener('click', toggleTheme);
    }

    // Aplicar el tema guardado al cargar la página
    document.addEventListener('DOMContentLoaded', () => {
        const currentTheme = localStorage.getItem('theme');
        if (currentTheme === 'dark') {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    });
</script>
