5267 sujets

Sémantique web et HTML

Bonjour, je suis actuellement en train de créer un site pour un projet dans mon lycée, je souhaiterai mettre un mode sombre, j'ai déjà reussi pour le body, avec ce code :
function DarkMode() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

Voici le code css qui va avec :
.dark-mode {
  background-color: #2E2B2B;
  color: white;
}

Donc lorsque j'appuie sur un bouton ça change le body, jusqu'à là très bien, mais j'ai un menu en haut de page dont j'aimerai également changer la couleur mais je n'arrive pas à trouver comment changer celui-ci. Si quelqu'un peut m'aider ce serait parfait ! Merci d'avance !
Modérateur
Salut,

Et bien il faut regarder donc ton CSS comment ton menu est stylé et le surcharger avec la class .dark-mode

Si dans ton CSS tu as un truc du genre :
.menu {
    background: red;
}


il faudra que tu rajoutes en dessous :
.dark-mode .menu {
    background: black;
}


Quand le body aura la class dark-mode alors il prendra se code en compte, tout comme pour le body Smiley smile
Je viens de vérifier et mon CSS est est en gros à peu près comme ça :

#nav {
background-color:#fff;
} 

Et dans mon code js ça faisait référence à "body" mais du coup je ne sais pas comment faire référence à mon menu étant donné qu'il n'est pas du type
.menu {
...} 
Modérateur
Et bah c'est tout pareil faut juste construire ton selecteur en ajoutant dark-mode :

.dark-mode #nav {
    background-color:#fff;
} 
Meilleure solution
Modérateur
En gros pour t'expliquer un peu plus :

#nav
va faire référence a un élément portant l'id nav, donc ici ton menu

.dark-mode
va faire référence a tout les éléments qui ont la classe dark-mode, donc ici juste ton body quand il est dark

.dark-mode #nav
va faire référence à un élément portant l'id nav qui se trouve dans un élément avec la classe .dark-mode (peut importe si c'est un parent direct ou non).

Si tu es amené a côtoyer le CSS régulièrement, les sélecteurs c'est vraiment une base a connaitre, hésites pas lire 1 ou 2 articles c'est pas compliqué !

Bonne nuit !
Modifié par _laurent (14 Jan 2021 - 02:54)