[Résolu] Changer la couleur d'un menu

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 !

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

Merci ! Je vais essayer ça !

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 {
...} 

Oh d'accord merci beaucoup !

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)

Merci c'est très gentil ! Bonne nuit également !

Et si tu veux t'entraîner aux sélecteurs JS : CSS Diner.