Jump to content
Fórum Script Brasil
  • 0

Dúvida com :root { } e * { }


Heihel

Question

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 to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...