1
resposta

[Sugestão] A cor da bolinha do input nao muda de cor ao desligar o modo noturno

Olá,

há uma dúvida acima que o estudante comentou a cor da sua bolinha do input fica azul conforme ele desliga o modo noturno. Como isso ja veio como padrão do bootstrap eu resolvi esse problema retirando o foco do input com javascript.

Aqui vai o passo a passo como eu fiz:

na raiz do projeto criei um arquivo chamado loseFocus.js dentro desse arquivo eu coloquei o seguinte código: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

// loseFocus.js

// Seleciona todos os inputs do tipo checkbox e radio
document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(function(input) {
    input.addEventListener('click', function() {
      // Remove o foco do input
      input.blur();
    });
  });

Feito isso é preciso importar esse arquivo dentro do seu html para que ele funcione

Então:

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
    crossorigin="anonymous"></script>
    //nesse ponto estou inserindo o javascript que criei anteriormente
    <script src="./loseFocus.js"></script>

Feito isso, ao clicar no botão do modo escuro, ele irá perder o foco automaticamente, não permanacendo com as cores indesejadas.

Essa foi a minha solução

Espero ajudar mais alguem

1 resposta

Olá, Bruno, como vai?

Muito legal da sua parte compartilhar sua solução e ajudar outros alunos com a dúvida! Essa atitude de colaborar com a comunidade é supervaliosa e fortalece ainda mais o aprendizado de todos.

Continue assim, sempre compartilhando seus conhecimentos e ideias. O fórum está à disposição para o que precisar!

Abraços :)