Jak przełączyć tryb ciemny

Użyj CSS i JavaScript do przełączania między trybem ciemnym a jasnym.

spróbuj sam

przełączanie klas

Krok 1 - Dodaj HTML:

użyj dowolnego elementu, który powinien przechowywać zawartość do przełączania projektu. W naszym przykładzie, dla uproszczenia, użyjemy <body>:

<body>

Krok 2 - Dodaj CSS:

ustaw <body> styl elementu i utwórz jedną do przełączania .dark-mode klasa:

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

Krok 3 - Dodaj JavaScript:

uzyskać <body> element i .dark-mode przełączanie klas:

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

spróbuj sam

strony związane

Tutorial:Jak dodać klasę

Referencje:Atrybut classList Elementu DOM HTML