Aplicando modo oscuro en Velog

Escribí sobre el proceso de incorporar modo oscuro en un servicio que no lo había considerado desde el inicio.

El artículo fue escrito sumando tanto la perspectiva de una diseñadora UX como la de un desarrollador.

• Elección de tecnología

  • Velog usa React y Styled Components

  • Como ThemeProvider de Styled Components configura el tema con JS, tiene limitaciones para mostrar por defecto el tema del sistema. Para seguir el tema del sistema, hay que ejecutar JS una vez en el navegador, así que si no se va a fijar un tema predeterminado, no resulta adecuado para Velog, que aplica SSR.

  • Si se usan CSS Variables, se puede hacer que el tema del sistema sea el valor predeterminado

  • Para usar CSS Variables en un entorno de CSS in JS, administramos los colores como objetos de JS y usamos funciones utilitarias para evitar errores y aprovechar el autocompletado de TypeScript

• Consideraciones sobre la paleta del modo oscuro

  • Los colores se definieron tomando como base el color de fondo, color de texto, color de borde, y los colores Primary y Destructive

  • En el caso del color de fondo, al principio se organizó por niveles de luminosidad 1 2 3 4, pero en la UI real no siempre había una correspondencia 1:1, así que se ajustó un poco la forma de administrarlo para cubrir casos excepcionales

  • Al definir los colores de texto, es importante revisar si la relación de contraste es adecuada. En WebAIM se puede verificar si cumple con WCAG

  • Los colores Primary y Destructive mantienen buen contraste incluso sobre fondos oscuros usando los colores existentes, pero si se usan colores desaturados se siente un poco más acorde con un tema oscuro

• Trabajo de reemplazo de colores

  • Se resolvió automáticamente todo lo que podía reemplazarse con ayuda del IDE

  • Los demás colores de excepción se ajustaron manualmente observándolos uno por uno

  • Cuando resultaba incómodo implementar algo con los colores ya existentes, se iban agregando nuevos colores a la paleta según fuera necesario

  • En la práctica, esta fue la parte que más esfuerzo tomó

• Función para alternar el tema oscuro

  • El efecto de transición se implementó con dos SVG usando transiciones CSS de rotate y scale

  • Cuando el usuario activa o desactiva el tema oscuro, la preferencia se guarda en localStorage y en cookies

  • localStorage se usa en CSR y las cookies en SSR

Después de aplicar el tema oscuro una vez, quedó claro que llevar modo oscuro a una UI que no fue diseñada teniéndolo en cuenta es una tarea extremadamente difícil. De ahora en adelante, al planear algo, siempre consideraré el tema oscuro desde el diseño, y al usar colores, en vez de nombrarlos como gray1, gray2, será más conveniente a futuro usar nombres según su propósito, como text1, text2.