Hopp til innhold

Dark mode og Inverted—Hva er greia?

Pio Rasch-Halvorsen

2020.09.21

Jøkul gir deg to hjelpemidler for å jobbe med mørkt tema i hele eller deler av løsningen din. Men hvilket skal du bruke når? Og hvordan?

  • Oppdatert 2022.02.10: La til tips om jkl-klassen og oppdaterte eksempelkoden

Hvis du har sett på komponentsidene i portalen den siste tiden har du sikkert merket at det har kommet et ekstra valg i eksemplene: Valget "Dark mode", under overskriften "Visning", gjør tilsynelatende det samme som valget "Invertert", under overskriften "Egenskaper", har gjort frem til nå.

Nøkkelen til forskjellen ligger i overskriftene: "Invertert" er en egenskap som settes på selve komponenten og kun gjelder den, mens "Dark mode" er en egenskap som settes på eksempelet og gjelder for hele området inne i eksemplet. Dette er også forskjellen på hvordan du bruker dem i utvikling.

Mørkt tema for moderne nettlesere

I moderne nettlesere er den beste løsningen for dark mode å benytte seg av attributten data-theme="dark". Alle komponentene i Jøkul vil automatisk bytte til mørkt tema dersom de befinner seg inne i et element med denne attributten satt. Du kan dermed enkelt sette mørkt tema på hele eller deler av løsningen du lager. Attributten endrer ingenting på selve elementet den er satt på, så du må selv velge/endre bakgrunnsfarge og skriftfarge.

<body class="jkl" data-theme="dark">
    <InfoMessageBox title="Mørkt tema">Jøkul-komponenter på denne siden vil automatisk få mørkt tema.</InfoMessageBox>

    <div class="jkl" data-theme="light">
        <InfoMessageBox title="Lyst tema">I denne delen av DOMen er det lyst tema som gjelder</InfoMessageBox>
    </div>
</body>

Du kan fint sette mørkt tema på kun en liten del av løsningen, og man kan også eksplisitt sette lyst tema med data-theme="light" på samme måte. Eksemplene i portalen er et eksempel på dette, der "Dark mode"-valget styrer data-theme-attributten kun på komponentvinduet. Merk deg at du bør sette jkl-klassen på elementet for å være sikret at elementer uten Jøkul-klasser får riktig farge og bakgrunnsfarge.

Denne løsningen benytter seg av CSS custom properties, og fungerer derfor ikke i IE. I de fleste tilfeller anbefaler vi å ikke implementere dark mode for IE, og se på tilbudet om mørkt tema som en form for progressive enhanchement. Om du likevel har et behov for å bruke mørkt tema på hele eller deler av løsningen din også for IE, kan du lese om dette under.

Mørkt tema for Internet Explorer

Dersom du er nødt til å implementere mørkt tema for Internet Explorer kan man altså ikke bruke den generelle løsningen over, men må i stedet styre temaet per enkelt komponent. Dette gjøres ved å sette prop'en inverted til true. Siden dette må gjøres på hver eneste Jøkul-komponent i løsningen vil nok dette best løses ved hjelp av f.eks. en context eller render props.

<InfoMessageBox inverted>Denne meldingen har mørkt tema</InfoMessageBox>
<WarningMessageBox>Denne meldingen har lyst tema</WarningMessageBox>
const darkTheme = useContext(myThemeContext);

<SuccessMessageBox inverted={darkTheme}>Denne meldingen bytter tema ut fra verdien i myThemeContext</SuccessMessageBox>;