„art directed“ bilder für arme

mittlerweile hat sich der dark mode als option (j sei dank) fast überall durchgesetzt. wenn ich nachts aufwache und mich mal kurz an den rechner setze, hasse ich es, wenn webseiten mich dann viduell anschreien. aber auch tagsüber finde ich hell leuchtende webseiten unangenehm.

deshalb hat wirres.net seit etwas mehr als einem jahr auch einen dark mode.

was mich dabei oft genervt hat: manche bilder sehen im dark mode elegant aus, aber im light mode nicht. oder umgekehrt. häufigster workaround dafür bisher: mit transparenzen arbeiten, also möglichst auf hintergründe verzichten. bei strichzeichnungen mit schwarzem oder weissen strichen klappt das dann aber nur in 50% der fälle. man kann dann einen grauton für die striche wählen, der sowohl im dark- als auch lightmode sichtbar bleibt.

die saubere lösung ist eine media-query und damit was man (glaube ich) art directed images nennt:

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

dafür muss man dem CMS beibringen, pro bild auf wunsch auch zwei quellen (oder mehr, je nach dem wie art-directy man werden will) zu verwalten. in meinem fall würde das aber im html-code, der für bilder ohnehin schon irre komplex ist, noch mehr komplexität bedeuten.

deshalb habe ich mich sehr über diesen workaround gefreut, den mir cursor heute vorgeschlagen hat, auch eine media query:

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

umgesetzt habe ich das jetzt so, dass bilder die auf *-invertable* enden passend ionvertiert werden. beispiel aus diesem artikel:

das bild hat weissen hintergrund mit schwarzen linien, wird aber bei aktiviertem dark mode invertiert dargestellt, also mit schwarzem hintergrund und weissen linien. das sollte auch mit schwarzen linien auf weissem hintergrund klappen.

und es sollte auch mit transparentem hintergrund klappen. das ist ein kubus aus schwarzen linien auf transparentem hintergrund:

das ist der code den mir cursor geschrieben hat:

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

/* Lightbox hat dunklen Hintergrund → immer die Dark-Darstellung */
.pswp img[src*="-invertable"],
.pswp__img[src*="-invertable"] {
  filter: invert(1);
}

interessant (zumindest für mich) ist was mit der lightbox im light-mode passiert (also wenn man auf das bild klickt, um es zu vergrössern): weil der hintergrund der light box immer schwarz ist, wird dann auch die dark-mode-variante in der lightbox angezeigt. alles mit ein bisschen CSS. faszinierend.