Hoe OM - Wissel donker modus
Skakel tussen donker en ligte modus met CSS en JavaScript.
Wissel Klas
Stap 1) Voeg HTML by:
Gebruik enige element wat die inhoud moet stoor waarvoor jy die ontwerp wil wissel. In ons voorbeeld sal ons <body>
ter wille van eenvoud gebruik:
Voorbeeld
<body>
Stap 2) Voeg CSS by:
Stileer die <body>
element en skep 'n .dark-mode
klas vir wissel:
Voorbeeld
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Stap 3) Voeg JavaScript by:
Kry die <body>
element en wissel tussen die .dark-mode
klas:
Voorbeeld
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Wenk: Sien ook Hoe om 'n klas by te voeg .
Wenk: Kom meer te wete oor die classList- eienskap in ons JavaScript-verwysing.