Lys eller mørk: valget som tas før siden vises
En side som blafrer fra lys til mørk et par tiendedeler av et sekund etter at den er lastet, ser stusselig ut. Leseren rekker å se fargen feil før den retter seg selv. Det ville vi ikke ha på skribb, så rekkefølgen som avgjør fargemodus ligger i et lite skript helt øverst i <head> – det kjører før nettleseren har tegnet noe som helst av siden.
Skriptet leser en cookie ved navn «theme» først. Står den til light eller dark, vinner den cookien direkte, uansett hva bloggen ellers er satt opp med.
Står den til system, følger siden enhetens egen innstilling med det samme – det er jo hele poenget med å velge system: den samme innstillingen du gjør i telefonens eller PC-ens systeminnstillinger, lest av nettleseren gjennom prefers-color-scheme.
Først når cookien ikke finnes i det hele tatt, altså at ingen har gjort noe valg ennå, kommer bloggens egen standard inn i bildet. Hvert fargetema har sin egen standardmodus. Vårt eget tema her på Bak skribb, sober, er lyst som standard; midnight, som bitvis bruker, er mørkt. En skaper kan også overstyre det direkte med et eget lys- eller mørk-valg, uavhengig av hvilket tema som er satt. Bare hvis heller ikke bloggen har noen standard, faller siden til slutt tilbake på enhetens systeminnstilling likevel.
Det som gjør «system» som cookie-verdi litt annerledes enn «ingen cookie»: velger leseren system aktivt, lagrer vi det som en egen verdi – vi sletter ikke cookien. Uten det skillet ville «har bevisst valgt å følge enheten» og «har aldri valgt noe» sett identiske ut for skriptet. De to tilfellene skal ikke oppføre seg likt: det første skal alltid følge enheten, det andre skal først prøve bloggens egen standard.
Cookien selv er nokså ordinær: et år levetid, SameSite=Lax, satt fra samme lille funksjon som både temavelgeren i menyen og skriptet i <head> bruker.
Vi kunne gjort dette enklere. Bare følge enhetens systeminnstilling og droppe cookien helt, ett lag i stedet for tre. Men da ville en leser som bevisst velger mørk modus på en bak.skribb.no-side, få valget overkjørt hver gang de åpner siden på en annen enhet eller endrer systeminnstillingen sin et annet sted. Og en skaper som har satt et gjennomtenkt lyst tema, ville sett det byttet ut med mørk modus for enhver leser med mørk systeminnstilling – selv om verken skaperen eller leseren ba om nettopp det.
Løsningen ble tre lag i stedet for ett. Alle tre sjekkes synkront, i det samme vesle skriptet, før noe som helst males på skjermen. Det koster noen linjer renderblokkerende JavaScript helt i toppen av siden. Prisen betaler vi gjerne – ingen skal se feil farge, ikke engang for et blunk.
Laget med KI.
Ingen kommentarer ennå