Quiero hacer un dark-mode para mi página, utilizando solamente CSS. Para ello, creé un input type checkbox que me permite hacer el switch entre un label de "modo oscuro" y otro label "modo claro". Para esto use input:checkbox + .clasedelhermano{} y funcionó, pero ahora, cuando quiero editar un selector que no esta dentro de su rama, no se como llegar a este. En este caso, me gustaría editar el div con clase "purple-rectangle" utilizando el checkbox de id "dark-mode".
<div class="purple-rectangle"></div>
<header class="header">
<img class="logo" src="GIFOS_UI+Kit_Desktop+y+Mobile/GIFOS-UI-Desktop+Mobile-Update/assets/logo-mobile.svg" alt="logo">
<div class="menu-hamb">
<input type="checkbox">
<img class="burguer hamb" src="GIFOS_UI+Kit_Desktop+y+Mobile/GIFOS-UI-Desktop+Mobile-Update/assets/burger.svg" alt="burguer">
<img class="close hamb" src="GIFOS_UI+Kit_Desktop+y+Mobile/GIFOS-UI-Desktop+Mobile-Update/assets/close.svg" alt="close">
<nav class="navbar">
<ul class="navlist">
<input type="checkbox" id="dark-mode">
<li class="navitem day" id="day">Modo Nocturno</li>
<li class="navitem night" id="night">Modo Diurno</li>
<li class="navitem">Favoritos</li>
<li class="navitem">Mis Gifos</li>
</ul>
</nav>
</div>
<img id="create-gif" class="create-gif" src="GIFOS_UI+Kit_Desktop+y+Mobile/GIFOS-UI-Desktop+Mobile-Update/assets/button-crear-gifo.svg" alt="">
</header>
.navlist input:checked ~ .day {
display: none;
}
.navlist #dark-mode:not(:checked) ~ .night{
display: none;
}
// esta es la linea que nose como hacer
#dark-mode:checked +.purple-rectangle{
background-color: $primary-color-dark;
}
<input type="checkbox" id="dark-mode"/>
como hermano del elemento.purple-rectangle
– hawks el 11 oct. 20 a las 20:30