Hur växlar jag mörk mode

Använd CSS och JavaScript för att växla mellan mörk och ljus mode.

Prova själv

växla klass

Steg 1 - Lägg till HTML:

Använd vilken som helst element som bör lagra innehållet du vill växla designen. I vårt exempel kommer vi för enkelhets skull att använda <body>:

<body>

Steg 2 - Lägg till CSS:

ställa in <body> ändra elementets stil och skapa en för att växla .dark-mode Klass:

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}
.dark-mode {
  background-color: black;
  color: white;
}

Steg 3 - Lägg till JavaScript:

Få <body> element och .dark-mode Byt mellan klasser:

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

Prova själv

Relaterade sidor

Lär dig:Hur man lägger till en klass

Referenshandbok:HTML DOM Element classList egenskap