Ett färgschema för vår webbshop

Förkunskaper

Du bör ha jobbat igenom kmom01, lämnat in och skapat en ny branch kmom02. Du kan med fördel göra nedanstående direkt i ditt webshop-repo.

CSS-variabler

Vi börjar med att ta en kopia av vår förstasida, som vi skapade i kmom01, så vi inte förstör något.

# stå i ditt repot
cp index.html category.html

Vi har Using CSS Custom Properties lätt till hands och ser i den artikeln hur vi kan skapa variabler som vi kan använda i våra CSS-filer. Vi börjar med att skapa filen variables.css och lägger till den i category.html ovanför style.css.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>webshop</title>

    <link rel="stylesheet" href="variables.css" />
    <link rel="stylesheet" href="style.css" />

    <script src="main.js" type="module" defer></script>
</head>

I variables.css skapar vi ett :root pseudo-element. Då CSS-variabler precis som alla andra CSS attribut enbart påverkar de element som passar in på selektorn vill vi se till att våra variabler påverkar globalt genom att nyttja :root.

:root {
    --text-color: #333;
    --background-color: #fff;
}

Vi anger variabler med ---prefixen och kan sedan använda de i vår CSS med var(--text-color) till exempel som nedan.

/* En del av style.css */
body {
    font-family: sans-serif;
    background-color: var(--background-color);
    line-height: 1.4;
    color: var(--text-color);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

Ett färgschema

Med hjälp av Adobe’s Color Wheel har jag skapat ett komplementärt färgschema enligt nedan. Färgarna kompleteras i vår design av vitt och nästan svart (#333) för bakgrund och text färg.

Genom att använda ett färgschema ser vi till utifrån färgteori att ha färgar som antigen passar ihop eller ger en bra kontrast. Jag lägger till dessa variabler i variables.css i :root elementet.

:root {
    --text-color: #333;
    --background-color: #fff;
    --yellow: #f5af2b;
    --beige: #b5914e;
    --light-blue: #2c83f5;
    --blue: #5274a1;
    --navy: #21334a;
    --brown: #756649;
}

Och kan nu använda de på ett smidigt sätt igenom hela webshoppen. Om ni vill kan variabler användas för annat än färg, till exempel typsnitt och marginaler.

:root {
    --text-color: #333;
    --background-color: #fff;
    --yellow: #f5af2b;
    --beige: #b5914e;
    --light-blue: #2c83f5;
    --blue: #5274a1;
    --navy: #21334a;
    --brown: #756649;
    --header-font: sans-serif;
    --text-font: serif;
    --default-font-size: 1.25em;
    --default-margin-bottom: 1.75rem;
}

Se till att testa använda färgarna från variables.css i era style.css genom syntaxen var(—yellow) till exempel. I och med vi har definierat de i :root elementet är de tillgängliga i alla filer som hämtas in i index.html efter variables.css.

Tema-väljare

I många sammanhang har ni säkert sett att man på hemsidor kan välja mellan mörkt och ljust tema. Nu ska vi försöka implementera denna funktionalitet i vår webbshop.

Vi skapar först en kopia på variables.css:

# stå i ditt repo
cp variables.css variables-dark.css

I filen variables-dark.css ändrar vi nu så att standard bakgrundsfärgen blir standard text färgen och tvärtom, bara så vi ser skillnaderna sedan.

:root {
    --text-color: #fff;
    --background-color: #333;
    --yellow: #f5af2b;
    --beige: #b5914e;
    --light-blue: #2c83f5;
    --blue: #5274a1;
    --navy: #21334a;
    --brown: #756649;
    --header-font: sans-serif;
    --text-font: serif;
    --default-font-size: 1.25em;
    --default-margin-bottom: 1.75rem;
}

I head-delen av vår HTML lägger vi till id="variables-style" på link-elementet som laddar in variables.css. Vi skapar även katalog views och lägger main.js från förra veckans uppgift i den katalogen. Vi skapar sedan filen views/mode-selector.js genom kommandot touch views/mode-selector.js i terminalen när du står i roten av ditt repo.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>webshop</title>

    <link rel="stylesheet" href="variables.css" id="variables-style" />
    <link rel="stylesheet" href="style.css" />

    <script src="views/main.js" type="module" defer></script>
    <script src="views/mode-selector.js" type="module" defer></script>
</head>

I header-delen som är en del av body i category.html lägger vi till en dropdown-meny med följande kod.

<select id="mode">
    <option value="variables.css">Light</option>
    <option value="variables-dark.css">Dark</option>
</select>

I filen views/mode-selector.js lägger vi till följande kod. Vi plockar in de två elementen vi har definierat i category.html: <link>-elementet som laddar in variabel CSS’n och <select>-elementet som låter oss välja mellan de olika ‘modes’. Vi skapar sedan en eventListener för eventet change på <select> elementet och ändrar href-attributet baserat på värdet av select-elementet.

const variables = document.getElementById("variables-style")
const modeSelect = document.getElementById("mode")

modeSelect.addEventListener("change", function(event) {
    variables.setAttribute("href", event.target.value)
})

Om du ändrar värde för select-elementet bör du nu om allt är konfigurerat som det är beskrivit ovan och du använder variablerna på rätt sätt i din style.css byta bakgrundsfärg och text färg varje gång du ändrar på select-elementet. Men laddar vi om sidan består inte ändringarna. Därför väljer vi att använda oss av localStorage (Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). LocalStorage gör det möjligt för oss att spara okänslig data i webbläsaren kopplat till domänen vi just nu är inne på. Det finns två huvudsakliga funktioner get och set.

Vi använder de på följande sätt i vår kod.

const variables = document.getElementById("variables")
const modeSelect = document.getElementById("mode")

modeSelect.addEventListener("change", function(event) {
    variables.setAttribute("href", event.target.value)
    localStorage.setItem("mode", event.target.value)
})

if (localStorage.getItem("mode")) {
    variables.setAttribute("href", localStorage.getItem("mode"))
    modeSelect.value = localStorage.getItem("mode")
}

När vi ändrar på select-elementet ser vi till att sätta värdet i localStorage. Vi ser även till att när vi öppnar sidan att sätta värdet från localStorage som värde för href-attributet för link elementet och värdet för vårt select-element.