Dark mode et design tokens en anglais

Passer en mode sombre ne consiste pas à inverser les couleurs. Un vrai dark mode demande de repenser le contraste, les ombres et la saturation. Les équipes anglophones parlent de light theme et de dark theme : deux thèmes qui partagent la même structure mais pas les mêmes valeurs.

Pour lancer le sujet : "Should we support a dark theme at launch, or add it in a later release?" Un thème bien conçu se bascule via un toggle, ou suit la préférence du système.

Un design token est une valeur de design nommée : une couleur, un espacement, une taille de texte. Au lieu d'écrire #1A1A2E partout, on utilise un nom comme color-background-primary. Le thème change, le nom reste.

Les équipes distinguent souvent les primitive tokens (la palette brute) des semantic tokens (l'usage : texte, fond, bordure). Pour en discuter : "Let's map the semantic tokens to the dark palette instead of hard-coding the values." Hard-coding signifie écrire une valeur en dur dans le code.

Le contrast ratio mesure l'écart de luminosité entre le texte et son fond. Les guidelines d'accessibilité demandent au minimum 4.5:1 pour le texte courant. Sur fond sombre, un blanc pur éblouit : on préfère un off-white légèrement adouci.

Pour un retour précis : "The grey text on the dark background fails the contrast ratio. Could we lighten it a bit?" Évitez aussi le noir pur (#000) sur grand écran : un dark grey donne plus de profondeur.

En mode clair, les ombres créent la profondeur. En mode sombre, elles se voient à peine : on joue plutôt sur l'elevation, en éclaircissant légèrement la surface des éléments qui sont au-dessus. Une carte au premier plan est plus claire que le fond.

Côté vocabulaire : surface (le fond d'un composant), overlay (la couche au-dessus), border (la bordure fine qui sépare). "Let's use a subtle border instead of a shadow in dark mode." Réduisez aussi la saturation des couleurs vives, qui vibrent sur fond sombre.

Avant la livraison, vérifiez chaque écran dans les deux thèmes : images, illustrations, logos, états de survol (hover) et de focus. Un logo sombre disparaît sur fond noir, prévoyez une variante claire.

Pour le handoff : "I've documented all tokens in the style guide, with both light and dark values." Demandez un QA (contrôle qualité) du thème sombre avant la mise en ligne : "Could we run a QA pass on dark mode before release?"