Hoe - Schakel de donkere modus in
Schakel tussen donkere en lichte modus met CSS en JavaScript.
Klasse wisselen
Stap 1) HTML toevoegen:
Gebruik elk element dat de inhoud moet opslaan waarvoor u het ontwerp wilt wijzigen. In ons voorbeeld gebruiken we <body>
voor de eenvoud:
Voorbeeld
<body>
Stap 2) CSS toevoegen:
Stijl het <body>
element en maak een .dark-mode
klasse voor toggle:
Voorbeeld
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Stap 3) JavaScript toevoegen:
Haal het <body>
element op en wissel tussen de .dark-mode
klasse:
Voorbeeld
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Tip: zie ook Hoe u een klas kunt toevoegen .
Tip: Lees meer over de eigenschap classList in onze JavaScript-referentie.