Darkmode

Hur länkar vi javascript till en hemsida?

För att göra ett darkmode tema behöver vi först gå igenom hur vi använder oss utav javascript när vi gör en hemsida. JavaScript filer skrivs i filtypen .js och man brukar döpa det till app.js . Börja med att göra en mapp som heter js i samma filsökväg som din index.html fil. Inuti js mappen gör du din app.js fil, nu behöver vi bara länka app.js filen till hemsidan. Har du hängt med hittills så lägger du in <script src="js/app.js"></script> i hemsidans body tagg. Har du gjort allt rätt så har du nu länkat din javascript fil till hemsidan.

Hur lägger vi till darkmode?

Nu förutsäger vi att du har länkat både en css fil och en javascript fil till hemsidan. Först behöver vi ange ett darkmode läge i CSS, gör en ny CSS-egenskap som heter dark-mode och ange en bakgrundsfärg samt en textfärg som ska användas när du aktiverat darkmode. I detta fall så gör vi ett extremt simpelt darkmode så det räcker gott och väl med koden nedan i CSS.
.dark-mode {
     background-color: black;
     color: white;
}
Nu är vi helt klara med CSS-filen och kan övergå till html sidan av darkmode. Vi behöver på något sätt göra en knapp som aktiverar en javascript funktion. Detta gör vi genom att använda oss av button taggen samt onclick attributet i hemsidans body.
<button onclick="myFunction()">Aktivera darkmode</button>
Nu har vi alltså lagt till en knapp där det står Aktivera darkmode vilket aktiverar funktionen myFunction() . Nu är vi nästan klara med hela darkmode knappen, vi övergår nu till javascript biten av sidan. Vi behöver göra en funktion som byter vår body till de CSS-egenskaperna vi skrev till tidigare.
function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}
Funktionens namn är alltså myFunction() vilket stämmer överens med det vi använde i button taggen. var värdet vi använder heter element och utgår ifrån hemsidans body vilket vi skrev som document.body . För att sedan ändra hemsidans CSS-egenskaper så växlar vi egenskaperna på body egenskapen med vår egna dark-mode egenskap som vi skrev tidigare i CSS. Klickar vi nu på darkmode knappen så ser vi alltså att temat ändras.

Nu borde du ha full koll på hur man gör en grundläggande hemsida och kan gå vidare till att göra din egna hemsida. Lycka till! Om du vill gå tillbaks till startsidan så kan du klicka här.