Em 30 de março de 2020, os desenvolvedores do Stack Overflow deram aos visitantes do site a oportunidade de usar uma versão beta do tema sombrio. O material, cuja tradução publicamos, é dedicado à história de como o tema sombrio do Stack Overflow foi criado.Banner no Stack Overflow, que permite incluir um tema sombrioMeu nome é Aaron Sheki. Sou o chefe de design do Stack Overflow. Participo do design dos componentes da interface subjacentes aos novos recursos do projeto.Para começar, um pouco de ironia. Pessoalmente, não sou fã de temas de interface obscuros.Costumo ver que o nível de contraste das interfaces escuras é muito baixo. O design dessas interfaces é difícil de usar uma gama completa de cores. O mesmo se aplica à simulação de volume usando sombras e à aplicação de outros efeitos visuais. Quando leio um texto claro, localizado em um fundo escuro, meus olhos se cansam. É difícil lidar com fenômenos como contraste simultâneo ao usar temas claros e, se um tema sombrio for usado, tudo se tornará mais complicado.Mas sou a pessoa cujos esforços trouxeram um tema sombrio no Stack Overflow.O trabalho sobre o qual quero falar nunca teve como objetivo específico o desenvolvimento de um tópico obscuro, apesar do fato de muitos usuários pedirem para equipar o recurso com esse tópico. Mas, ao avançar para um tópico obscuro, tivemos que resolver muitos problemas. Em particular, o código de front-end do Stack Overflow foi atualizado, a acessibilidade do conteúdo foi aprimorada. Trabalhando em um tópico obscuro, recebemos um incentivo para usar nosso sistema de design mais amplamente no projeto .Podemos dar aos usuários um tema sombrio e, simultaneamente, abrir o caminho para melhorar a acessibilidade do projeto? Respondemos afirmativamente a essa pergunta, tendo feito tudo o que vou contar agora.Pesquisa de cores
Ao criar as escalas de cores originais para o projeto, nós, provavelmente um pouco ingênuos, pegamos um determinado valor de cor e o modificamos usando transformações implementadas usando Less . Assim, por exemplo, poderíamos declarar uma variável menos @rede tornar a cor mais escura várias vezes usando o design darken(@red, 10%). O mesmo vale para vários esclarecimentos de cores usando tint(@red, 10%). Isso pode fornecer uma escala de cores na qual as cores estão no intervalo de @red-050até @red-900incrementos de 10%.Quando tentei entender como o recurso Estouro de pilha pode parecer no modo escuro, decidi tentar alterar o fundo branco para preto e "virar" as escalas de cores. Com essa abordagem, a cor @red-050se torna colorida@red-900, as cores mudam correspondentemente entre as cores inicial e final da escala. Mas essas cores permanecem as mesmas que as usadas anteriormente.As cores claras e escuras são escuras para o vermelho.Comessa abordagem, o contraste dos elementos sofreu. O que aconteceu acabou por conter algo que, em geral, eu não gostei em tópicos obscuros. Por exemplo, se você observar atentamente a versão mais escura do vermelho, localizada em um fundo escuro, verá que a cor é quase indistinguível. Falaremos mais sobre isso abaixo.Definitivamente, precisamos criar algo melhor.StartedIntrodução: projeto de layout
Apenas tentando desenhar as escalas de cores, na verdade não consegui nada. Esta etapa não pode ser chamada de início real do trabalho em um tópico obscuro. Portanto, decidi começar a desenvolver um layout e selecionar manualmente as cores no Figma . Selecionei as cores, focando em como, na minha opinião, o Stack Overflow deve parecer, e não pensando em como as novas cores se relacionarão com as existentes. Reduzir o contraste geral foi a chave para preservar o efeito de profundidade na interface, para apoiar as sombras dos elementos, para aplicar todo o espectro de cores.A introdução do design do layout permitiu-nos, antes de tudo, entender para que efeito estético estamos buscando, sem prestar atenção aos requisitos técnicos do projeto.OfSeleção de um algoritmo aprimorado para trabalhar com cores
Depois de escolher um fundo mais claro para o tema escuro, tive a oportunidade de explorar mais profundamente as escalas de cores. Primeiro, eu precisava lidar com alguns dos problemas de cores do sistema de design existente, que apareceram ao aplicar o tema da luz. No final brilhante do espectro, as cores vermelha e amarela não eram da maneira que eu gostaria. Algumas cores tinham os valores mais claros, muito próximos do branco. Havia cores, cujos valores mais claros eram escuros demais.A versão mais clara do amarelo era indistinguível do branco e a mais escura era indistinguível do preto.Tivemosproblemas no extremo escuro do espectro. Usando, como fundo, cores@red-900e@blue-900, notamos que essas cores são indistinguíveis do preto e um do outro. Precisávamos de um algoritmo que nos desse cores cujo tom principal seja distinguível para as versões mais clara e mais escura. Isso permitiria a criação de componentes usando esses valores de cores.As variações mais escuras de nossas cores eram indistinguíveis do preto e umas das outras:criando componentes que implementam notificações, não podemos usar as cores do nosso sistema de design. Em vez disso, precisávamos escolher nossas próprias cores nos olhos.Essas cores são bonitas, mas não se baseiam nos valores de cores de nossas escalas de cores.Useia maravilhosa ferramenta ColorBox da Lyft Designpara normalizar as cores. Em vez de alterar as cores da maneira mais simples, linearmente, em incrementos de 10%, apliquei curvas de Bezier. Isso nos permitiu obter melhorias significativas nas posições extremas das escalas de cores.Depois de normalizar as cores na parte brilhante do espectro, consegui criar notificações cujas cores são retiradas das cores do nosso sistema de design▍ cores escuras
Depois de colocarmos em ordem a versão clara do site, é hora de experimentar novas cores contra um fundo escuro. Como resultado, recorri a configurações manuais do que o algoritmo de correspondência de cores produzia, fazendo isso para preservar as cores corporativas que são usadas há muito tempo. Isso me permitiu usar novas cores na produção e, ao mesmo tempo, sem mudanças drásticas na aparência do projeto.Gama de cores normalizada totalImplementando um Tema Sombrio na Interface Pilhas
Se, de alguma forma, eu pretendia equipar o Stack Overflow com um tema sombrio, primeiro seria necessário implementar um tema sombrio em nosso sistema de design do Stacks , usando-o como campo de teste para testar novas tecnologias.▍Variáveis
Eu precisava converter valores estáticos de cor hexadecimal menos compilados em propriedades CSS personalizadas projetadas para serem usadas enquanto o programa estava em execução. O ponto é que os valores de cores devem ser armazenados usando estruturas de vista var(--red-500), em vez de usar estruturas de vista estáticas @red-500. Foi uma tarefa interessante - tanto no design do sistema quanto em todo o site. Geralmente, pegávamos um único valor de cor, como @red-500, e tornávamos mais claro ou mais escuro destacar estados diferentes dos elementos (como os estados que os elementos assumem quando passam o mouse sobre eles ou quando ficam em foco), para usar como cor de plano de fundo ou nas bordas dos elementos.Se falarmos sobre as cores de cada um dos botões, que temos muito, sobre as cores de cada estado de cada botão, podemos dizer que essas cores foram obtidas no decorrer de um conjunto de transformações de um único valor de cor compilado. Isso me lembrou uma cena do filme "O jogo para uma queda". Lá eles conversaram sobre a possibilidade de transformar um investimento de dez milhões de milhões em bilhões de dólares. Não é de surpreender que essas "transformações" levaram à crise financeira.O problema com variáveis CSS regulares é que você não pode aplicar menos transformações a elas. Os valores das variáveis CSS são calculados em tempo de execução, portanto, uma construção como essa darken(var(--red-500), 5%)leva a um erro de compilação.Tudo isso significava que eu precisava refazer o código responsável, por exemplo, pelos botões de estilo. A princípio, ele ficou assim:.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%);
}
}
Eu precisava indicar os valores exatos das cores descritas em nosso sistema de cores. Como resultado, eu precisava chegar a esta versão do código:.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);
}
}
Ao mesmo tempo, ficou claro que nem tudo estava limitado a botões. Portanto, eu precisava refazer os estilos de todos os componentes disponíveis no Stacks. O mesmo aconteceu com notificações, menus pop-up, janelas modais, links e muitos outros componentes.▍ Compatibilidade do navegador
Se falamos de variáveis CSS, a aplicação delas significava a necessidade de considerar o suporte dos navegadores. Em particular, eles não são suportados pelo Internet Explorer 11 - um navegador que nunca esquecemos. Como resultado, decidimos abandonar o suporte ao IE11, livrando-nos de todos os hacks CSS adicionados ao sistema ao longo dos anos de seu desenvolvimento, levando em consideração os recursos deste navegador. Além disso, decidimos enviar notificações aos usuários do IE11 com uma proposta para instalar um novo navegador. Essa decisão não foi fácil para nós. Sua implementação exigiu semanas de refatoração.ClassesClasses tradicionais
O IE11 não me limitou mais e pude trabalhar com cores no Stacks. Decidi adicionar uma bodyclasse ao elemento .theme-system. Depois disso, consegui substituir as cores claras por seus equivalentes escuros usando a consulta de mídia apropriada. Além disso, poderíamos recusar completamente a solicitação de mídia simplesmente adicionando à bodyclasse .theme-dark. Isso permitiria que os usuários usassem o tema escuro do site, independentemente das configurações do sistema. Aqui está o que eu tenho como resultado:body {
--red-600: #c02d2e;
}
body.theme-system {
@media (prefers-color-scheme: dark) {
--red-600: #d25d5d;
}
}
body.theme-dark {
--red-600: #d25d5d;
}
Para obter flexibilidade total, o Stacks permite trabalhar com classes de cores atômicas, que se aplicam apenas quando um tema escuro está ativado. Detalhes sobre o suporte a CSS no Stacks podem ser encontrados aqui . Por exemplo, adicionando uma classe a um elemento. d:bg-green-100, o designer expressa o seguinte pensamento: "No modo escuro, você precisa usar verde como plano de fundo bg-green-100". Classes condicionais adicionais projetadas para o modo escuro nos permitem remover as bordas dos elementos, alterar planos de fundo e ajustar a cor do texto. Em este Tweet você pode ver um exemplo interessante de ajuste de cor. Às vezes, essa configuração é necessária no modo escuro. Quero observar que uma das fontes de inspiração ao trabalhar no modo escuro do site para mim foi a estrutura CSS do Tailwind .▍Use um tema sombrio nas pilhas
Depois que o tema escuro foi implementado no Stacks, decidimos adicionar um botão na parte superior da interface do sistema que permite alternar entre temas. Os funcionários da empresa deveriam ter uma capacidade rápida e conveniente de alternar entre os diferentes temas de cores do site.Alterne entre temas claros e escuros no StacksImplementando um Tema Sombrio no Site Principal do Stack Overflow
Resolvi as tarefas relacionadas à implementação do tema sombrio na interface do sistema de design do Stacks com relativa facilidade. A refatoração, que leva em consideração as considerações sobre o desenvolvimento futuro do sistema, facilita que o Stacks seja menor que o site principal, devido às consequências de decisões erradas tomadas no passado. Para equipar o Stack Overflow com um tema sombrio, eu precisava fornecer suporte para Menos variáveis por uma questão de compatibilidade com versões anteriores da solução. Isso nos permitiu organizar a aplicação do tema escuro de forma incremental, em partes separadas da interface.Como a maior parte de nossa interface, criada após 2018, é baseada em pilhas, essa parte da interface recebe, sem esforços adicionais de nossa parte, um tema sombrio e layouts responsivos. E a parte principal da interface? Tudo aqui está longe de ser tão simples.Ain Principais cores do site
Para começar, eu precisava fazer as maiores alterações no site que poderiam ser feitas sem violar o tema claro padrão Stack Overflow. As tarefas que tive que resolver foram principalmente substituir as variáveis estáticas Less por variáveis CSS equivalentes a elas. Primeiro, apliquei o estilo background-color: var(--white)no plano de fundo do site, substituindo-o pelo estilo background-color: @white. Graças a isso, a área principal das aldeias poderia agora ser facilmente pintada na cor escura de fundo. Então eu fiz a mesma operação com as cores das fontes e alguns outros elementos. Esse trabalho consistiu principalmente na remoção de uma grande quantidade de código CSS, pois, por exemplo, gostávamos de estilos excessivamente detalhados, definindo as cores da fonte dos elementos filhos, embora pudéssemos conviver com os valores de cores herdados dos elementos pais.▍ Demonstração de um novo design para os funcionários da empresa
Depois de trabalhar em grandes blocos do site, pedi aos nossos programadores Adam Lear e Nick Craver que me ajudassem a encontrar uma maneira de mostrar uma versão preliminar do tema sombrio à equipe do Stack Overflow. Isso permitiria que os funcionários incluíssem um tópico obscuro, que ainda está muito longe de estar pronto para ver quais áreas do site ainda precisam melhorar. Pensei que isso os incentivaria a refinar partes do site com mais tráfego. Isso me permitiria superar a principal barreira a um novo design. Ou seja, ajudaria a integrar o novo design à base de código existente.▍Botões
Se a área do site em que eu estava trabalhando foi criada usando o Stacks, para prepará-lo para o modo escuro, foi necessário resolver muitos problemas. Digamos que, durante o curso do trabalho, foi possível decidir que em algum lugar a borda não era necessária ou - em algum lugar, era necessário um tom especial de cinza como cor de fundo. Essa preparação para o uso do regime sombrio pode ser limitada. Infelizmente, a maior parte do site foi criada sem o uso de pilhas.Isso foi mais claramente manifestado quando se tratava dos botões. Ao longo dos anos de trabalho no site, ele implementou muitas implementações de botões. Isso foi especialmente frustrante, pois estilizamos os próprios elementos button. Isso significa que qualquer elemento buttonou elemento decorado comoinput type=«button», foi atribuído o estilo padrão. Esse estilo tem um nível muito alto de especificidade e é baseado em um conjunto de regras desatualizado.O fato acima levou à necessidade de muita refatoração, que ainda está em andamento. Seu objetivo é remover estilos CSS no nível do elemento buttone substituí-los por equivalentes do Stacks. Em particular, estamos falando sobre o fato de que centenas de elementos input type=«submit»precisam ser substituídos por <button type="submit" class="s-btn s-btn__primary">. Além de adicionar trabalho, observo que frequentemente vinculamos a funcionalidade JavaScript a seletores visuais. Se você alterar as classes que afetam a aparência do elemento, isso pode prejudicar a funcionalidade do botão. Como resultado, durante o processamento de milhares de botões, eu precisei adicionar classes a eles primeirojs-, conecte manipuladores a eles e livre-se dos estilos antigos que definem a aparência dos botões.Isso me levou a remover a maioria das classes antigas de botões, o que permitiu que os botões mudassem de cor corretamente ao ativar um tema escuro.Title Título do site
Para complicar a tarefa, o cabeçalho usado em todo o site pode funcionar em modos diferentes. Estamos falando de modos claro e escuro, e sobre o modo de suporte para um tópico especial. A opção do site para equipes (Stack Overflow para equipes) e para sistemas corporativos usa à força um tema de cabeçalho escuro. Além disso, a versão do comando usa a cor especificada pela cor do avatar da equipe. Como muitos outros componentes, o CSS para o título do site fornece uma única cor, que determina se o título é claro ou escuro. Essa cor, então, usando instruções Menos complexas, é transformada, o que permite obter diferentes opções. No entanto, não pudemos fazer o que fizemos quando processamos o código do sistema de design. Ou seja, eles não podiam simplesmente jogar fora todo o CSS antigo e substituí-lo por código,que usa variáveis CSS. O fato é que nossos clientes corporativos, de fato, completamente, com a ajuda de temas, personalizam a aparência do cabeçalho. Nesse caso, as opções de cores são geradas com base em uma única cor.
& 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;
}
Em seguida, com base no valor recebido ( automatic, lightou dark), o cabeçalho correto é criado.▍Tags
Se eu pudesse dar apenas um conselho aos envolvidos no design de componentes, ele leria: "Não descreva nos componentes o que afeta sua localização na página". Em outras palavras, que tipo de espaço separa os componentes deve determinar o contexto em que eles são aplicados. Não há necessidade de definir essas coisas no próprio componente. Nas versões anteriores do Stack Overflow, foi decidido que post-tago preenchimento externo deveria ser aplicado aos componentes . Ao mesmo tempo, tags, como botões, estavam sujeitas a um problema relacionado ao JavaScript. Para tornar as coisas ainda mais difíceis, a maioria das tags foi gerada usando um único método auxiliar.A refatoração de tags envolveu a substituição de post-tag-components pors-tagcomponentes projetados para usar tópicos diferentes. Este trabalho também incluiu alterações no JavaScript, levando em consideração o uso js-tag. Além disso, foi necessário alterar o método responsável pela geração de tags, para que ele aceitasse classes arbitrárias que afetam a localização dos elementos. O fato é que, em certos contextos, as tags podem precisar ser colocadas no layout flexível, fazendo isso em vez de depender de recuos externos predefinidos (ou em vez de lidar com esses recuos).Publications Publicações de estilo
A maior parte do Stack Overflow é composta de publicações do usuário. Essas publicações, ou seja, perguntas, respostas, comentários, são feitas com a ajuda da marcação Markdown. Durante o lançamento do Stack Overflow, o Markdown Markup foi uma tecnologia relativamente nova.Ao longo dos anos, a web desenvolveu algumas maneiras padrão de exibir algo como títulos e citações. A introdução do tópico sombrio foi um excelente momento para revisar nossa abordagem de formatação de publicações. A questão mais controversa nesse assunto foi a formatação de citações.Inicialmente, as aspas foram enquadradas usando uma poderosa cor de fundo amarela, o que reduziu o contraste da própria cotação. Além disso, a cor amarela causa alguns problemas quando é exibida em um fundo escuro. Como resultado, passamos ao método geralmente aceito de exibição de cotações, usando uma barra vertical cinza estreita para destacá-las.▍ Estilo do código
Nas páginas do Stack Overflow, o que é bastante compreensível, muitos trechos de código são exibidos. As cores que usamos para destacar a sintaxe não tinham nada a ver com as cores de nossa assinatura. Eu tenho uma forte suspeita de que essas cores sejam o legado da primeira biblioteca usada no projeto para destacar a sintaxe. Depois de analisar essas cores, decidi sujeitar o destaque da sintaxe a um profundo redesenho. Como resultado, as cores da luz de fundo foram substituídas por cores do nosso sistema de design. Isso se aplica a tópicos claros e escuros. E isso é feito para que o que aconteceu não difira radicalmente do que era antes.resultados
O tema claro e a versão beta do tema sombrio, lançada em 30 de março.Devido ao volume de trabalho de refatoração que realizamos ao passar para o tópico sombrio, fomos capazes de fazer grandes mudanças na aparência do projeto sem dificuldades. Com base no que temos agora, podemos, por exemplo, desenvolver um tema de site de alto contraste que aumenta sua acessibilidade.A criação do tema sombrio foi o resultado de uma mudança fundamental na abordagem do design do Stack Overflow. Em particular, estamos falando sobre o uso de um sistema de design , que venho promovendo há um ano. E criar um tema sombrio foi uma excelente oportunidade para reconstruir muitas partes do site. Este é o primeiro de muitos projetos que aumentarão a disponibilidade do Stack Overflow.Se você não levar em conta a rejeição do apoio ao IE11, o trabalho sobre o tema sombrio começou em julho de 2019 com este PR, com o objetivo de pesquisar a situação. Antes disso, em abril de 2019, havia discussões sobre um tópico obscuro. Em outubro de 2019, uma versão experimental de um tema sombrio entrou em produção. E, depois que foram feitas pelo menos 60 RPs, uma versão beta do tema sombrio foi apresentada aos usuários. Aconteceu em 30 de março de 2020.Queridos leitores! Você usa o estouro de pilha? Você gosta do novo tema sombrio?