Dark mode
Syftet med ”dark mode” är att med hjälp av en knapp låta användaren byta (bakgrunds-)färgerna på olika element på sidan.
1) Börja med att ta fram och testa CSS regler för detta.
Använd selektorer på ett smart sätt så behöver du inte göra om HTML strukturen. I utgångsläge ska din sida ser ut som ”vanligt”.
Tänk så här: det finns några få element i din existerande HTML struktur som omfattar nästan hela av sidans innehåll. Ett lämpligt element för det ändamålet är alltså t ex body elementet.
I utgångsläget har du kanske några CSS regler för en bakgrundsfärg på sidan, rubriker, paragrafer etc.
1
body {background-color: #eee;}
2
h1, h2 { font-family: 'Times', serif;}
3
p {font-size:12px; margin-bottom: 1rem}
En ”smart” variant att utöka de grundmallar är att planera för en klass (t.ex. dark ) som kan läggas till på body elementet.
1
body.dark {background-color: #222}
Sedan lägger du till fler regler. På grund av högre ”specificity” kommer dessa skriva över de grundlägen. Så att du till slut har en stilmall ca så här:
1
/* Som utgångsläge har du kanske några CSS regler för en bakgrundsfärg på sidan, rubriker, paragrafer etc. */
2
3
body {background-color: #eee;}
4
h1, h2 { font-family: 'Times', serif;}
5
p {font-size:12px; margin-bottom: 1rem}
6
7
/* en "smart" variant att utöka de grundmallar är att planera för en klass (t.ex. "dark") som kan läggas till på body elementet */
8
9
body.dark {background-color: #222}
10
11
/* och sedan definiera mer specifika regler, t ex för fallet att body äger klassen .dark -- högre specificitet --> skriver över dina grundregler längre upp */
12
13
body.dark h1,
14
body.dark h2 {color: white}
15
body.dark p {color: white}
Nu bör du kunna lägga till din .dark klass på body elementet (i din HTML kod) och sidan ska ändra sitt utseende. Tar du bort din klass ska sidan gå tillbaka till utgångsläge.
Med class="dark" på body elementet
2) Andra steget: ”toggle” .dark klassen med hjälp av JavaScript
istället för att du manuellt lägger till den klassen ska den vara styrbart av användare via t ex en knapp (användaren kan ju inte lägga till något i HTML koden på ett enkelt sätt).
Bryta ner de arbetsstegen:
- lägg till en button i HTML koden som ska vara ”styrenheten” (tänk gärna även på att du kanske vill ha en till knapp för att stänga av dark mode igen)
- vid ett händelse som ligger på knappen (JavaScript event, t.ex.
onClick) vill du anropa en JS funktion som ska lägga till klassen på ditt body element
t ex
1
<button onClick="kloktfunktionsnamn();">Dark Mode</button>
- en javascript funktion behövs så att koden inte utförs direkt när sidan laddas
1
function kloktfunktionsnamn() {
2
}
- funktionen ska manipulera ett DOM objekt, i ditt fall troligen body elementet. Dvs. först måste JavaScript hämta själva element. Detta kan göras antingen via ID och
document.getElementById('idnamn')om du använder id på dina sidor, eller enklare för body elementet meddocument.body. Det är inte heller helt fel att spara elementet i en variabel.
Testa gärna att manipulera body elementet med någon enkel sak innan du fortsätter genom att du lägger script koden utanför din funktionsdefinition, så att den utförs direkt när sidan laddas (dvs ladda också om sidan!)
exempel för att testa
1
// gör all text på sidan "lime"
2
document.body.style.color = 'lime';
- till slut ska du sammanknyta allt: när du klicker på knappen ska funktionen anropas, INOM funktionsblocken ska du manipulera body elementet på ett sätt att du lägger till en klass.
Att lägga till eller ta bort en klass görs via den sk APIElement.classListoch metoderna add, remove, t.ex.element.classList.add("anotherclass");
1
// i samband med t ex body elementet
2
document.body.classList.add("minKlassSomSkaLäggasTill")
1
// för att ta bort en klass
2
document.body.classList.remove("KlassSomSkaTasBort")
Att fundera vidare på:
- hur gör man att komma tillbaka till utgångsläge? Vilka element och funktioner skulle behövas?
Genväg med ”toggle” funktion
Kan jag använda en och samma funktion för att byta mellan på och av, dvs. toggle mellan classList.add och classList.remove? Det finns en till method i classList som gör exakt detta.
1
// lägg till klassen om den inte finns, ta bort om den finns
2
element.classList.toggle("dinklasssomskatogglas");
Alternativet här skulle vara att man sparar ”statusen” i en variabel och prövar med villkorsatser (if – else) vilken av remove eller add ska utföras.