Skru på mørkmodus med CSS

Nå kan nettsiden din arve innstillingene fra operativsystemet. Men det er en hake.

I nye Safari er det støtte for media-query som tar hensyn til mørkmodus i operativsystemet ditt. 📸: Jørgen Jacobsen
I nye Safari er det støtte for media-query som tar hensyn til mørkmodus i operativsystemet ditt. 📸: Jørgen JacobsenVis mer

Nylig ble det lansert en CSS-selektor som er rene drømmetreffet for en side som kode24. Siden starten har vi nemlig tilbudt en såkalt «darkmode» på nettavisa vår.

Modusen gir lesere mørk bakgrunn og lys tekst. Inspirert av temaene mange utviklere bruker i editorene sine.

Vi innså selvsagt at ikke alle ønsket mørk modus på siden vår. Derfor implementerte vi en liten lysbryter, som du foreløpig finner i footer-en. Knappen skrur av og på en CSS-klasse på body-taggen, og lagrer valget til brukeren i en cookie.

Ulempen med den løsningen er at vi ikke vet hva brukeren foretrekker før han eller hun besøker siden vår og tar et valg. Inntil nå.

Detektere darkmode

Darkmode er tydeligvis i vinden om dagen. Både Microsoft og Apple har nylig sluppet oppdateringer til operativsystemene sine med støtte for modusen. Selv om oppdateringen til Mac OS Mojave muligens mer vellykket enn Windows sin.

All spøk til side; Apple ønsker at brukerne sine skal få servert mørkmodus på tvers av operativsystemet, også i nettleseren. Derfor slapp de nylig en preview-versjon av nettleseren Safari med støtte for en prefers-color-scheme media query.

Foreløpig støtter den valgene no-preference, light og dark. Under kan du teste funksjonaliteten.

W3C diskuterer allerede om query-en, som foreløpig kun er tilgjengelig i Safari 68 og nyere, skal bli en del av CSS.

Det finnes derfor håp om at dette skal dukke opp i større nettlesere som Chrome og Firefox fremover. Mozilla-teamet diskuterer allerede støtte i Firefox.

Og mens vi venter på en global standard har Windows-brukere med Edge-nettleseren et alternativ. Den proprietære selektoren -ms-high-contrast har nemlig vært tilgjengelig for nettleseren en periode, og kan brukes på lignende måte, ifølge bloggeren Greg Whiteworth.

Har du nyeste Mac Os og preview-versjonen av Safari, og vil teste? Om du har mørkmodus bør du se hvit kode24-logo i boksen under.

.logo-boks {
  display: block;
  border: 2px dashed seashell;
  background-color: seagreen;
  color: black;
  padding: 20px;
  font-size: 20px;
  text-align: center;

}

@media (prefers-color-scheme: dark) {
  .logo-boks {
    background-color: black;
    color: white;
  }
}
kode24