Función CSS Claro-Oscuro: Cambio automático de tema para una audiencia global

En el entorno web actual, satisfacer las preferencias del usuario es primordial. Un aspecto importante de esto es ofrecer la opción de cambiar entre temas claros y oscuros. Esto no se trata solo de estética; se trata de accesibilidad y de reducir la fatiga visual, particularmente para los usuarios en diferentes zonas horarias o que trabajan en condiciones de iluminación variables. La consulta de medios `prefers-color-scheme` de CSS proporciona una forma limpia y eficiente de ajustar automáticamente el tema de su sitio web en función de las preferencias del sistema del usuario. Este artículo lo guiará a través de la implementación de esta función para una audiencia global, asegurando una experiencia fluida y fácil de usar.

¿Por qué implementar el cambio de tema claro/oscuro?

Ofrecer temas claros y oscuros proporciona varios beneficios clave:

• Experiencia de usuario mejorada: Muchos usuarios encuentran que el modo oscuro es más fácil para los ojos, especialmente en entornos con poca luz. Por el contrario, el modo claro puede ser preferido en espacios con mucha luz. Proporcionar la opción de elegir mejora la satisfacción del usuario.
• Accesibilidad: Los usuarios con discapacidades visuales pueden encontrar un tema más accesible que el otro. Darles la opción mejora la inclusión.
• Reducción de la fatiga visual: El modo oscuro puede reducir la fatiga visual, especialmente para los usuarios que pasan largas horas frente a las pantallas. Esto es particularmente relevante para los usuarios de diferentes zonas horarias que trabajan hasta altas horas de la noche.
• Duración de la batería (pantallas OLED): En dispositivos con pantallas OLED, el uso del modo oscuro puede extender significativamente la duración de la batería.
• Tendencia de diseño moderno: El modo oscuro es una tendencia de diseño popular, y ofrecerlo demuestra que su sitio web está actualizado y es considerado con las preferencias del usuario.

Comprendiendo `prefers-color-scheme`

La consulta de medios `prefers-color-scheme` permite que su sitio web detecte la configuración de esquema de color preferida del usuario en su sistema operativo o navegador. Puede tener tres valores posibles:

• `light`: Indica que el usuario ha solicitado un tema claro.
• `dark`: Indica que el usuario ha solicitado un tema oscuro.
• `no-preference`: Indica que el usuario no ha expresado ninguna preferencia. Este es el valor predeterminado si el usuario no ha elegido explícitamente un tema claro u oscuro.

Puede usar esta consulta de medios en su CSS para aplicar diferentes estilos en función de la preferencia del usuario.

Pasos de implementación: una guía práctica

Aquí hay una guía paso a paso para implementar el cambio automático de tema claro y oscuro usando CSS:

1. Definir propiedades personalizadas de CSS (variables)

La clave para una transición fluida radica en el uso de propiedades personalizadas de CSS (también conocidas como variables CSS). Defina variables para colores, fondos y otros atributos de estilo que desee cambiar según el tema.

Ejemplo:

            
:root {
  --background-color: #ffffff; /* Fondo del modo claro */
  --text-color: #000000; /* Texto del modo claro */
  --link-color: #007bff; /* Color del enlace del modo claro */
}

            

              
                Copy
              
            
          

Este código define tres propiedades personalizadas: `--background-color`, `--text-color` y `--link-color`. Estas propiedades se establecen inicialmente en valores adecuados para un tema claro.

2. Usar propiedades personalizadas en sus estilos

Aplique estas propiedades personalizadas en todo su CSS para estilizar los elementos de su sitio web.

Ejemplo:

            
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

            

              
                Copy
              
            
          

Este código establece el `background-color` del elemento `body` en el valor de la propiedad personalizada `--background-color`, el `color` del elemento `body` en el valor de la propiedad personalizada `--text-color`, y el `color` del elemento `a` (enlace) en el valor de la propiedad personalizada `--link-color`.

3. Implementar la consulta de medios `prefers-color-scheme`

Ahora, use la consulta de medios `prefers-color-scheme` para redefinir las propiedades personalizadas para el tema oscuro.

Ejemplo:

            
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Fondo del modo oscuro */
    --text-color: #ffffff; /* Texto del modo oscuro */
    --link-color: #66b3ff; /* Color del enlace del modo oscuro */
  }
}

            

              
                Copy
              
            
          

Este código define una consulta de medios que aplica los estilos dentro de las llaves solo si la preferencia del sistema del usuario está configurada en modo oscuro. Dentro de la consulta de medios, las propiedades personalizadas se redefinen con valores adecuados para un tema oscuro.

4. Manejo de `no-preference`

Si bien no es estrictamente necesario, puede manejar explícitamente el caso de `no-preference` si desea asegurar un tema predeterminado específico. Si no se selecciona ninguna preferencia en el sistema operativo, los navegadores generalmente se predeterminarán a claro. Sin embargo, ser explícito asegura que el sitio se renderice igual en diferentes navegadores.

Ejemplo:

            
@media (prefers-color-scheme: no-preference) {
  :root {
    --background-color: #f0f0f0; /* Fondo predeterminado (gris claro) */
    --text-color: #333333; /* Texto predeterminado (gris oscuro) */
  }
}

            

              
                Copy
              
            
          

En este ejemplo, estamos configurando un fondo gris claro y texto gris oscuro para los usuarios que no han seleccionado explícitamente un tema.

Ejemplo completo

Aquí hay un ejemplo completo que combina todos los pasos:

            
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
  --header-background-color: #f8f9fa;
  --header-text-color: #212529;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

header {
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

h1, h2, h3 {
  margin-top: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
    --link-color: #66b3ff;
    --header-background-color: #212529;
    --header-text-color: #f8f9fa;
  }
}

            

              
                Copy
              
            
          

Yendo más allá: agregando un interruptor manual

Si bien el cambio automático de tema es conveniente, algunos usuarios pueden preferir elegir manualmente su tema. Puede agregar un botón de alternancia a su sitio web que permita a los usuarios anular la preferencia del sistema.

1. Estructura HTML

Agregue un botón o casilla de verificación a su HTML para que actúe como la alternancia de tema.

            
Cambiar tema

            

              
                Copy
              
            
          

2. Lógica JavaScript

Use JavaScript para detectar los clics en la alternancia y actualizar una clase CSS en el elemento `body` (o cualquier otro elemento principal adecuado). Guarde la preferencia del usuario en `localStorage` para que persista en las sesiones.

            
const themeToggle = document.getElementById('theme-toggle');
const body = document.body; // o document.documentElement
const localStorageKey = 'theme';

// Función para establecer el tema
function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
  } else {
    body.classList.remove('dark-theme');
  }
  localStorage.setItem(localStorageKey, theme);
}

// Función para obtener el tema almacenado
function getStoredTheme() {
  return localStorage.getItem(localStorageKey) || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
}

// Establecer el tema inicial
const initialTheme = getStoredTheme();
setTheme(initialTheme);

// Alternar el tema al hacer clic en el botón
themeToggle.addEventListener('click', () => {
  const currentTheme = body.classList.contains('dark-theme') ? 'light' : 'dark';
  setTheme(currentTheme);
});

// Escuchar los cambios de preferencia del sistema
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
    if(localStorage.getItem(localStorageKey) === null) {
        const newColorScheme = event.matches ? "dark" : "light";
        setTheme(newColorScheme)
    }
});

            

              
                Copy
              
            
          

3. Estilo CSS

Modifique su CSS para aplicar los estilos del tema oscuro en función de la clase `dark-theme`.

            
.dark-theme {
  --background-color: #121212;
  --text-color: #ffffff;
  --link-color: #66b3ff;
  --header-background-color: #212529;
  --header-text-color: #f8f9fa;
}

            

              
                Copy
              
            
          

Este enfoque permite a los usuarios cambiar manualmente los temas, anulando la preferencia del sistema. El `localStorage` asegura que la elección del usuario se recuerde en las sesiones. El detector de eventos asegura que si el usuario NO ha seleccionado manualmente un tema, pero la preferencia del sistema cambia, el sitio responderá en consecuencia.

Mejores prácticas para una audiencia global

Al implementar el cambio de tema claro/oscuro para una audiencia global, considere estas mejores prácticas:

• Accesibilidad: Asegúrese de que ambos temas cumplan con las pautas de accesibilidad (WCAG). Preste atención al contraste de color y la legibilidad. Herramientas como el WebAIM Color Contrast Checker (https://webaim.org/resources/contrastchecker/) pueden ser útiles.
• Pruebas de usuario: Pruebe sus temas con usuarios de diferentes regiones y culturas para recopilar comentarios sobre sus preferencias e identificar cualquier problema potencial.
• Rendimiento: Optimice su CSS para minimizar el impacto en el tiempo de carga de la página. Evite selectores complejos y estilos innecesarios.
• Diseño consistente: Mantenga una estética de diseño consistente en ambos temas. Evite transiciones bruscas o elementos que parezcan fuera de lugar en un tema u otro.
• Localización: Si su sitio web está localizado, asegúrese de que el mecanismo de cambio de tema también esté localizado. Por ejemplo, el texto en el botón de alternancia de tema debe traducirse al idioma del usuario.

Consideraciones avanzadas

• Animaciones y transiciones: Use animaciones y transiciones sutiles para que el proceso de cambio de tema sea más fluido y visualmente atractivo. Use la propiedad `transition` en CSS.
• Imágenes e iconos: Considere usar diferentes versiones de imágenes e iconos para temas claros y oscuros. Las imágenes SVG son particularmente adecuadas para esto, ya que sus colores se pueden modificar fácilmente usando CSS.
• Bibliotecas de terceros: Hay varias bibliotecas y marcos de JavaScript que pueden simplificar la implementación del cambio de tema claro/oscuro. Sin embargo, tenga en cuenta sus dependencias y el posible impacto en el rendimiento.
• Representación del lado del servidor (SSR): Si está utilizando SSR, asegúrese de que el tema se renderice correctamente en el servidor. Esto puede requerir pasar la preferencia de tema del usuario del cliente al servidor.
• Arquitecturas basadas en componentes: Para aplicaciones de una sola página (SPA) o sitios construidos con arquitecturas basadas en componentes como React, Vue o Angular, aplique clases de tema o propiedades personalizadas a nivel de componente para un control más granular.

Conclusión

Implementar el cambio de tema claro y oscuro es una valiosa inversión en la experiencia del usuario y la accesibilidad. Al usar la consulta de medios `prefers-color-scheme` de CSS y las propiedades personalizadas, puede crear una experiencia fluida y fácil de usar para una audiencia global. Recuerde considerar la accesibilidad, las pruebas de usuario y la optimización del rendimiento para asegurar que su implementación sea efectiva e inclusiva. Agregar una anulación manual da a los usuarios control total. Al seguir las mejores prácticas descritas en este artículo, puede crear un sitio web que sea visualmente atractivo y accesible para todos los usuarios, independientemente de sus preferencias o entorno.