Anulación de la configuración del esquema de color nativo

La implementación de modos oscuros se ha vuelto crucial con la adopción generalizada en varios sistemas operativos. Si bien existe compatibilidad con el navegador nativo a través de la regla de medios CSS @media (prefiere-color-scheme: oscuro), es posible que no aborde completamente las preferencias del usuario ni atienda a navegadores no compatibles como Microsoft Edge.

Desacoplamiento de la configuración del sistema del tema del sitio web

Para brindar un control óptimo al usuario, es fundamental permitirles anular la configuración de combinación de colores del sistema. Esto garantiza que puedan elegir el tema que prefieran para un sitio web específico. Para lograr esto, se utiliza una combinación de variables CSS y JavaScript.

Configuración CSS

Las variables CSS definen los parámetros del tema:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

Se utilizan variables en toda la hoja de estilo para garantizar la flexibilidad:

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

Implementación de JavaScript

JavaScript desempeña un papel fundamental en la detección de las preferencias del usuario y la alternancia entre temas:

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

La función toggleTheme maneja el cambio de tema:

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

Este JavaScript garantiza la detección automática de temas y permite a los usuarios anularlo con una casilla de verificación:

Conclusión

Al combinar variables CSS y JavaScript, brindamos a los usuarios la capacidad de controlar la combinación de colores de un sitio web, independientemente de la configuración de su sistema. . Este enfoque garantiza una experiencia de usuario mejorada, atendiendo a las preferencias individuales y las limitaciones de varios navegadores.