Solucionado
Olá! Espero que esteja bem!
Em um dos exercícios propostos, foi recomendado criar dois arquivos css diferentes para variar o tema. Em uma aula nós vimos um site que ao clicar em um botão, uma parte da página mudava seu estilo por conta de mudar o CSS utilizado. Como posso fazer isso no meu código?? Colocar um botão na página para que a pessoa possa mudar os diferentes estilos disponíveis dela??
Agradeço desde já!
Oi, Julio! Espero que você esteja bem também!
Para criar um botão que permita ao usuário alternar entre diferentes temas CSS na sua página, você pode seguir os passos abaixo. Vou te mostrar um exemplo prático de como fazer isso.
Primeiro, crie dois arquivos CSS com os diferentes estilos que deseja aplicar. Vou chamar esses arquivos de style1.css e style2.css.
style1.css:
body {
background-color: #ffffff;
color: #000000;
}
h1 {
color: #1e90ff;
}
style2.css:
body {
background-color: #000000;
color: #ffffff;
}
h1 {
color: #ff4500;
}
Agora, no seu arquivo HTML, você precisa incluir um botão e um link para o CSS que será alterado dinamicamente. Veja o exemplo abaixo:
index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Troca de Tema</title>
<link id="theme-stylesheet" rel="stylesheet" href="style1.css">
</head>
<body>
<h1>Bem-vindo ao meu site!</h1>
<button onclick="trocarTema()">Trocar Tema</button>
<script>
function trocarTema() {
const stylesheet = document.getElementById('theme-stylesheet');
if (stylesheet.getAttribute('href') === 'style1.css') {
stylesheet.setAttribute('href', 'style2.css');
} else {
stylesheet.setAttribute('href', 'style1.css');
}
}
</script>
</body>
</html>
Neste exemplo, o botão chama a função trocarTema() quando clicado. Esta função verifica qual arquivo CSS está sendo usado no momento e troca para o outro arquivo.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Valeu Rodrigo!!