classList: el interruptor de estilos

Si tuvieras que aprender UN solo patrón de interactividad, sería este: JavaScript agrega o quita una CLASE, y el CSS hace todo lo visual. Un menú que se abre, un tema oscuro, una pestaña activa, un modal que aparece — casi todos son "poner o quitar una clase". classList es ese interruptor, y dominarlo es dominar el 80% de la interfaz.

El llavero de etiquetas

Los cuatro métodos

// AGREGAR una clase (si ya está, no pasa nada)
menu.classList.add("abierto");

// QUITARLA
menu.classList.remove("abierto");

// ALTERNARLA: la pone si falta, la quita si está. Devuelve true/false
const estaAbierto = menu.classList.toggle("abierto");

// PREGUNTAR si la tiene
if (menu.classList.contains("abierto")) { /* ... */ }

toggle es la estrella: una sola línea abre y cierra, enciende y apaga. Y DEVUELVE si la clase quedó puesta (true) o quitada (false) — perfecto para actualizar el texto de un botón o un atributo aria en el mismo paso.

La regla de oro: estado en JS, pintura en CSS

/* el CSS define QUÉ significa cada estado (la clase) */
.panel {
background: white; color: #1e293b;
transition: background 250ms ease, color 250ms ease;
}
.panel.oscuro {           /* solo cambia cuando JS cuelga la etiqueta */
background: #0f172a; color: #f1f5f9;
}

JavaScript nunca decide colores; solo pone o quita .oscuro. Toda la apariencia — incluida la transición suave del módulo 10 — vive en el CSS. Esta separación es la misma que sembraste en el menú hamburguesa del módulo 8 ("JS cambia el estado, CSS pinta") y es la clave de un código que no se convierte en espagueti.

Enciende y apaga

<div class="panel">
<h2>Panel de lectura</h2>
<p>Este bloque cambia de tema sin que JavaScript toque un solo color: solo alterna la clase .oscuro, y el CSS hace el resto.</p>
<button id="tema" aria-pressed="false">Tema oscuro</button>
</div>

body { font-family: system-ui; padding: 20px; background: #f1f5f9; }
.panel { border-radius: 14px; padding: 22px; max-width: 360px; background: white; color: #1e293b; border: 1px solid #e2e8f0; transition: background 250ms ease, color 250ms ease; }
.panel h2 { margin: 0 0 8px; font-size: 19px; }
.panel p { margin: 0 0 16px; line-height: 1.6; font-size: 14px; }
.panel.oscuro { background: #0f172a; color: #f1f5f9; border-color: #334155; }
button { padding: 9px 16px; border: 0; border-radius: 8px; background: #6d28d9; color: white; font-weight: 600; font-size: 14px; cursor: pointer; }

const panel = document.querySelector(".panel");
const boton = document.querySelector("#tema");

boton.addEventListener("click", () => {
const oscuro = panel.classList.toggle("oscuro");   // alterna y devuelve el estado
boton.textContent = oscuro ? "Tema claro" : "Tema oscuro";
boton.setAttribute("aria-pressed", String(oscuro)); // accesibilidad: refleja el estado
});

Fíjate en dos cosas: JavaScript no menciona ni un color (todos viven en CSS), y el aria-pressed se actualiza junto con la clase — un lector de pantalla anuncia "activado/desactivado" correctamente. El estado visual y el estado accesible siempre en sincronía.

Mini-reto

Añade a "El Observador" una barra de "temas de lectura": tres botones — Claro, Sepia, Oscuro — que pongan la clase correspondiente en el <article> (define .tema-sepia, .tema-oscuro en tu CSS). Truco: antes de agregar la nueva, quita las otras dos (o el tema se apila). Vas a descubrir por qué a veces conviene remove explícito antes de add: cuando las clases son mutuamente excluyentes.

Qué sigue

Hasta ahora reaccionaste al click, pero las páginas responden a mucho más: escribir en un input, enviar un formulario, presionar una tecla. La próxima lección abre el mundo completo de los EVENTOS y del objeto event — la información de "qué acaba de pasar" que hace posible reaccionar con precisión.