Antes de trabajar en apps y tecnología no me preocupaba conscientemente por cómo se “veían” los dispositivos ni las apps con las que interactuaba.
Sólo las usaba y ya, como sea que fueran. Estaba acostumbrado a que todo brille en mi cara con fondos blancos. A que las conversaciones de Messenger tengan colores radiantes y fondos luminosos. A escribir en documentos blancos de word que simulan el papel. A fingir que sé hacer fórmulas en excel en la vieja computadora de la escuela. Todo blanco y brillante.
De repente llegó un mundo mucho más personalizable en la web. Algunos lo recordarán con Hi5 o Myspace. En mi caso fue Metroflog. Por primera vez tenía control de cómo se veía una página de la que yo era dueño. Podía elegir entre miles de combinaciones de colores.
Mi reacción inicial fue poner el fondo negro, y no hubo vuelta atrás.
Con el tiempo fueron saliendo más plataformas que podía customizar. Recuerdo pasar horas eligiendo los colores en mi página de Tumblr con pocos seguidores. No sabía que años más tarde me pagarían por eso.
Y sin darme cuenta empecé darle importancia a los colores en el software en mi adolescencia. Incluso me molestaba cuando el fondo blanco era la única opción.
Esa era una de las razones por las que disfrutaba tanto usar Photoshop, que en ese entonces tenía un fondo gris.
Pasaba horas editando fotos y, aunque no lo investigué científicamente, sentía que mis ojos no se cansaban tanto. Hoy a mis 32 años sigo pasando muchas horas al día en el computador, y aún me siento similar.
Pero en esas épocas también usaba la computadora para algo más: los videojuegos. Y para mí sorpresa, también ponían mucha atención a estas cosas.
El gaming y el dark mode
Algo que pasa en muchos juegos es que cuidan las luces y sombras. Se preocupan porque la experiencia visual sea la mejor posible, y mucho de eso tiene que ver con el brillo. Por eso te ayudan a configurarlo apenas instalas un nuevo juego.
Todos estos juegos que me tenían pegado al computador tenían varias cosas en común: poco brillo. Ni las configuraciones tienen fondo blanco.
Tiene sentido, ¿no? Quieren que pasemos horas jugando y que no nos cansemos la vista. Y más si jugamos a altas horas de la noche. Yo hasta me escabullía para que mis papás no me regañen, así que tampoco quería que la pantalla brillara tanto.
Y de repente en la comunidad gamer fueron apareciendo plataformas que respetaban estos principios. Algunos ejemplos son Discord o Twitch. Apps que por defecto son oscuras y se asemejan a esa experiencia gamer con menos luz.
Discord en particular es de mis favoritas. Veo en su dark mode algo bastante único y especial, con una gran elección de colores que resaltan muy bien en un negro que no es negro (de hecho se llama darkbutnotblack), combinado con ilustraciones de personajes y su blurple (azul + morado). Muy afín a sus usuarios.
Y cuando pensé en los colores del dark mode en Fintual, definitivamente se me vino a la mente todo esto.
Me gustaba la idea de que un dark mode sea más que sólo poner el fondo negro y texto blanco. Quería experimentar con colores y que nuestro dark mode muestre otro lado de Fintual, uno más geek pero también futurista, y que siga respetando la esencia de nuestra marca.
Oscureciendo Fintual
Cuando llegue a Fintual el branding ya estaba muy establecido. Somos una app blanca con acentos azules.
Pero como quizás ya te diste cuenta, yo era esa persona que ponía su teléfono en modo oscuro. La computadora en modo oscuro. El Figma en modo oscuro. Y todos mis dispositivos eran negros (o space gray, como le llama Apple). Pero mi app de Fintual siempre estaba blanca.
Es parte del branding, me decía. No visualizaba nuestra marca de otra manera. Pero no era el único que quería que todas sus apps tuvieran un modo oscuro.
Desde hace años lo piden. Algunas personas porque quieren consistencia en todas sus apps, otras porque no toleran tanta luz en sus vidas, y otras simplemente no quieren que una app brille mucho y les moleste la vista, en especial si están en su departamento de noche con pocas lámparas encendidas (también soy de esos).
Pero después de todos estos años llegó un punto en el que (por fin) era posible hacerlo. Ya somos una empresa madura y rentable. Ya tenemos un equipo dedicado al front end de la app. Ya tenemos un design system. Todo apuntaba a que era el momento.
Y es que para hablar de cómo hicimos el dark mode tengo que hablar de nuestro design system.
En pocas palabras un design system es una conjunto de patrones y componentes que ayudan a que diseñemos y desarrollemos una app consistente y escalable. Cada elemento que ves en la app es probablemente un componente de este sistema. Un botón, una tarjeta, un banner, y todo eso que se va repitiendo en varias partes.
El punto es que ya teníamos un sistema que nos ayudaba a trabajar mejor y más rápido. No fue fácil construirlo, pero ya estaba funcionando bastante bien. Incluso trabajamos con Design System International para nuestra primera versión.
Teníamos todos los colores definidos. Hacer un switch a negro debiera ser fácil, ¿no?
Pues no tanto. Nuestra paleta de colores funcionaba bien. Nuestros componentes también. Pero sólo en fondo blanco.
Cuando intentamos usar nuestra misma gama de colores pero con un fondo oscuro, nuestra app se sentía muy diferente. Nuestro azul se veía raro. Nuestro negro era muy negro. No estaba funcionando.
Y ahí empezó una misión: elegir colores. De nuevo.
Empezamos con el color de fondo. La base de todo. El que guía al resto de colores para asegurar que se vean bien y sean legibles las cosas. Este color es más importante de lo que uno espera, así que probamos varios.
Nos fuimos por un fondo que no es negro puro. Le dimos una tonalidad fría con algo de azul para hacer un guiño a nuestro branding.
Ya teniendo un fondo, nos tocaba elegir el segundo color más importante: el azul. No podía ser igual al que usamos siempre. No funcionaba igual que el light mode.
Así que entre mil pruebas y referencias, armamos nuestra nueva gama de azules especiales para el dark mode. Nuestra base es un azul un poco más pastel, pero que resalta en nuestro fondo oscuro.
También tuvimos que asegurarnos de que fuera accesible. En especial cuando le ponemos textos blancos encima, que es lo que pasaría con nuestros botones. Lo mismo hicimos para el resto de colores, como el verde de éxito o el rojo de error.
Ya con nuestra paleta definida, tuvimos que adaptar nuestro design system para que consumiera estos colores.
Es algo técnico pero te lo explico en simple: imagina que sólo tenemos un “Azul Primario”. Definimos que ese azul es #005AD6 en light mode, pero queremos que en dark mode sea #2171E0.
Luego construimos un botón y le decimos que sea “Azul primario”. Cuando usemos ese botón en alguna pantalla, en automático se adaptará y cambiará de color si está en light o dark mode. Lo mismo pasa para el resto de botones y componentes.
Eso mismo hacemos con el resto de colores y componentes, así no nos tenemos que preocupar en el futuro de que algo se rompa ni tenemos que diseñar doble. Los componentes se adaptan y listo, nuestros flujos en automático funcionan con dark mode.
Sé que lo conté como si fuera un proceso lineal, pero tuvimos que iterar varias veces y probar a cada rato. Y algo curioso pasa con dark mode: en la computadora se ve todo bien, pero cuando llega a la app te das cuenta que todo afecta al dark mode, desde el brillo de tu teléfono hasta el reflejo de la luz de la ventana.
¿Y por qué nos tomó tanto tiempo?
Si después de esto aún te preguntas por qué apenas hoy en 2025 estamos lanzando el dark mode, te lo explicaré en tres puntos:
- Porque no siempre lo que nos gusta en la vida es prioridad en una empresa. No sabíamos que llegaríamos a más de 190.000 clientes, y cuando sólo tienes 100 es difícil pensar que el dark mode algún día será importante.
- Porque cuando llega el día en el que ahora sí queremos tener dark mode, nos damos cuenta que nuestro producto no está construido para soportarlo.
- Porque nuestro design system partió con light mode y no era sólo hacer un switch de colores.
Como todo lo que lanzamos, probablemente no sea perfecto. Quizás te topes con un color sospechoso o te salga un mensaje de éxito muy luminoso. Aún hay cosas que revisar, pero por fin lanzamos.
El dark mode es algo que no cualquiera entiende, pero que es importante para algunas personas. Como yo, que te conté mi historia de por qué me gusta vivir en un mundo más personalizable y oscuro.
Escribí este artículo según mis experiencias personales con el dark mode, pero no sobra decir que construir un design system ha sido trabajo de años, y nada de esto hubiera sido posible sin el equipo de front: Tamara, Nacho y Benjakramm.
Y bueno, después de años de un Fintual muy luminoso, le tocó a nuestro dark mode ver la luz.
