Jak na to – Přepnout tmavý režim
Přepínejte mezi tmavým a světlým režimem pomocí CSS a JavaScriptu.
Přepnout třídu
Krok 1) Přidejte HTML:
Použijte jakýkoli prvek, který by měl ukládat obsah, pro který chcete přepnout design. <body>
V našem příkladu pro jednoduchost použijeme :
Příklad
<body>
Krok 2) Přidejte CSS:
Upravte styl <body>
prvku a vytvořte .dark-mode
třídu pro přepínání:
Příklad
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Krok 3) Přidejte JavaScript:
Získejte <body>
prvek a přepínejte mezi .dark-mode
třídou:
Příklad
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Tip: Viz také Jak přidat třídu .
Tip: Další informace o vlastnosti classList naleznete v naší příručce JavaScript.