:root {
--cor: #ffffff;
}
body {
color: var(--cor);
}
.troca:checked ~ :root {
--cor: #000000;
}
:root {
--cor: #ffffff;
}
body {
color: var(--cor);
}
.troca:checked ~ :root {
--cor: #000000;
}
Olá Victor! Tudo ok contigo?
Bom, a resposta é não! Você consegue fazer essa mudança desde que você aplique ela a itens filhos, agora aplicar a itens pais, ou mudar as variáveis, então nesse caso não é possível, isso, porque as variáveis CSS não são dinâmicas dessa forma. Uma vez definidas, elas não podem ser modificadas dinamicamente pelo usuário ou por meio de seletores como :checked
.
Podemos alcançar esse resultado usando um código simples JavaScript, mas usando CSS só é possível alterar elementos filhos. Ou seja, uma tag input não pode modificar os estilos da tag body
ou o seletor :root
, mas se fosse uma tag no mesmo nível de hierarquia que ela, ou filha, nesse caso é possível.
Exemplo:
.troca:checked ~ label {
background-color: #362980;
}
.troca:checked + ul {
background-color: #ff00f0;
}
.troca:checked > span {
background-color: #00f0f0;
}
.troca:checked strong {
background-color: #f4e0b0;
}
Entre outras possibilidades.
Seria isso, se precisar eu estarei por aqui!
Abraços e bons estudos.