Dark Mode é um assunto (e implementação) que, com o tempo, vem ganhando cada vez mais atenção, destaque e estudos — não por acaso, pois esse modo escuro tem sim sua importância em UX e UI.
Como em quase tudo o mundo de desenvolvimento web, existem muitas possibilidades e técnicas para a implementação de tal recurso em um site ou app. Neste artigo, veja a maneira mais fácil de implementar Dark Mode com CSS.
O jeito mais fácil de fazer dark mode
Dentre as diversas técnicas possíveis, passando das mais simples às mais complexas, o jeito mais fácil de implementar um Dark Mode é com CSS puro.
É até “instintivo” para a maioria dos devs front-end julgar que, ao se valer os recursos nativos que o próprio CSS oferece, esse tipo de implementação pode ser alcançada facilmente.
Basicamente, é preciso de uma “dica” (tip) ao CSS para que se porte de maneira diferente, ou melhor, para que apresente os estilos (sejam gerais ou de componentes específicos) de uma maneira diferenciada (no caso, dark mode).
Existem algumas maneiras de se conseguir isso com CSS, mas, certamente, uma das mais simples (ou a mais simples) é usar uma classe predecessora e estilizar de maneira diferente a partir daí.
Classe diferenciadora
Para ficar mais claro, considere o seguinte trecho de HTML:
|
1 2 3 |
<h1>Lorem ipsum dolor sit</h1> <p>Lorem ipsum <a href="#">dolor sit amet</a> consectetur adipisicing elit.</p> |
Considerando que há estilos predeterminados que afetam esses elementos.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body { background-color: #fafafa; color: #555; } a { color: #222; } a:hover { color: #ec5840; } |
Obviamente, esta não é a maneira mais indicada para se trabalhar com estilizações de elementos, mas, didaticamente, para demonstrar a aplicação de um dark mode com CSS, serve muito bem.
Uma técnica já usada há muitos anos por devs front end para fazer diferenciações de estilos em determinados contextos é: usar uma classe predecessora (geralmente, em <html> ou <body>) para alcançar estilizações condicionais.
Considere o seguinte incremento ao código CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body.dark-mode { background-color: #212529; color: #899095; } .dark-mode a { color: #dee2e6; } .dark-mode a:hover { color: #3cc368; } |
Com isso, quando houver a classe dark-mode em um elemento mais acima na hierarquia HTML (<html> ou <body>), os estilos serão alterados.
É o que poderia se chamar de estilização condicional, quer dizer, caso seja cumprida determinada condição (haver uma classe predecessora), há alteração em como as coisas são apresentadas.
Dark Mode com Variáveis CSS
Mas é possível tornar as coisas ainda mais fáceis e tornar o código mais moderno ao usar variáveis CSS para implementar dark mode.
Pensando em um cenário mas próximo ao mundo real, um site/app possui dezenas ou centenas de componentes e estilos gerais. Seguindo a técnica apresentada, muito código extra deveria ser colocado para adequar todos os estilos a um modo escuro.
Ao usar Variáveis CSS, as coisas ficam mais simples: fazendo uma alteração condicional em seus respectivos valores, não é preciso alterar sequer uma linha de código que implementou as variáveis.
Se o código-base mostrado inicialmente fosse o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
:root { --body-bg: #fafafa; --body-color: #555; --link-color: #222; --link-color-hover: #ec5840; } body { background-color: var(--body-bg); color: var(--body-color); } a { color: var(--link-color); } a:hover { color: var(--link-color-hover); } |
A partir daí, com somente uma pequena adição, seria possível ter estilos completamente adequados a um dark mode:
|
1 2 3 4 5 6 |
.dark-mode:root { --body-bg: #212529; --body-color: #899095; --link-color: #dee2e6; --link-color-hover: #3cc368; } |
Como já explicado, o código que faz a implementação dessas variáveis não precisa ser alterado em sequer 1 linha, já que as variáveis continuam sendo exatamente as mesmas, somente com seus respectivos valores condicionalmente alterados.
A partir daí, se o elemento <html> (já que se usou :root) tiver a classe .dark--mode, o modo escuro entrará em ação. :)
Para ver mais detalhes da implementação desse código e como fazer um toogle de dark mode com um JavaScript bem facinho, assista ao vídeo no início do artigo.
Conclusão
É verdade que existem muitas maneiras diferentes para implementar dark mode (inclusive soluções prontas, como uma biblioteca que já mostramos), desde as mais simples, até as que utilizam um mix de tecnologias diferentes para fazer uma implementação condizente.
Essa variedade é benéfica, pois cada caso pode demandar uma técnica diferente em razão de suas peculiaridades. É o que geralmente acontece no chamado mundo real.
De qualquer maneira, fica aí a técnica mais fácil para implementar dark mode com CSS, que, certamente, consegue cobrir uma vasta gama de situações possíveis.