„art di­rec­ted“ bil­der für ar­me

mitt­ler­wei­le hat sich der dark mode als op­ti­on (j sei dank) fast über­all durch­ge­setzt. wenn ich nachts auf­wa­che und mich mal kurz an den rech­ner set­ze, has­se ich es, wenn web­sei­ten mich dann vi­du­ell an­schrei­en. aber auch tags­über fin­de ich hell leuch­ten­de web­sei­ten un­an­ge­nehm.

des­halb hat wir­res.net seit et­was mehr als ei­nem jahr auch ei­nen dark mode.

was mich da­bei oft ge­nervt hat: man­che bil­der se­hen im dark mode ele­gant aus, aber im light mode nicht. oder um­ge­kehrt. häu­figs­ter work­around da­für bis­her: mit trans­pa­ren­zen ar­bei­ten, also mög­lichst auf hin­ter­grün­de ver­zich­ten. bei strich­zeich­nun­gen mit schwar­zem oder weis­sen stri­chen klappt das dann aber nur in 50% der fäl­le. man kann dann ei­nen grau­ton für die stri­che wäh­len, der so­wohl im dark- als auch light­mo­de sicht­bar bleibt.

die sau­be­re lö­sung ist eine me­dia-query und da­mit was man (glau­be ich) art di­rec­ted images nennt:

<picture>
  <source srcset="…-dark.png" media="(prefers-color-scheme: dark)">
  <img src="…-light.png" alt="…">
</picture>

da­für muss man dem CMS bei­brin­gen, pro bild auf wunsch auch zwei quel­len (oder mehr, je nach dem wie art-di­rec­ty man wer­den will) zu ver­wal­ten. in mei­nem fall wür­de das aber im html-code, der für bil­der oh­ne­hin schon irre kom­plex ist, noch mehr kom­ple­xi­tät be­deu­ten.

des­halb habe ich mich sehr über die­sen work­around ge­freut, den mir cur­sor heu­te vor­ge­schla­gen hat, auch eine me­dia query:

@media (prefers-color-scheme: dark) {
  .cover--invert-on-dark { filter: invert(1); }
}

um­ge­setzt habe ich das jetzt so, dass bil­der die auf *-in­ver­ta­ble* en­den pas­send ion­ver­tiert wer­den. bei­spiel aus die­sem ar­ti­kel:

das bild hat weis­sen hin­ter­grund mit schwar­zen li­ni­en, wird aber bei ak­ti­vier­tem dark mode in­ver­tiert dar­ge­stellt, also mit schwar­zem hin­ter­grund und weis­sen li­ni­en. das soll­te auch mit schwar­zen li­ni­en auf weis­sem hin­ter­grund klap­pen.

und es soll­te auch mit trans­pa­ren­tem hin­ter­grund klap­pen. das ist ein ku­bus aus schwar­zen li­ni­en auf trans­pa­ren­tem hin­ter­grund:

das ist der code den mir cur­sor ge­schrie­ben hat:

/*
 * S/W-PNGs mit Dateiname *-in­ver­ta­ble.png: Ablage = Light-Variante.
 * Dark Mode: per CSS in­ver­tie­ren (Trans­pa­renz bleibt erhalten).
 * Selektor bewusst "-in­ver­ta­ble" (nicht nur ".png"): Kirby-Thumbs heißen
 * z.B. name-in­ver­ta­ble-320x.png / name-in­ver­ta­ble-320x-q75.webp.
 */
@media (prefers-color-scheme: dark) {
  img[src*="-in­ver­ta­ble"],
  img[data-src*="-in­ver­ta­ble"],
  img[srcset*="-in­ver­ta­ble"],
  img[data-srcset*="-in­ver­ta­ble"],
  picture:has([srcset*="-in­ver­ta­ble"]) img,
  picture:has([data-srcset*="-in­ver­ta­ble"]) img {
    filter: invert(1);
  }
}

/* Lightbox hat dunklen Hin­ter­grund → immer die Dark-Dar­stel­lung */
.pswp img[src*="-in­ver­ta­ble"],
.pswp__img[src*="-in­ver­ta­ble"] {
  filter: invert(1);
}

in­ter­es­sant (zu­min­dest für mich) ist was mit der light­box im light-mode pas­siert (also wenn man auf das bild klickt, um es zu ver­grös­sern): weil der hin­ter­grund der light box im­mer schwarz ist, wird dann auch die dark-mode-va­ri­an­te in der light­box an­ge­zeigt. al­les mit ein biss­chen CSS. fas­zi­nie­rend.