Gewusst wie: Schalten Sie den Dunkelmodus um
Wechseln Sie mit CSS und JavaScript zwischen dunklem und hellem Modus.
Klasse umschalten
Schritt 1) HTML hinzufügen:
Verwenden Sie ein beliebiges Element, das den Inhalt speichern soll, für den Sie das Design umschalten möchten. In unserem Beispiel verwenden wir <body>
der Einfachheit halber:
Beispiel
<body>
Schritt 2) CSS hinzufügen:
Gestalten Sie das <body>
Element und erstellen Sie eine .dark-mode
Klasse zum Umschalten:
Beispiel
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Schritt 3) JavaScript hinzufügen:
Holen Sie sich das <body>
Element und wechseln Sie zwischen den .dark-mode
Klassen:
Beispiel
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Tipp: Siehe auch So fügen Sie eine Klasse hinzu .
Tipp: Erfahren Sie mehr über die classList- Eigenschaft in unserer JavaScript-Referenz.