Cada vez es más habitual que un cliente llegue diciendo "quiero que mi web tenga modo oscuro, como Instagram". Es una petición razonable en apariencia (lo ha visto en apps que usa a diario y le gusta cómo se ve), pero es una de esas peticiones donde conviene parar un momento antes de decir que sí, porque el modo oscuro no le sienta bien a todas las webs, y hacerlo bien cuesta bastante más de lo que parece a simple vista.
De dónde viene la moda
El modo oscuro se popularizó por varias razones que tienen sentido en su contexto original: en pantallas OLED (la mayoría de móviles actuales) los píxeles negros consumen menos batería que los blancos; para sesiones largas de trabajo nocturno (programar, leer, editar vídeo) un fondo oscuro cansa menos la vista que un blanco brillante; y aplicaciones muy usadas (Twitter/X, Instagram, herramientas de programación) lo popularizaron hasta convertirlo en una expectativa por defecto para cualquier producto digital. El problema es que esas razones aplican de verdad a aplicaciones de uso intensivo y prolongado, no necesariamente a cualquier página web.
Cuándo tiene sentido de verdad
- Aplicaciones y dashboards de uso prolongado: paneles de control, herramientas internas de gestión, software donde alguien pasa horas seguidas mirando la pantalla se benefician de verdad de reducir la fatiga visual con un fondo oscuro.
- Herramientas para desarrolladores o perfiles técnicos: este público espera modo oscuro casi como estándar, y su ausencia puede incluso transmitir una imagen anticuada del producto.
- Contenido de uso nocturno habitual: apps de lectura, streaming o cualquier cosa que se consuma sobre todo de noche y con poca luz ambiente.
- Webs de contenido con lectura muy larga: blogs técnicos o de nicho donde la gente lee artículos extensos se benefician de dar la opción, aunque no necesariamente como modo por defecto.
Cuándo NO tiene sentido, o incluso perjudica
- Marca construida sobre un color fuerte pensado para fondo claro: si tu identidad de marca depende de un color de acento vibrante que solo funciona bien sobre blanco o crema, invertir los fondos a negro puede hacer que ese color pierda todo su impacto o directamente desentone.
- Tiendas online: las fotos de producto casi siempre están pensadas (fondo blanco o neutro, iluminación de estudio) para verse sobre fondo claro. Sobre negro, muchas fotos de producto pierden nitidez visual o generan un contraste extraño que distrae de lo que se intenta vender.
- Webs corporativas o de servicios donde la primera impresión es la identidad visual: una consultora, una clínica o un despacho profesional suelen construir confianza con una estética limpia y luminosa; el negro puede transmitir una sensación distinta (más "tech" o nocturna) que no encaja con ese posicionamiento.
- Webs con mucho contenido gráfico o infografías ya diseñadas: si tienes decenas de gráficos, capturas de pantalla o ilustraciones ya creados para fondo claro, el modo oscuro los deja con un recuadro blanco feo alrededor, a menos que rehagas cada uno.
El coste real de "simplemente invertir los colores"
Aquí está la trampa en la que cae mucha gente: piensan que el modo oscuro es invertir blanco por negro y ya está. En la práctica, hacerlo bien implica revisar, uno por uno:
- El contraste de cada combinación de texto y fondo (un gris que se lee perfecto sobre blanco puede volverse casi ilegible sobre negro).
- Los iconos y logos: muchos logos están diseñados en negro o en un color oscuro que desaparece sobre fondo oscuro, y necesitan una versión alternativa.
- Las imágenes con fondo transparente: una foto recortada pensada para integrarse en un fondo claro puede generar un halo o un aspecto raro sobre negro.
- Los botones, bordes y sombras: una sombra suave que aporta profundidad sobre blanco puede resultar invisible o al revés, demasiado dura, sobre un fondo oscuro.
- Cada estado interactivo (hover, focus, error, éxito) necesita su propia versión revisada para que siga siendo legible y coherente.
Dicho de otra forma: no es "un tema de CSS que se activa con un interruptor". Es, en la práctica, diseñar y probar una segunda versión visual completa de la web, y mantenerla sincronizada con la primera cada vez que se añade algo nuevo (una nueva sección, un nuevo tipo de tarjeta, un nuevo gráfico). Para una web pequeña, ese coste de mantenimiento puede no compensar el beneficio real que aporta.
Una alternativa razonable: modo oscuro "ligero" automático
Existe un término medio: respetar la preferencia de sistema del usuario (prefers-color-scheme en CSS) con un conjunto reducido y bien probado de ajustes, en vez de un rediseño paralelo completo. Esto tiene sentido sobre todo en páginas de contenido simple, sin fotografía de producto compleja: un blog, una landing informativa. Para una tienda online o una web con identidad visual muy trabajada, esa versión "automática y barata" casi nunca queda bien, y conviene o hacerlo en condiciones (con presupuesto de diseño real) o directamente no ofrecerlo.
La pregunta que hay que hacerse antes de pedirlo
Antes de pedir modo oscuro para tu web, pregúntate: ¿mis usuarios pasan sesiones largas en mi web, sobre todo de noche? ¿Mi contenido es sobre todo texto e interfaz, o depende de fotografía de producto e identidad de marca sobre fondo claro? ¿Tengo presupuesto para mantener dos versiones visuales sincronizadas a largo plazo? Si las respuestas apuntan a "uso puntual, mucha fotografía, presupuesto ajustado", probablemente el modo oscuro no es la prioridad, por mucho que esté de moda.
Un matiz de accesibilidad que se suele olvidar
El modo oscuro no es automáticamente "más accesible": para algunas personas con ciertas condiciones visuales (astigmatismo, por ejemplo), el texto claro sobre fondo oscuro puede generar un efecto de halo que dificulta la lectura, justo lo contrario de lo que se busca al ofrecerlo. Por eso, si implementas modo oscuro, conviene dejar siempre la opción de volver al modo claro de forma visible y fácil de encontrar, en vez de forzarlo como única alternativa según la hora del día o la configuración del sistema. Dar el control a quien visita la web, en vez de decidir por ella, es la aproximación más segura en cualquier caso.
Cómo lo aborda una agencia cuando el cliente insiste
Cuando un cliente pide modo oscuro sin más contexto, el ejercicio útil es preguntar primero por qué lo quiere: si la respuesta es "porque lo he visto en otra web y me gustó cómo quedaba", conviene mostrarle ejemplos reales de su propio contenido (fotos de producto, gráficos, capturas) simulados sobre fondo oscuro antes de comprometerse a construirlo, para que la decisión se tome con datos visuales concretos y no solo con la idea abstracta de "queda moderno". Muchas veces, ver el propio contenido mal adaptado sobre negro es el argumento más convincente para posponer la decisión o limitarla a una sección concreta.
Al final, la pregunta que de verdad hay que responder no es "¿podemos hacerlo?" (casi siempre técnicamente se puede), sino "¿el beneficio para quien nos visita compensa el coste de mantenerlo bien durante los próximos años?". Esa segunda pregunta es la que suele quedarse fuera de la conversación cuando la petición nace solo de una moda visual.
Preguntas frecuentes
¿El modo oscuro mejora el SEO o la velocidad de mi web?
No de forma directa. El modo oscuro es una capa visual adicional; no afecta al posicionamiento en buscadores ni, salvo casos muy concretos, a la velocidad de carga. El único ahorro real es de batería en pantallas OLED, algo irrelevante para la mayoría de negocios que no son una app de uso intensivo.
¿Puedo ofrecer modo oscuro solo en parte de la web?
Sí, y de hecho suele ser lo más razonable: por ejemplo, activarlo solo en el blog o en una zona de contenido de lectura larga, y mantener el resto de la web (fichas de producto, landing de conversión) en su diseño original pensado para fondo claro.
¿Cuánto cuesta añadir bien un modo oscuro a una web ya existente?
Depende del tamaño de la web, pero suele requerir revisar y ajustar cada componente visual (botones, tarjetas, formularios, iconos, imágenes) uno por uno, además de pruebas en varios dispositivos. Para una web de tamaño medio, es un trabajo comparable a una revisión de diseño completa, no un simple ajuste rápido.