Created
May 20, 2023 20:06
-
-
Save LucasHayashi/c6673d3e95b3fe3df496db0db749e404 to your computer and use it in GitHub Desktop.
Template com mudanças de temas para o Bootstrap 5.3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="pt-BR" data-bs-theme="light"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> | |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> | |
</head> | |
<body> | |
<header> | |
<nav class="navbar navbar-expand-lg bg-body-tertiary"> | |
<div class="container"> | |
<a class="navbar-brand" href="#">SeuSite</a> | |
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> | |
<li class="nav-item"> | |
<a class="nav-link active" aria-current="page" href="#">Home</a> | |
</li> | |
</ul> | |
</div> | |
<div class="d-flex"> | |
<ul class="navbar-nav"> | |
<li class="nav-item dropdown"> | |
<a class="nav-link dropdown-toggle current-theme" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"> | |
Tema | |
</a> | |
<ul class="dropdown-menu themes-list"> | |
<li> | |
<a class="dropdown-item" href="#" data-theme="light"> | |
<i class="bi bi-brightness-high"></i> Claro | |
</a> | |
</li> | |
<li> | |
<a class="dropdown-item" href="#" data-theme="dark"> | |
<i class="bi bi-moon-stars-fill"></i> Escuro | |
</a> | |
</li> | |
<li> | |
<a class="dropdown-item" href="#" data-theme="auto"> | |
<i class="bi bi-circle-half"></i> Auto | |
</a> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</nav> | |
</header> | |
<main> | |
<div class="container"> | |
<h1>Hello World!</h1> | |
<!-- Seu conteúdo aqui --> | |
</div> | |
</main> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> | |
<script> | |
$(document).ready(function() { | |
function removerActiveClassTheme() { | |
$('.themes-list li a').removeClass('active'); | |
} | |
$('.themes-list li').on('click', function() { | |
let linkElement = $(this).find('a'); | |
let theme = linkElement.data('theme'); | |
$('html').attr('data-bs-theme', theme); | |
removerActiveClassTheme(); | |
linkElement.addClass('active'); | |
}) | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment