Hopp til innhold

Guide til dark mode i Jøkul

Pio Rasch-Halvorsen

2021.07.07

Automatisk dark mode bytter tema på løsninger bygget med Jøkul, basert på inn­stillingene på brukerens mobil eller data­maskin. Her er noen tips for å gjøre din løsning klar for dette.

Hjelp! Jeg vil ikke!

Aller først: Hvis du vil oppgradere til siste versjon av Jøkul, men ikke ennå er klar for å aktivere automatisk dark mode, lar det seg likevel gjøre! Bare sørg for at løsningen din rendres inne i et element med følgende attributter satt:

<div class="jkl" data-theme="light" />

Da vil applikasjonen alltid vises i lyst tema. Du kan selvfølgelig også spesifisere mørkt tema på denne måten om du heller vil det. Merk at du også kan sette tema på enkeltdeler av løsningen din med data-theme-attributten.

Ting å huske på når du designer for dark mode

Dark mode setter Granitt som bakgrunnsfarge og Snøhvit som tekstfarge på løsningen. Det blir imidlertid ikke automatisk byttet bakgrunnsfarge på seksjoner der man har aktivt satt en bakgrunnsfarge (f.eks. felter som er uthevet med mørkere toner). For disse må man finne en passende bakgrunnsfarge for dark mode, som sørger for å gi tilsvarende kontrast mot Granitt bakgrunn.

Husk også på at skygger ikke vil synes mot mørke bakgrunner, og at felter som er utheves med skygge derfor bør utheves på annen måte i dark mode. For eksempel kan man bruke omriss eller endring i bakgrunnsfarge.

Hvis det er deler av løsningen din som alltid skal vises i mørkt tema må du sørge for at bakgrunnen har ønsket kontrast mot Granitt bakgrunnsfarge, så den ikke går i ett med resten av løsningen i dark mode.

Verktøy for å utvikle med dark mode

Vi har forsøkt å gjøre det så enkelt som mulig å utvikle løsninger med tanke på dark mode. Som standard vil alle Jøkul-komponentene automatisk bytte mellom lyst og mørkt tema basert på brukerens preferanser. For helt enkle løsninger er det dermed ikke sikkert man må gjøre noe ekstra arbeid!

Overstyre automatisk bytte

Du kan overstyre det automatiske byttet ved å sette attributten data-theme på elementer i DOMet. Det er også mulig å nøste seksjoner med forskjellig tema inne i hverandre.

<div className="jkl din-app">
    // Dette innholdet bytter automatisk tema
    <div data-theme="dark">
        // Dette innholdet er alltid i mørkt tema
        <div data-theme="light">/* Dette innholdet er alltid lyst, selv om det er inne i en div med mørkt tema */</div>
    </div>
</div>

Gjøre spesifikke endringer for dark mode

I noen tilfeller holder det ikke med de automatiske endringene av bakgrunns- og tekstfarge, for eksempel når man har felter med en annen bakgrunnsfarge enn standard. For å gjøre det enklere å løse disse tilfellene har vi laget mixins som er tilgjengelige fra jkl-core:

@import "@fremtind/jkl-core/jkl";

@include jkl.helper-light-mode-variables {
    --my-custom-background-color: #{jkl.$color-varde};
}
@include jkl.helper-dark-mode-variables {
    --my-custom-background-color: #{jkl.$color-skifer};
}

.my-fancy-component {
    background-color: var(--my-custom-background-color);
    background-color: jkl.$color-varde; // Husk å ta høyde for IE om du må støtte det
}

Håndtere elementer som alltid skal ha mørkt tema

Noen løsninger har elementer som alltid skal vises med mørkt tema, også når resten av applikasjonen er i lyst tema. For disse må du huske å sette bakgrunns- og tekstfarge spesifikt, samt å markere at den er låst til mørkt tema:

// MyDarkComponent.scss

.my-dark-component {
    background-color: jkl.$color-granitt;
    color: jkl.$color-snohvit;
}
// MyDarkComponent.tsx

<div className="my-dark-component" data-theme="dark">
    Sammendrag
    <SummaryTable />
    <PrimaryButton>Kjøp forsikring</PrimaryButton>
</div>

NB!: Dersom du skal støtte Internet Explorer er du nødt til å bruke prop-en inverted på komponenter inne i elementer med mørkt tema, siden den automatiske løsningen benytter seg av CSS custom properties