Tarea 19: Agregar modo oscuro / claro con toggle

[tutortt]

Tarea 19: Agregar modo oscuro / claro con toggle

Descripción:
Implementar un toggle que permita cambiar entre modo oscuro y modo claro usando CSS variables y JavaScript.

Criterios de aceptación:

• El toggle debe ser fácil de usar.
• El cambio debe afectar colores de fondo, texto y elementos visuales relevantes.

Label: JavaScript, Feature, UI

---

[tutortt]

Ejemplo

<button id="toggle-theme">Modo Oscuro</button>

[tutortt]

Ejemplo

:root {
    --bg-color: #fff;
    --text-color: #333;
}
[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #eee;
}
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

[tutortt]

Ejemplo

document.getElementById('toggle-theme').addEventListener('click', () => {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
});