Bonjour ou bonsoir.

Je viens vous déranger aujourd'hui car j'ai un petit problème, ou on peut dire une petite question. Pour vous connecter à mon contexte, je suis en train "d'essayer" de faire un "color theme selector", ce qui consiste à lorsque l'on clique sur un bouton, la couleur du site qui était sombre devient claire et inversement. Jusqu'à aujourd'hui tout allait bien, je m'amusais à changer de thème tranquillement, sans aucuns soucis. Jusqu'au moment où je décida de rajouter un élément à mon site (dans ce cas là, c'est une carte ^^'). Je fais toutes les modifications requies: changement de couleur de la carte lorsque le thème est sombre/clair, etc.. Sauf que, la carte ne change pas de couleur. Voici le code:

  <label for="changement">Claire</label>
  <input type="checkbox" id="changement" />
  <div class="contenu">
    <p>
      <div class="rangée1">
        <div id="carte1">
          <div class="carte">
            <img src="https://dummyimage.com/180x250/919191/383838.png" />
            <div class="description">
              <span>Jeu N°1</span>
            </div>
          </div>
        </div>
      </div>
    </p>
  </div>

et voici mon CSS qui concerne cette partie de mon site.

input#changement:checked + .contenu {
  background: #222;
}

input#changement:checked + .contenu h2 {
  color: white;
}

input#changement:checked + .contenu h2:after {
  content: "Sombre"

}
input#changement:checked + .description {
   background: black;
}
.titre {
    margin-top: 0.4%;
    margin-left: 1%;
    color: grey;
    font-family: 'Exo 2', black;
    letter-spacing: 3px;
}
.titre span {
    margin-top: -0.2%;
    font-size: 20px;
    color: #843b2e;
}
.rangée1 {
  margin-left: 220px;
}
#carte1 {
  margin-left: 10px;
  margin-top: -10px;
}

.carte img {
  width: 180px;
  height: 250px;
}
.description {
  font-family: 'Open Sans', sans-serif;
  margin-top: -5px;
  width: 180px;
  height: 40px;
  background-color: #f4f4f4;
  text-align: center;
  padding-top: 25px;
}

label {
  display: block;
  height: 25px;
  width: 100px;
  background: #eee;
  text-align: center;
  font: 14px/25px Helvetica, Arial, sans-serif;
  margin: 20px 0;
  position: fixed;
}

label:hover {
  background-color: black;
  color: #fff;
  cursor: pointer;
}

input#changement {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Merci de votre lecture. Bonne journée à vous.

-
Edité par Nihil Shakspear 22 septembre 2018 à 19:15:33