¿Por qué el modo oscuro aún depende del tema del navegador?

En el desarrollo web moderno, la implementación de un modo oscuro se ha vuelto una característica esencial para muchas aplicaciones y sitios. Sin embargo, uno de los problemas más comunes que enfrentan los desarrolladores es que el modo oscuro a menudo parece estar vinculado al tema del navegador. A continuación, exploramos las razones detrás de esta dependencia y cómo se puede implementar de manera efectiva.

Lo que es el modo oscuro

El modo oscuro es una opción de diseño que permite a los usuarios cambiar la apariencia de una interfaz de clara a oscura. Esta configuración no solo proporciona una opción estética, sino que también puede mejorar la experiencia de lectura en entornos con poca luz y reducir la fatiga visual.

Implementación del modo oscuro

Al implementar el modo oscuro, muchos desarrolladores utilizan herramientas y bibliotecas como Next.js y Tailwind CSS. En el siguiente ejemplo, se utiliza Zustand, un gestor de estado, para manejar la temática de la aplicación:

import { create } from "zustand";

export const useThemeStore = create((set) => {
  let storedTheme = localStorage.getItem("theme");

  if (!storedTheme) {
    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    storedTheme = systemPrefersDark ? "dark" : "light";
    localStorage.setItem("theme", storedTheme);
    document.documentElement.classList.toggle(storedTheme);
  }

  return {
    theme: storedTheme,
    toggleTheme: () =>
      set((state) => {
        const newTheme = state.theme === "light" ? "dark" : "light";
        document.documentElement.classList.toggle("dark", newTheme === "dark");
        localStorage.setItem("theme", newTheme);
        return { theme: newTheme };
      }),
  };
});

Dependencia del tema del navegador

A pesar de que el código anterior implementa una funcionalidad de alternabilidad entre temas, se observa que el botón de alternancia no cambia el tema efectivamente si el navegador tiene configurado un modo oscuro que toma prioridad sobre la configuración local del usuario. Esta dependencia se manifiesta en el hecho de que algunos navegadores aplican automáticamente el tema oscuro basado en las preferencias del sistema operativo del usuario, lo que puede generar confusión.

Solución

Para evitar esta dependencia y asegurar que el cambio de tema se realice de manera efectiva, es crucial asegurarse de que la lógica de alternancia en el código se ejecute adecuadamente y que no haya conflictos con las configuraciones predeterminadas del navegador. Aquí hay un ejemplo de configuración de Tailwind CSS que permite una alternancia manual del tema:

import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class", // Asegura que el modo oscuro funcione con alternancia manual
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;

Conclusión

La implementación del modo oscuro no tendría que depender del tema del navegador si se gestiona correctamente a través de tecnologías modernas. Asegurarse de que el desarrollo contemple la configuración manual y el manejo de estados del tema es clave para ofrecer una experiencia de usuario fluida y personalizable. Esto no solo mejora la experiencia visual, sino que también permite a los usuarios disfrutar de la flexibilidad que la personalización del diseño proporciona.