Create basic light-dark theme solution
this is a challenge for the frontend-mentorship
Laboratório: Alternância de Tema Light/Dark sem JavaScript (somente CSS)
Neste laboratório, vamos criar uma página da web que permite aos usuários alternar entre temas claro e escuro usando apenas CSS, sem a necessidade de JavaScript.
Passos:
- Configuração Inicial:
- Crie um arquivo HTML chamado
index.html. - Crie um arquivo CSS chamado
styles.css.
- Estrutura Básica do HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tema Light/Dark</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Alternador de Tema</h1>
<input type="checkbox" id="theme-toggle">
<label for="theme-toggle">Alternar Tema</label>
</div>
</body>
</html>Estilizando a Página: Em styles.css, defina estilos básicos para a página e os elementos necessários.
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
color: #333333;
transition: background-color 0.3s ease, color 0.3s ease;
margin: 0;
padding: 0;
}
.container {
text-align: center;
padding: 50px;
}
h1 {
font-size: 2rem;
}
input[type="checkbox"] {
display: none;
}
label {
cursor: pointer;
font-size: 1rem;
}Alternando Temas com Apenas CSS: Em styles.css, use o seletor :checked para alternar entre temas quando o botão de alternância de tema é marcado.
input[type="checkbox"] + label::before {
content: "🌞";
}
input[type="checkbox"]:checked + label::before {
content: "🌜";
}
input[type="checkbox"]:checked ~ body {
background-color: #333333;
color: #ffffff;
}Descrição:
- Este laboratório cria uma página da web que permite aos usuários alternar entre temas claro e escuro usando apenas CSS, sem a necessidade de JavaScript.
- Um botão de alternância de tema é criado usando um checkbox oculto e um rótulo associado.
- O estado do checkbox (
:checked) é usado no CSS para alternar entre os temas. - Quando o checkbox é marcado, o tema escuro é aplicado. Quando não está marcado, o tema claro é aplicado.
Este laboratório demonstra como usar apenas CSS para criar uma experiência de alternância de tema em uma página da web. Os usuários podem alternar facilmente entre temas claro e escuro marcando ou desmarcando um único botão.
Laboratório: Alternância de Tema Light/Dark com Propriedades Personalizadas CSS e JavaScript
Neste laboratório, vamos criar uma página da web simples que permite ao usuário alternar entre temas claro e escuro. Vamos usar propriedades personalizadas CSS para definir cores de tema e JavaScript para alternar entre esses temas dinamicamente.
Passos:
- Configuração Inicial:
- Crie um arquivo HTML chamado
index.html. - Crie um arquivo CSS chamado
styles.css. - Crie um arquivo JavaScript chamado
script.js. - Estrutura Básica do HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tema Light/Dark</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Alternador de Tema</h1>
<button id="toggle-theme-btn">Alternar Tema</button>
</div>
<script src="script.js"></script>
</body>
</html>Estilizando a Página: Em styles.css, defina estilos básicos para a página e os elementos necessários.
body {
font-family: Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
margin: 0;
padding: 0;
}
.container {
text-align: center;
padding: 50px;
}
h1 {
font-size: 2rem;
}
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border: none;
background-color: var(--btn-bg-color);
color: var(--btn-text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}Definindo Propriedades Personalizadas CSS: Em styles.css, defina as propriedades personalizadas para cores de tema claro e escuro.
:root {
--bg-color-light: #ffffff;
--text-color-light: #333333;
--btn-bg-color-light: #007bff;
--btn-text-color-light: #ffffff;
--bg-color-dark: #333333;
--text-color-dark: #ffffff;
--btn-bg-color-dark: #f44336;
--btn-text-color-dark: #ffffff;
}Alternando Temas com JavaScript: Em script.js, adicione o código JavaScript para alternar entre temas.
const toggleThemeBtn = document.getElementById('toggle-theme-btn');
toggleThemeBtn.addEventListener('click', function() {
const rootElement = document.documentElement;
const currentTheme = rootElement.getAttribute('data-theme');
if (currentTheme === 'dark') {
rootElement.setAttribute('data-theme', 'light');
} else {
rootElement.setAttribute('data-theme', 'dark');
}
});Aplicando Tema Dinamicamente: Em styles.css, use as propriedades personalizadas CSS definidas para aplicar os estilos com base no tema atual.
[data-theme="light"] {
--bg-color: var(--bg-color-light);
--text-color: var(--text-color-light);
--btn-bg-color: var(--btn-bg-color-light);
--btn-text-color: var(--btn-text-color-light);
}
[data-theme="dark"] {
--bg-color: var(--bg-color-dark);
--text-color: var(--text-color-dark);
--btn-bg-color: var(--btn-bg-color-dark);
--btn-text-color: var(--btn-text-color-dark);
}Descrição:
- Este laboratório cria uma página web simples que permite ao usuário alternar entre temas claro e escuro.
- As cores de tema são definidas como propriedades personalizadas CSS.
- O JavaScript é usado para alternar entre temas, adicionando/removendo um atributo
data-themeao elemento raiz (<html>). - Com base no valor do atributo
data-theme, os estilos da página são aplicados dinamicamente usando as propriedades personalizadas CSS definidas.
Este laboratório demonstra como usar propriedades personalizadas CSS e JavaScript para criar uma experiência de alternância de tema em uma página da web. Os usuários podem alternar facilmente entre temas claro e escuro com um simples clique em um botão.
