👨‍💻 QR Code Component (HTML + CSS + JS + Dark-Light Theme)

Community feedback

• 

  Rynex Akil•100

  @rynex-zv

  Posted over 2 years ago

  The only thing that is missing in dark theme is:

  .attribution{
  color: white;
  }
  

  Will done!

  10

  Marked as helpful
• 

  Julio Cinquina•270

  @JulioCinquina

  Posted almost 3 years ago

  Parabéns pela solução, Adriano! Sua versão personalizada ficou incrível!

  Achei bem legal, fiquei com vontade de fazer um modo escuro para algum desafio daqui do site.

  Vou deixar duas sugestões para melhorar a acessibilidade da página:

  • Dar um outline para o botão na pseudoclasse :focus-visible. Assim, ao navegar com a tecla Tab, vai aparecer um contorno em volta do botão quando o foco estiver sobre ele.
  • Vi que você colocou um aria-label descritivo no botão, o que é ótimo, agora só precisa atualizá-lo ao alternar entre os modos. Você pode fazer isso com o método setAttribute() do elemento:

  const button = document.getElementById('iconTheme');
  button.setAttribute('aria-label', 'activate light mode');
  // ou...
  button.setAttribute('aria-label', 'activate dark mode');
  

  Se quiser ir ainda mais além, você pode colocar uma transição entre os modos para a mudança entre claro e escuro não ser tão brusca.

  Dei uma pesquisada e parece que os degradês não são "transicionáveis" pela propriedade transition, então você teria que fazer uma pequena gambiarra com um pseudoelemento e a opacidade. Dá uma olhada neste CodePen do Chris Coyier: Transitioning Gradients (fonte: artigo Transitioning Gradients, Chris Coyier [CSS-Tricks]).

  Espero que as sugestões sejam úteis. Parabéns mais uma vez e keep coding! 💻

  11

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  ⭐Fala Adriano! Parabéns por essa belissima solução.⭐

  Até quem enfim alguém que fez algo diferente aqui, mandou mto!

  Gostei muito da versão BLACK, na versão light eu só mudaria o gradiente do fundo pra dar um pouco mais de contraste, as cores que eu usaria seriam.

  .light-theme {    --bg-color1: #0b0b0b;
      --bg-color2: #0d5ef5;
  }
  

  Dois sites que vão te ajudar muito a trabalhar com gradientes são:

  https://gradienthunt.com/ -- > pra referencia de cores e gradientes ja prontos https://cssgradient.io/ ---> pra voce criar seus gradientes e depois so copiar e colar no CSS.

  👾Minha avaliação para sua solução: ⭐⭐⭐⭐⭐

  Parabéns lek.

  01

  Marked as helpful
• 

  David•7,960

  @DavidMorgade

  Posted almost 3 years ago

  Hello Adriano, your solution looks awesome, I love the background gradients, I think you really nailed it, congratulations!

  The only little thing that I would change from the styles is the 'coded by' in your attribution when is at dark mode, maybe swapping the color to white, cause in dark mode is hard to appreciate what it says!.

  Also would like to challenge you even further! (if you want and if you have the time to try it), try getting the prefers-color-scheme from the user, would also be cool to have your App save the state of the theme mode in localStorage!

  Really awesome job, keep it going, this type of personal hand challenges are the one I most like.

  01

  Marked as helpful
• 

  OLUMIDE MICHEAL•270

  @codewithmide

  Posted almost 3 years ago

  I love the dark theme you added. You're a real programmer😂

  11