Olá, sou extremamente iniciante em desenvolvimento web. Achei um tutorial no site da Microsoft e estou seguindo. A proposta do tutorial é criar uma página muito simples formada por um arquivo .html, um arquivo .css e um arquivo .js. Essa página precisa ter tema claro e escuro.
Primeiramente o tutorial ensinou apenas como trabalhar com algumas propriedades. Dessa forma eu consegui mudar fontes e cores. Até aí deu tudo certo.
Em seguida o tutorial propõe adicionar a funcionalidade de mudar o tema entre claro e escuro.
Então, no arquivo .css, foi solicitado a criação de um :root { } onde foi definido variáveis globais para as cores:
Nesse ponto do tutorial ainda não existe botão para alternar entre os temas. Então o tutorial me mandou alterar manualmente a propriedade de classe no body do arquivo .html. O arquivo HTML ficou assim:
Pergunta
Heihel
Olá, sou extremamente iniciante em desenvolvimento web. Achei um tutorial no site da Microsoft e estou seguindo. A proposta do tutorial é criar uma página muito simples formada por um arquivo .html, um arquivo .css e um arquivo .js. Essa página precisa ter tema claro e escuro.
Primeiramente o tutorial ensinou apenas como trabalhar com algumas propriedades. Dessa forma eu consegui mudar fontes e cores. Até aí deu tudo certo.
Em seguida o tutorial propõe adicionar a funcionalidade de mudar o tema entre claro e escuro.
Então, no arquivo .css, foi solicitado a criação de um :root { } onde foi definido variáveis globais para as cores:
:root {
--green: #00FF00;
--white: #FFFFFF;
--black: #000000;
}
O body foi moficado e ficou assim:
* {
color: var(--fontColor);
font-family: helvetica;
}
body{
background: var(--bg);
}
Além da classe .light-theme foi adicionada a classe .dark-theme:
.light-theme{
--bg: var(--green);
--fontColor: var(--black);
}
.dark-theme{
--bg: var(--black);
--fontColor: var(--green);
}
O CSS completo ficou assim:
:root {
--green: #00FF00;
--white: #FFFFFF;
--black: #000000;
}
* {
color: var(--fontColor);
font-family: helvetica;
}
body{
background: var(--bg);
}
ul{
font-family: cursive;
}
li{
list-style: circle;
}
.list{
list-style: square;
}
.light-theme{
--bg: var(--green);
--fontColor: var(--black);
}
.dark-theme{
--bg: var(--black);
--fontColor: var(--green);
}
Nesse ponto do tutorial ainda não existe botão para alternar entre os temas. Então o tutorial me mandou alterar manualmente a propriedade de classe no body do arquivo .html. O arquivo HTML ficou assim:
<!DOCTYPE html>
<html lang="en">
<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>Simple website</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="light-theme">
<h1>Task List</h1>
<p id="msg">Current tasks:</p>
<ul>
<li class="list">Add visual styles</li>
<li class="list">Add light and dark themes</li>
<li>Enable switching the theme</li>
</ul>
</body>
</html>
Porém, quando testo a página, aparece fundo branco e texto preto. Não consigo achar o erro e estou curioso pra saber o que está errado.
Agradeço desde já.
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.