Essa parte final de usar variáveis, as alterações não estão refletindo na página, fica com as cores originais. Mas conferi o código e está igual ao da aula.
:root {
--cor-primaria: #000000;
--cor-secundaria: #F6F6F6;
--cor-terciaria: #22D4FD;
--cor-hover: #272727;
--fonte-primaria: 'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif;
}
Obrigado
Anselmo
Olá, Anselmo! Tudo bem?
Agradeço por compartilhar sua dúvida no fórum.
Pelo que você descreveu, as variáveis estão declaradas corretamente dentro do :root, mas as cores da página continuam as originais. Quando isso acontece, normalmente o problema não está na declaração das variáveis, e sim na forma como elas estão sendo utilizadas (ou na ordem em que o CSS está sendo carregado).
Primeiro ponto importante: declarar a variável não aplica nada automaticamente. É preciso utilizá-la com a função var().
Por exemplo:
body {
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
}
Se no seu CSS ainda estiver algo assim:
body {
background-color: #000000;
}
A cor fixa vai continuar sendo aplicada, mesmo que a variável exista.
Segundo ponto: verifique se o arquivo onde está o :root realmente está sendo importado corretamente no HTML e se ele não está sendo sobrescrito por outro CSS carregado depois. A ordem das folhas de estilo influencia diretamente no resultado.
Terceiro ponto: confira se o nome da variável está exatamente igual na declaração e no uso. Em CSS, qualquer diferença já invalida a referência:
color: var(--cor-primaria); /* correto */
color: var(--cor_primaria); /* não funciona */
Teoricamente, as variáveis CSS funcionam como valores reutilizáveis globais. Ao declarar no :root, você está dizendo que elas podem ser usadas em qualquer parte do documento. Porém, elas só substituem valores quando chamadas explicitamente com var().
Espero que eu tenha conseguido te ajudar.