Muitas aplicações possuem a opção de alterar o tema, geralmente indo de um modo claro para um modo escuro (dark mode). Isso pode servir para economizar a bateria dos dispositivos, para melhorar o estilo da aplicação ou até para agradar os olhos de quem já está cansado de olhar para aplicações claras demais.
Há diversas formas de se implementar essa opção em páginas web, inclusive já foi tratada uma dessas formas em outra postagem deste site, onde se usa apenas CSS para realizar a operação de troca entre os modos. Você pode conferir aqui e aqui.
Nesta postagem, é abordada uma outra forma de realizar essa operação de troca, dessa vez utilizando JQuery. Para isso, basta utilizar o método .toggleClass(). Ele é usado como forma de adicionar ou remover uma ou mais classes de um elemento. Por exemplo, o código a seguir:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<style>
.caixa {
margin: 20px;
}
.teste {
margin: 10px;
width: 90px;
height: 90px;
cursor: pointer;
padding: 10px;
border: 1px solid #ccc;
border-radius: 25px;
display: inline-block;
}
.marcado {
background-color: #F00;
}
</style>
</head>
<body>
<div class="caixa">
<div class="teste">Clique para marcar</div>
<div class="teste">Clique para marcar</div>
<div class="teste">Clique para marcar</div>
<div class="teste">Clique para marcar</div>
</div>
<script>
$(".teste").click(function () {
$(this).toggleClass("marcado");
});
</script>
</body>
</html>Gera o seguinte resultado:
É possível observar que ao clicar nos elementos da classe “teste”, o método .toggleClass irá adicionar uma nova classe “marcado”, acrescentando apenas uma cor ao background do elemento. Caso cliquem novamente em um elemento da classe “teste”, a classe “marcado” será removida, removendo também a cor do background.
Para quem utiliza Bootstrap como uma ferramenta que auxilia no desenvolvimento das interfaces, ter essa opção é bastante útil. Isso porque ele já trás a biblioteca JQuery, pois alguns dos plugins que possui dependem dele. Como exemplo, veja o código a seguir (baseado no tema inicial do Bootstrap):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
#c-body {
margin: 0 auto;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 25px;
padding: 20px;
}
#c-card {
border-radius: 25px;
margin-top: 20px;
}
.dark-body {
background-color: #0e153a !important;
color: #FFF;
}
.dark-card {
background-color: #303a52;
color: #FFF;
}
</style>
</head>
<body>
<div id="c-body">
<h1>Hello! <button type="button" id="btn-alt" class="btn btn-dark" onclick="myFunction()">Mudar
tema</button>
</h1>
<div id="c-card" class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<button type="button" id="btn-p" class="btn btn-primary">Primary</button>
<button type="button" id="btn-s" class="btn btn-secondary">Secondary</button>
</div>
</div>
<script>
function myFunction() {
$("#c-body").toggleClass("dark-body");
$("#c-card").toggleClass("dark-card");
$("#btn-alt").toggleClass("btn-light");
$("#btn-alt").toggleClass("btn-dark");
$("#btn-p").toggleClass("btn-primary");
$("#btn-p").toggleClass("btn-success");
$("#btn-s").toggleClass("btn-secondary");
$("#btn-s").toggleClass("btn-danger");
$(".progress-bar").toggleClass("bg-info");
}
</script>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>Ele serve para criar o seguinte resultado:
Hello!
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card’s content.
Observe que ele utiliza os elementos com os estilos presentes no Bootstrap, sendo criados apenas alguns outros estilos adicionais que serão utilizados, de forma específica, após a seleção do botão “Mudar tema”. Mas perceba também que alguns dos estilos que são aplicados ao clicar no botão já estão presentes no próprio Bootstrap. Dessa forma, foi necessário apenas usar o método .toggleClass para adiciona-los aos elementos. Bastante simples e prático.
Dessa forma, um simples método da JQuery pode auxiliar nessa tarefa de alterar o tema de uma interface que usa os elementos do Bootstrap. Basta definir quais estilos serão aplicados ou removidos. Lembrando que os resultados são sempre interessantes, mas quanto mais elementos forem alterados nessa tarefa, mais complicado pode ficar o entendimento do seu código. A dica é criar um arquivo separado para os estilos (CSS) adicionais e um outro com o JavaScript, para facilitar o processo.