👩🏿‍🤝‍👨🏻 ⛽️ 👰🏼 Création d'un thème sombre pour le débordement de pile 🈲 ❇️ 🌺

Le 30 mars 2020, les développeurs de Stack Overflow ont donné aux visiteurs du site Web la possibilité d'utiliser une version bêta du thème sombre. Le matériel, dont nous publions la traduction, est dédié à l'histoire de la création du thème sombre de Stack Overflow.

Bannière sur Stack Overflow, qui vous permet d'inclure un thème sombre

Mon nom est Aaron Sheki. Je suis responsable du design chez Stack Overflow. Je participe à la conception des composants d'interface qui sous-tendent les nouvelles fonctionnalités du projet.

Pour commencer, un peu d'ironie. Personnellement, je ne suis pas fan des thèmes d'interface sombres.

Je constate souvent que le niveau de contraste des interfaces sombres est trop faible. La conception de telles interfaces est difficile à utiliser dans une gamme complète de couleurs. La même chose s'applique à la simulation de volume à l'aide d'ombres et à l'application d'autres effets visuels. Lorsque je lis un texte clair, situé sur un fond sombre, mes yeux se fatiguent. Il est difficile de gérer des phénomènes comme le contraste simultané lors de l’utilisation de thèmes clairs, et si un thème sombre est utilisé, alors tout devient plus compliqué.

Mais je suis la personne dont les efforts ont soulevé un thème sombre sur Stack Overflow.

Le travail dont je veux parler n'a jamais été spécifiquement destiné à développer un sujet sombre, malgré le fait que de nombreux utilisateurs ont depuis longtemps demandé d'équiper la ressource avec un tel sujet. Mais au cours de l'évolution vers un sujet sombre, nous avons dû résoudre de nombreux problèmes. En particulier, le code frontal Stack Overflow a été mis à niveau, l'accessibilité du contenu a été améliorée. En travaillant sur un sujet sombre, nous avons eu une incitation à utiliser notre système de conception plus largement dans le projet .

Pouvons-nous donner aux utilisateurs un thème sombre et ouvrir simultanément la voie à l'amélioration de l'accessibilité du projet? Nous avons répondu à cette question par l'affirmative, après avoir fait tout ce que je vais dire maintenant.

Recherche de couleur

Lors de la création des échelles de couleurs d'origine pour le projet, nous, probablement un peu naïfs, avons pris une certaine valeur de couleur et l'avons modifiée à l'aide de transformations implémentées à l'aide de Less . Ainsi, par exemple, nous pourrions déclarer une variable Less @redet rendre la couleur plus sombre plusieurs fois en utilisant le design darken(@red, 10%). Il en va de même pour la clarification de plusieurs couleurs à l'aide tint(@red, 10%). Cela peut donner une échelle de couleurs dans laquelle les couleurs sont dans la plage de @red-050à @red-900par incréments de 10%.

Lorsque j'ai essayé pour la première fois de comprendre à quoi pourrait ressembler la ressource Stack Overflow en mode sombre, j'ai décidé d'essayer de changer le fond blanc en noir et de «retourner» les échelles de couleurs. Avec cette approche, la couleur @red-050devient couleur@red-900, les couleurs changent en conséquence entre les couleurs initiales et finales de l'échelle. Mais ces couleurs elles-mêmes restent les mêmes que celles utilisées auparavant.

Échelles de couleurs claires et foncées pour le rouge.

Avec cette approche, le contraste des éléments a souffert. Ce qui s'est passé s'est avéré contenir quelque chose que, en général, je n'aimais pas sur les sujets sombres. Par exemple, si vous regardez de près la version la plus sombre du rouge, située sur un fond sombre, vous verrez que la couleur est presque indiscernable. Nous en parlerons plus loin ci-dessous.

Nous devons absolument trouver quelque chose de mieux.

▍Pour commencer: conception de la mise en page

En essayant simplement de dessiner les échelles de couleurs, je n'ai en fait rien obtenu. Cette étape ne peut pas être qualifiée de véritable début de travail sur un sujet sombre. Par conséquent, j'ai décidé de commencer à développer une mise en page et à sélectionner manuellement les couleurs dans Figma . J'ai sélectionné les couleurs, en me concentrant sur la façon dont, à mon avis, Stack Overflow devrait ressembler, sans penser à la façon dont les nouvelles couleurs seront liées aux couleurs existantes. La réduction du contraste global était la clé pour préserver l'effet de profondeur dans l'interface, pour soutenir les ombres des éléments, pour appliquer le spectre complet des couleurs.

Commencer avec la conception de la mise en page nous a permis, tout d'abord, de comprendre quel effet esthétique nous recherchons, sans prêter attention aux exigences techniques du projet

▍Sélection d'un algorithme amélioré pour travailler avec les couleurs

Après avoir choisi un fond plus clair pour le thème sombre, j'ai eu l'occasion d'explorer plus profondément les échelles de couleurs. Tout d'abord, je devais résoudre certains des problèmes de couleur du système de conception existant, qui sont apparus lors de l'application du thème de la lumière. À l'extrémité brillante du spectre, les couleurs rouge et jaune ne ressemblaient pas à ce que j'aurais voulu. Certaines couleurs avaient les valeurs les plus claires, trop proches du blanc. Il y avait des couleurs, dont les valeurs les plus claires étaient trop sombres.

La version la plus claire du jaune ne se distinguait pas du blanc, et la plus foncée ne se distinguait pas du noir

. Nous avions des problèmes à l'extrémité sombre du spectre. En utilisant comme arrière-plan les couleurs@red-900et@blue-900, nous avons remarqué que ces couleurs ne se distinguent pas du noir et les unes des autres. Nous avions besoin d'un algorithme qui nous donnerait des couleurs dont le ton principal se distingue à la fois pour les versions les plus claires et les plus sombres. Cela permettrait la création de composants utilisant ces valeurs de couleur.

Les variations les plus sombres de nos couleurs étaient indiscernables du noir et les unes des autres. En

créant des composants qui implémentent des notifications, nous ne pouvions pas utiliser les couleurs de notre système de conception. Au lieu de cela, nous devions choisir nos propres couleurs à l'œil.

Ces couleurs sont belles, mais elles ne sont pas basées sur les valeurs de couleur de nos échelles de couleurs.J'ai

utilisé le merveilleux outil ColorBox de Lyft Designpour normaliser les couleurs. Au lieu de changer les couleurs de la manière la plus simple, linéairement, par incréments de 10%, j'ai appliqué des courbes de Bézier. Cela nous a permis de réaliser des améliorations significatives dans les positions extrêmes des échelles de couleurs.

Après avoir normalisé les couleurs dans la partie lumineuse du spectre, j'ai pu créer des notifications dont les couleurs sont tirées des couleurs de notre système de conception

▍ Couleurs foncées

Après avoir mis en ordre la version allégée du site, il est temps d'essayer de nouvelles couleurs sur un fond sombre. En conséquence, j'ai eu recours à des réglages manuels de ce que l'algorithme de correspondance des couleurs a produit, en faisant cela pour préserver les couleurs d'entreprise qui ont été utilisées pendant très longtemps. Cela m'a permis d'utiliser de nouvelles couleurs en production et en même temps de me passer de changements trop drastiques dans l'apparence du projet.

Gamme de couleurs entièrement normalisée

Implémentation d'un thème sombre dans l'interface Stacks

Si j'espérais en quelque sorte équiper Stack Overflow d'un thème sombre, je devrais d'abord implémenter un thème sombre dans notre système de conception Stacks , en l'utilisant comme terrain d'essai pour tester de nouvelles technologies.

▍Variables

J'avais besoin de convertir des valeurs de couleurs hexadécimales moins compilées statiques en propriétés CSS personnalisées conçues pour être utilisées pendant l'exécution du programme. Le fait est que les valeurs de couleur doivent être stockées en utilisant des structures de vue var(--red-500), plutôt qu'en utilisant des structures de vue statiques @red-500. C'était une tâche intéressante - à la fois dans la conception de notre système et dans l'ensemble du site. Nous avons généralement pris une seule valeur de couleur, comme @red-500, et l' avons rendue plus claire ou plus sombre pour mettre en évidence différents états des éléments (comme les états que les éléments prennent lorsqu'ils survolent ou lorsqu'ils se concentrent), à utiliser comme couleur d'arrière-plan ou couleur des bordures des éléments.

Si nous parlons des couleurs de chacun des boutons, que nous avons beaucoup, des couleurs de chaque état de chaque bouton, alors nous pouvons dire que ces couleurs ont été obtenues au cours d'un ensemble de transformations d'une seule valeur de couleur compilée. Cela m'a rappelé une scène du film "Le jeu pour une chute". Là, ils ont parlé de la possibilité de transformer un dix millionième investissement en milliards de dollars. Il n'est pas surprenant que de telles «transformations» aient conduit à la crise financière.

Le problème avec les variables CSS régulières est que vous ne pouvez pas leur appliquer de transformations Less. Les valeurs des variables CSS sont calculées au moment de l'exécution, donc une construction comme celle-ci darken(var(--red-500), 5%)conduit à une erreur de compilation.

Tout cela signifiait que je devais retravailler le code responsable, par exemple, du style des boutons. Au début, il ressemblait à ceci:

.s-btn {
    color: @white;
    background-color: @blue-600;
    border: 1px solid darken(@blue-600, 5%);
    
    &:hover {
        background-color: darken(@blue-600, 5%);
        border-color: darken(@blue-600, 10%);
    }
}

Je devais continuer pour indiquer les valeurs de couleur exactes décrites dans notre système de couleurs. En conséquence, je devais arriver à cette version du code:

.s-btn {
    color: var(--white);
    background-color: var(--blue-600);
    border: 1px solid var(--blue-700);
    
    &:hover {
        background-color: var(--blue-700);
        border-color: var(--blue-800);
    }
}

En même temps, il était clair que tout ne se limitait pas aux boutons. Par conséquent, j'ai dû retravailler les styles de tous les composants disponibles dans les piles. Il en va de même pour les notifications, les menus contextuels, les fenêtres modales, les liens et de nombreux autres composants.

▍ Compatibilité du navigateur

Si nous parlons de variables CSS, leur application signifiait la nécessité de considérer leur prise en charge par les navigateurs. En particulier, ils ne sont pas pris en charge par Internet Explorer 11 - un navigateur que nous n'avons jamais oublié. En conséquence, nous avons décidé d'abandonner la prise en charge d'IE11, en nous débarrassant de tous les hacks CSS que nous avons ajoutés au système au fil des années de son développement, en tenant compte des fonctionnalités de ce navigateur. De plus, nous avons décidé d'envoyer des notifications aux utilisateurs d'IE11 avec une proposition d'installer un nouveau navigateur. Cette décision n'a pas été facile pour nous. Sa mise en œuvre a nécessité des semaines de refactoring.

▍ Classes conditionnelles

IE11 ne me limitait plus et j'ai pu travailler avec des couleurs dans Stacks. J'ai décidé d'ajouter une bodyclasse à l'élément .theme-system. Cela fait, j'ai pu remplacer les couleurs claires par leurs équivalents sombres en utilisant la requête de média appropriée. De plus, nous pourrions refuser complètement la demande des médias en ajoutant simplement à la bodyclasse .theme-dark. Cela permettrait aux utilisateurs d'utiliser le thème sombre du site indépendamment de leurs paramètres système. Voici ce que j'ai obtenu en conséquence:

body {
    --red-600: #c02d2e;
}

body.theme-system {
    @media (prefers-color-scheme: dark) {
        --red-600: #d25d5d;
    }
}

body.theme-dark {
    --red-600: #d25d5d;
}

Pour obtenir une flexibilité totale, Stacks permet de travailler avec des classes de couleurs atomiques, qui s'appliquent uniquement lorsqu'un thème sombre est activé. Les détails sur la prise en charge CSS dans les piles peuvent être trouvés ici . Par exemple, ajouter une classe à un élément. d:bg-green-100, le concepteur exprime la pensée suivante: "En mode sombre, vous devez utiliser du vert pour l'arrière-plan bg-green-100." Des classes conditionnelles supplémentaires conçues pour le mode sombre nous permettent de supprimer les bordures des éléments, de changer l'arrière-plan et d'ajuster la couleur du texte. Dans ce tweet, vous pouvez voir un exemple intéressant de réglage des couleurs. Un tel réglage est parfois nécessaire en mode sombre. Je tiens à noter que l'une des sources d'inspiration pour travailler sur le mode sombre du site pour moi était le framework CSS Tailwind .

▍Utilisez un thème sombre dans les piles

Une fois le thème sombre implémenté dans les piles, nous avons décidé d'ajouter un bouton en haut de l'interface système qui vous permet de basculer entre les thèmes. Les employés de l'entreprise auraient dû avoir une capacité rapide et pratique de basculer entre les différents thèmes de couleurs du site.

Basculer entre les thèmes clairs et sombres dans les piles

Implémentation d'un thème sombre sur le site principal de Stack Overflow

J'ai résolu assez facilement les tâches liées à l'implémentation du thème sombre dans l'interface du système de conception Stacks. Le refactoring, qui prend en compte les considérations de développement futur du système, permet aux piles d'être plus petites que le site principal des conséquences de décisions erronées prises par le passé. Afin d'équiper le thème sombre avec Stack Overflow, j'avais besoin de fournir un support pour moins de variables dans un souci de compatibilité descendante de la solution. Cela nous a permis d'organiser progressivement l'application du thème sombre, dans des parties distinctes de l'interface.

Étant donné que la plupart de notre interface, créée après 2018, est basée sur des piles, cette partie de l'interface reçoit, sans efforts supplémentaires de notre part, un thème sombre et des mises en page réactives. Qu'en est-il de la partie principale de l'interface? Tout ici est loin d'être aussi simple.

▍Couleurs principales du site

Pour commencer, je devais apporter les plus grandes modifications au site qui pourraient être apportées sans violer le thème d'éclairage standard Stack Overflow. Les tâches que j'ai dû résoudre étaient principalement de remplacer les variables statiques Less par des variables CSS équivalentes. Tout d'abord, j'ai appliqué le style background-color: var(--white)à l'arrière-plan du site, en le remplaçant par le style background-color: @white. Grâce à cela, la zone principale des villages peut maintenant être facilement repeinte en arrière-plan de couleur sombre. Ensuite, j'ai fait la même opération avec les couleurs des polices et quelques autres éléments. Ce travail consistait principalement à supprimer une grande quantité de code CSS, car, par exemple, nous aimions souvent les styles trop détaillés, définissant les couleurs de police des éléments enfants, bien que nous puissions bien nous en tirer avec les valeurs de couleur héritées des éléments parents.

▍ Démonstration d'un nouveau design pour les employés de l'entreprise

Après avoir travaillé sur de gros blocs du site, j'ai demandé à nos programmeurs Adam Lear et Nick Craver de m'aider à trouver un moyen de montrer une version préliminaire du thème sombre au personnel de Stack Overflow. Cela permettrait aux employés d'inclure un sujet sombre, qui est encore très loin d'être prêt à voir quelles zones du site doivent encore être améliorées. Je pensais que cela les encouragerait à affiner les parties du site avec le plus de trafic. Cela me permettrait de surmonter l'obstacle principal à un nouveau design. À savoir, cela aiderait à intégrer la nouvelle conception dans la base de code existante.

▍Boutons

Si la zone du site sur laquelle je travaillais a été créée à l'aide de Stacks, alors pour la préparer à l'utilisation du mode sombre, il était nécessaire de résoudre peu de problèmes. Disons qu'au cours du travail, il a été possible de décider que quelque part la bordure n'était pas nécessaire, ou - que quelque part, une nuance de gris spéciale était nécessaire comme couleur de fond. Cette préparation à l'utilisation du régime sombre pourrait être limitée. Malheureusement, la plupart du site a été créé sans utiliser de piles.

Cela s'est manifesté le plus clairement en ce qui concerne les boutons. Au fil des années de travail sur le site, de nombreuses implémentations de boutons y ont été utilisées. Cela a été particulièrement frustrant lorsque nous avons stylisé les éléments eux-mêmes button. Cela signifie que tout élément button, ou élément, décoré commeinput type=«button», a reçu le style par défaut. Ce style a un niveau de spécificité très élevé et est basé sur un ensemble de règles obsolètes.

Le fait ci-dessus a conduit à la nécessité de beaucoup de refactoring, qui est toujours en cours. Il vise à supprimer les styles CSS au niveau élément buttonet à les remplacer par des équivalents des piles. En particulier, nous parlons du fait que des centaines d'éléments input type=«submit»doivent être remplacés par <button type="submit" class="s-btn s-btn__primary">. En plus d'ajouter du travail, je note que nous avons souvent lié la fonctionnalité JavaScript aux sélecteurs visuels. Si vous modifiez les classes qui affectent l'apparence de l'élément, cela peut casser la fonctionnalité du bouton. En conséquence, pendant le traitement de milliers de boutons, j'ai dû d'abord leur ajouter des classesjs-, connectez-leur des gestionnaires, puis supprimez les anciens styles qui définissent l'apparence des boutons.

Cela m'a finalement conduit à supprimer la plupart des anciennes classes de boutons, ce qui permettait aux boutons de changer correctement de couleur lors de l'activation d'un thème sombre.

▍ Titre du site Web

Pour compliquer la tâche, l'en-tête utilisé sur l'ensemble du site peut fonctionner dans différents modes. Nous parlons des modes clair et sombre, et du mode support pour un sujet spécial. L'option de site pour les équipes (Stack Overflow for Teams) et pour les systèmes d'entreprise utilise de force un thème d'en-tête sombre. De plus, la version de la commande utilise la couleur spécifiée par la couleur de l'avatar de l'équipe. Comme beaucoup de nos autres composants, CSS pour le titre du site prévoit une seule couleur, qui détermine si le titre est clair ou foncé. Cette couleur est ensuite transformée en utilisant des instructions Less moins complexes, ce qui vous permet d'obtenir ses différentes options. Cependant, nous n'avons pas pu faire ce que nous avons fait lorsque nous avons traité le code du système de conception. Autrement dit, ils ne pouvaient pas simplement jeter tous les anciens CSS et les remplacer par du code,qui utilise des variables CSS. Le fait est que nos entreprises clientes, en fait, complètement, à l'aide de thèmes, personnalisent l'apparence de l'en-tête. Dans ce cas, les options de couleur sont générées sur la base d'une seule couleur.

Cap léger

Titre sombre

En- tête de commande Dans le cas de l'en-tête lumineux Stack Overflow, nous avons dû trouver un mécanisme pour savoir si une certaine couleur a été définie à l'aide d'une variable CSS ou à l'aide d'une valeur hexadécimale statique. Si la couleur a été définie à l'aide d'une variable CSS, nous pourrions ignorer complètement sa transformation Moins, créant un en-tête qui pourrait changer les couleurs en fonction des paramètres du thème sombre. Si une variable Less statique était utilisée à la place, vous deviez évaluer la couleur pour voir si elle était claire ou foncée et créer un en-tête approprié.

En conséquence, nous sommes arrivés à cette approche:

& when ( iscolor(@theme-topbar-background-color) ) {
     @theme-topbar-style: if(luma(@theme-topbar-background-color) >= 50%, light, dark);
 }
 & when not ( iscolor(@theme-topbar-background-color) ) {
     @theme-topbar-style: automatic;
 }

Ensuite, en fonction de la valeur reçue ( automatic, lightou dark), l'en-tête correct est créé.

▍Étiquettes

Si je pouvais donner un seul conseil à ceux qui sont impliqués dans la conception des composants, alors il se lirait: "Ne décrivez pas dans les composants ce qui affecte leur emplacement sur la page." En d'autres termes, quel type d'espace sépare les composants doit déterminer le contexte dans lequel ils sont appliqués. Pas besoin de définir de telles choses dans le composant lui-même. Dans les versions antérieures de Stack Overflow, il était décidé que le post-tagremplissage externe devait être appliqué aux composants . Dans le même temps, les balises, comme les boutons, se sont révélées être sujettes à un problème lié à JavaScript. Pour rendre les choses encore plus difficiles, la plupart des balises ont été générées à l'aide d'une seule méthode d'assistance.

La refactorisation des balises impliquait de remplacer post-tag-components pars-tag-composants conçus pour utiliser différents sujets. Ce travail a également inclus des modifications de JavaScript, en tenant compte de l'utilisation js-tag. De plus, il était nécessaire de changer la méthode responsable de la génération des balises, afin qu'elle accepte les classes arbitraires qui affectent le placement des éléments. Le fait est que dans certains contextes, les balises peuvent devoir être placées dans la disposition flexible, ce faisant au lieu de s'appuyer sur des retraits externes prédéfinis (ou au lieu de traiter ces retraits).

▍ Styling publications

La majeure partie de Stack Overflow est constituée de publications utilisateur. Ces publications, à savoir les questions, réponses, commentaires, sont rédigées à l'aide du balisage Markdown. Lors du lancement de Stack Overflow, Markdown Markup était une technologie relativement nouvelle.

Au fil des ans, le Web a développé des méthodes standard pour afficher quelque chose comme des titres et des citations. L'introduction du sujet sombre a été un excellent moment pour revoir notre approche de la mise en forme des publications. Le problème le plus controversé dans cette affaire a été le formatage des citations.

Initialement, les citations étaient encadrées à l'aide d'une puissante couleur de fond jaune, ce qui réduisait le contraste de la citation elle-même. De plus, la couleur jaune provoque certains problèmes lorsqu'elle est affichée sur un fond sombre. En conséquence, nous sommes passés à la méthode généralement acceptée d'affichage des citations, en utilisant une barre verticale grise étroite pour les mettre en surbrillance.

▍ Style de code

Sur les pages de Stack Overflow, ce qui est assez compréhensible, de nombreux morceaux de code sont affichés. Les couleurs que nous avons utilisées pour mettre en évidence la syntaxe n'avaient rien à voir avec nos couleurs de signature. Je soupçonne fortement que ces couleurs sont l'héritage de la première bibliothèque utilisée dans le projet pour la coloration syntaxique. Après avoir analysé ces couleurs, j'ai décidé de soumettre le reflet de la syntaxe à une refonte profonde. En conséquence, les couleurs de rétroéclairage ont été remplacées par des couleurs de notre système de conception. Cela s'applique aux sujets clairs et sombres. Et cela est fait pour que ce qui s'est passé ne diffère pas radicalement de ce qu'il était avant.

résultats

Le thème clair et la version bêta du thème sombre, sorti le 30 mars.

En raison du volume de travail de refactoring que nous avons effectué en passant au sujet sombre, nous avons pu apporter des modifications assez importantes à l'apparence du projet sans aucune difficulté. Sur la base de ce que nous avons maintenant, nous pouvons, par exemple, développer un thème de site Web à contraste élevé qui augmente son accessibilité.

La création du thème sombre est le résultat d'un changement fondamental dans l'approche de la conception de Stack Overflow. En particulier, nous parlons de l'utilisation d'un système de conception , que je fais la promotion depuis un an maintenant. Et la création d'un thème sombre a été une excellente occasion pour moi de reconstruire de nombreuses parties du site. Il s'agit du premier de nombreux projets qui augmenteront la disponibilité de Stack Overflow.

Si vous ne prenez pas en compte le rejet du support d'IE11, les travaux sur le sujet sombre ont commencé en juillet 2019 avec ce PR, visant à rechercher la situation. Avant cela, en avril 2019, il y avait eu des discussions sur un sujet sombre. En octobre 2019, une version expérimentale d'un thème sombre est entrée en production. Et puis, après au moins 60 relations publiques, une version bêta du thème sombre a été présentée aux utilisateurs. C'est arrivé le 30 mars 2020.

Chers lecteurs! Utilisez-vous Stack Overflow? Aimez-vous leur nouveau thème sombre?

Création d'un thème sombre pour le débordement de pile