¡Ilumina tu Experiencia Web! Modo Oscuro Automático con Sensor de Luz

¿Cansado de que la luz brillante de tu pantalla te deslumbre por la noche? Aprende cómo implementar un modo oscuro que se activa automáticamente según la luz ambiental. ¡Te contamos todos los detalles!

Ilumina tu Experiencia Web

¿Por qué un Modo Oscuro Inteligente? Reduce la Fatiga Visual

El modo oscuro no solo está de moda, ¡es una necesidad! Reduce la fatiga visual, ahorra batería en dispositivos con pantallas OLED y ofrece una experiencia más cómoda en ambientes oscuros. Aquí te mostraremos cómo crear uno que se adapte a tu entorno.

Colores Dinámicos: Personaliza Fácil con CSS Variables

Las CSS variables, también conocidas como Custom Properties, son la clave para un modo oscuro flexible. Define tus colores principales en un solo lugar y reutilízalos en toda tu hoja de estilo.

html {
  --primary-color: #ffeb3b;
  --border-color: var(--primary-color);
  --text-color: #333;
  --background-color: #fff;
}

html.dark {
  --border-color: #ccc;
  --text-color: #ccc;
  --background-color: #181818;
}

Con este código, cambiar entre el modo claro y oscuro es tan sencillo como añadir o quitar la clase "dark" al elemento <html>.

Un Botón Mágico: Activa y Desactiva el Modo Oscuro Manualmente

Si bien la automatización es genial, a veces necesitas control manual. Un simple botón permite a los usuarios activar o desactivar el modo oscuro a su gusto:

<button class="toggle-theme"></button>

const html = document.querySelector('html');
const button = document.querySelector('button');

button.addEventListener('click', () => {
  html.classList.toggle('dark');
});

Botón Mágico

El Sensor de Luz al Rescate: Modo Oscuro Adaptable

Aquí viene la parte emocionante: ¡dejar que la luz ambiental controle el tema! La API Ambient Light Sensor hace justamente eso. Accede a las lecturas del sensor de luz integrado en muchos dispositivos modernos.

const sensor = new AmbientLightSensor();
sensor.start();

El método start() activa el sensor y comienza a reportar cambios en la lectura de luminosidad.

¿Cómo Funciona el Sensor? Eventos y Luminosidad

El sensor dispara eventos que te informan de su estado:

activate: El sensor está listo.
error: Ocurrió un problema.
reading: Nueva lectura del sensor.

La propiedad sensor.illuminance contiene el valor de luminosidad actual, un número entero que representa el nivel de luz en el entorno. Sensor de Luz Ajustando la Sensibilidad: Umbrales Inteligentes

Basándonos en la tabla de Wikipedia sobre valores de luminosidad (https://en.wikipedia.org/wiki/Lux#Illuminance), definimos umbrales para diferenciar entre luz y oscuridad. Para evitar cambios constantes, añadimos un margen de tolerancia.

sensor.addEventListener('reading', () => {
  const illuminance = sensor.illuminance;

  if (illuminance < 20) {
    html.classList.add('dark');
  } else if (illuminance > 30) {
    html.classList.remove('dark');
  }
});

Soporte y Detección de Funciones: Asegúrate la Compatibilidad

La API Ambient Light Sensor aún no es compatible con todos los navegadores. Es importante verificar su disponibilidad antes de intentar usarla.

if (window.AmbientLightSensor) {
  // Compatible, ¡adelante!
}

Además, recuerda que en Chrome, es posible que necesites habilitar la función "Generic Sensor Extra Classes" en chrome://flags.

Conclusión: Un Futuro Más Brillante (o Más Oscuro)

El Ambient Light Sensor API ofrece una forma innovadora de adaptar tu sitio web al entorno del usuario. Explora esta y otras APIs de sensores para crear experiencias web más inteligentes y personalizadas. ¡El futuro está en tus manos! Conclusión