Appliquer le mode sombre à Velog

Voici le récit de l’introduction du mode sombre dans un service qui n’avait pas été conçu pour le prendre en compte.

L’article a été rédigé en combinant à la fois le point de vue d’un UX designer et celui d’un développeur.

• Choix techniques

  • Velog utilise React et Styled Components

  • Le ThemeProvider de Styled Components configure le thème en JS, ce qui limite la possibilité d’afficher par défaut le thème système. Pour suivre le thème système, il faut exécuter une fois du JS côté navigateur ; ce n’est donc pas adapté à Velog, qui utilise le SSR, sauf si l’on fixe un thème par défaut.

  • En utilisant des variables CSS, il est possible d’utiliser le thème système comme valeur par défaut

  • Pour utiliser des variables CSS dans un environnement CSS-in-JS, les couleurs sont gérées dans des objets JS, avec des fonctions utilitaires afin d’éviter les erreurs et de profiter de l’autocomplétion de TypeScript

• Réflexion sur la palette du mode sombre

  • Les couleurs ont été définies à partir de la couleur de fond, de la couleur du texte, de la couleur des bordures, ainsi que des couleurs Primary et Destructive

  • Pour la couleur de fond, les niveaux de luminosité 1, 2, 3 et 4 avaient d’abord été organisés séparément, mais comme ils ne correspondaient pas toujours exactement à l’UI réelle, la gestion a été légèrement modifiée pour couvrir les cas particuliers

  • Lors du choix des couleurs de texte, il est important de vérifier que le ratio de contraste est approprié. On peut voir si cela respecte les WCAG sur WebAIM

  • Les couleurs Primary et Destructive existantes conservent un bon contraste même sur fond sombre, mais utiliser des couleurs désaturées donne une impression un peu plus adaptée au thème sombre

• Remplacement des couleurs

  • Les remplacements pouvant être automatisés ont été traités avec l’aide de l’IDE

  • Les autres couleurs exceptionnelles ont été ajustées manuellement en choisissant des teintes appropriées à l’œil

  • Lorsqu’il était maladroit d’implémenter quelque chose avec les couleurs déjà créées, de nouvelles couleurs ont été ajoutées à la palette au fur et à mesure pour les gérer

  • En pratique, c’est cette étape qui a demandé le plus d’efforts

• Fonction de bascule du thème sombre

  • Un effet de transition a été implémenté via des transitions CSS de rotate et scale sur deux SVG

  • Lorsque l’utilisateur active ou désactive le thème sombre, sa préférence est enregistrée dans le localStorage et dans un cookie

  • Le localStorage est utilisé en CSR, et le cookie en SSR

Après avoir appliqué une fois le thème sombre, il est devenu évident que l’ajouter à une UI qui n’avait pas été pensée pour cela est extrêmement difficile. À l’avenir, le thème sombre sera forcément pris en compte dès la phase de conception, et au moment d’utiliser des couleurs, il semble préférable de nommer les couleurs par usage, comme text1, text2, plutôt que par des noms comme gray1, gray2, afin de faciliter les évolutions par la suite.