🎨 Camino C: Checkbox + CSS (Enfoque CSS Puro)

Esta técnica avanzada utiliza un checkbox oculto con el combinador de hermanos generales (~) . ¡Es magia CSS pura—no se necesita JavaScript para el toggle! Este patrón elegante demuestra el poder de los selectores CSS.

✨ Cómo Funciona

La Magia: Un checkbox oculto almacena el estado (marcado/desmarcado). El label actúa como botón. Cuando está marcado, CSS usa la pseudo-clase :checked con el combinador ~ para ¡estilizar TODOS los elementos hermanos!

1. Checkbox Oculto

<input type="checkbox" id="theme-toggle-checkbox" hidden>

Este almacena el estado (marcado = modo oscuro, desmarcado = modo claro)

2. Label como Botón

<label for="theme-toggle-checkbox">Toggle</label>

¡Hacer clic en el label marca/desmarca el checkbox—HTML semántico!

3. Combinador de Hermanos (~)

#theme-toggle-checkbox:checked ~ .container { --color: dark; }

Cuando el checkbox está :checked, selecciona TODOS los hermanos siguientes (~) y cambia sus variables CSS

/* El Patrón Completo */

/* Por defecto: Tema Claro (Púrpura Tirio) */
.container {
  --background: hsla(307, 45%, 50%, 0.75);
  --foreground: hsla(50, 100%, 54%, 0.9);
}

/* Cuando el checkbox está marcado: Tema Oscuro (Índigo Tirio) */
#theme-toggle-checkbox:checked ~ .container {
  --background: hsla(213, 100%, 18%, 0.9999);
  --foreground: hsla(60, 60%, 49%, 0.9999);
}

/* ¡Contenido dinámico con variables CSS! */
button:before {
  content: var(--toggle-shape);
}
🎓 Valor Educativo: ¡Esto enseña selectores CSS avanzados, HTML semántico y resolución creativa de problemas sin JavaScript! Es elegante y mantenible.

Por Qué Esto es Elegante

✅ Semántico

El checkbox representa perfectamente el estado binario (claro/oscuro)

✅ Solo CSS

Cero JavaScript requerido para el mecanismo de toggle

✅ Creativo

Muestra dominio de selectores CSS avanzados y pseudo-clases

✅ Educativo

Enseña el poder de los combinadores CSS y la cascada

El Sistema de Colores Tirio

Esta demo usa Púrpura Tirio (modo claro) e Índigo Tirio (modo oscuro)— colores históricos del tinte de moluscos fenicios antiguos. ¡Nota cómo HSL con transparencia crea profundidad!

/* HSL: Matiz, Saturación, Luminosidad, Alfa */

Modo Púrpura:
--background: hsla(307, 45%, 50%, 0.75);
    /* H:307° (magenta), S:45%, L:50%, A:75% */

Modo Índigo:
--background: hsla(213, 100%, 18%, 0.9999);
    /* H:213° (azul), S:100%, L:18%, A:99.99% */

¿Por qué HSL? ¡Fácil para crear variaciones de color ajustando valores!
🎨 Lección de Teoría del Color: El Púrpura Tirio simbolizaba la realeza en tiempos antiguos. Aquí representa el estado "claro" por defecto. El Índigo Tirio (azul profundo) proporciona excelente contraste para el modo oscuro manteniendo el tema histórico.

¡Inspecciona en DevTools!

Abre DevTools (F12) y prueba estos pasos:

  1. Encuentra <input id="theme-toggle-checkbox"> en Elements
  2. Observa cómo se marca/desmarca al hacer clic en el botón arriba
  3. Inspecciona .tyrian-container y ve cómo cambian las variables CSS
  4. Intenta agregar: #theme-toggle-checkbox:checked ~ .tyrian-container { border: 10px solid red; }
  5. ¡Experimenta con tus propios valores de color HSL!

¡Prueba el toggle arriba de nuevo!

Nota cómo el símbolo (◐/◑) cambia usando content: var(--toggle-shape)

Pensamiento Crítico: ¿Es este enfoque de checkbox más elegante que JavaScript? Considera: HTML semántico, accesibilidad, mantenibilidad y valor educativo. ¿Cuándo elegirías esto sobre el Camino A (CSS automático) o el Camino B (JavaScript)? ¿La restricción de "solo CSS" te hace más creativo o más limitado?