Jak – Przełącz tryb ciemny
Przełączaj się między trybem ciemnym i jasnym za pomocą CSS i JavaScript.
Przełącz klasę
Krok 1) Dodaj kod HTML:
Użyj dowolnego elementu, który powinien przechowywać zawartość, dla której chcesz przełączyć projekt. <body>
W naszym przykładzie dla uproszczenia użyjemy :
Przykład
<body>
Krok 2) Dodaj CSS:
Stylizuj <body>
element i utwórz .dark-mode
klasę dla przełącznika:
Przykład
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Krok 3) Dodaj JavaScript:
Pobierz <body>
element i przełącz się między .dark-mode
klasami:
Przykład
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Wskazówka: zobacz także Jak dodać klasę .
Wskazówka: Dowiedz się więcej o właściwości classList w naszej dokumentacji JavaScript.