Quase todo sistema operacional hoje vem com suporte a definir um nível de "brilho" da interface, que geralmente tem dois valores: claro e escuro (light ou dark). As implementações modernas de CSS incluem suporte a verificar qual a preferência do usuário, se houver, e adaptar sua interface de acordo. Vamos implementar um modo noturno com CSS, usando CSS variables para deixar o código mais escalável e menos repetitivo!

CSS é uma parada poderosa. Apesar de, originalmente, servir para suportar o HTML e definir estilos para itens em um documento, a comunidade de desenvolvimento front-end mostrou que dá para fazer muito mais que isso e cria verdadeiras experiências com CSS, substituindo ferramentas de animação e imagens por linhas de código de folha de estilos. Juntando isso com o dinamismo de JavaScript, dá para criar interações bem legais diretamente na web, muitas vezes sem assets extra além do próprio código.

Esse post é um experimento para criar algo que não é novo, mas que é divertido e mostra algumas das capacidades de criar animações interativas com CSS e JS. Minha ideia é tentar fazer uma animação para acompanhar um formulário de login sem usar imagens ou outros recursos além de HTML, CSS e JS. Eu não sou um artista então não espere uma obra de arte. A ideia é, com pouco código, fazer um efeito que fique legal.

Na era do CSS moderno, eu falar em animações feitas com JavaScript pode fazer você achar que estou desenterrando cadáveres. Com o CSS atual, a vida de quem quer fazer animações bonitas e rápidas melhorou bastante. Infelizmente, nem tudo dá para animar com CSS ainda, e algumas coisas precisam ser feitas na mão, via JavaScript.