Hvordan kan vi la folk velge fargetema uavhengig av systeminnstillinger?

[wkillerud]

Jeg så en talk av Rachel Andrews i går på axe-con med tittelen New CSS with Accessibility in Mind. Mest interessant for utviklere, men hun tok opp et punkt jeg vil ta opp litt bredere.

Vi har jo to temaer, lyst og mørkt, som følger systeminnstillingen til brukeren ¹. Men, det er ikke gitt at akkurat vårt mørke tema er tilgjengelig for alle brukere, selv om de foretrekker mørke temaer. Kanskje er vårt lyse tema bedre for dem, selv om de bruker (og fortsatt vil bruke) mørkt tema på operativsystemet.

I dag har vi ikke noe etablert mønster for å la brukeren selv velge tema, uavhengig av systeminnstilling. Hvordan kan vi gjøre det på en god måte?

Footnotes

1. For det meste, det kan hardkodes for hele eller deler av sider, men la oss hoppe over det nå. ↩

[Mikaila94]

Enig!
Har ikke satt meg selv inn i den tekniske løsningen, men sånt rent designmessig så kan man ta inspirasjon fra andre.
Jeg ser at Google bruker en sånn innstilling-ikon der de får opp en sidebar fra høyre for å endre tema på store skjermer.
På mindre skjermer så ligger den i settings i hamburger-menyen. Kanskje vi kunne hatt en liknende løsning.

[piofinn]

Har også tenkt en del på dette. Teknisk bør det være ganske enkelt (sett data-theme til brukerens preferanse dersom de har en preferanse, lagre i cookie e.l.), men er nok smart å se litt på best practices for hvordan man viser frem valget på en god måte.

Edit: Her er et eksempel fra MDN. Ganske enkelt og oversiktlig, synes jeg!