wähh­rend die bei­fah­re­rin auf dienst­rei­se war, durf­te ich mit fri­da 2-4 mal täg­lich raus ge­hen. sonst bin ich nach­mit­tags nicht so oft in den reh­ber­gen, in den letz­ten bei­den ta­gen war nach­mit­tags im­mer ir­gend­wo live mu­sik. nicht mein ding, aber mu­sik, men­schen die fei­ern und in die bü­sche ka­cken find ich auf ne art ganz schön. und der him­mel hat sich auch je­des­mal für un­se­re spa­zier­gön­ge raus­ge­putzt. 

ich bin sehr leicht zu be­ein­flus­sen. kaum sehe ich ein vi­deo über rös­ti, muss ich rös­ti selbst ma­chen.

ich war im­mer schon be­geis­tert von tor­til­las die mit so we­ni­gen zu­ta­ten (kar­tof­fel, zwie­bel, ei, öl, salz) so enorm schmack­haft sind. aber rös­ti be­stehen nur aus ge­rie­be­nen kar­tof­feln, ge­duld und salz und ein we­nig but­ter. und sind min­des­tens ge­nau­so toll und dazu noch knusp­rig. 

hin­ter­schat­ten heu­te 

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 kon­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. (al­ler­dings klappt das nicht im RSS, weil kein CSS.)

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. 

die­ses foto von ju­li­us shul­man kennt je­der ar­chi­tek­tur­stu­dent. mich hat es wäh­rend mei­nes ar­chi­tek­tur­stu­di­ums zu feuch­ten träu­men über sicht­ach­sen und mi­ni­ma­lis­ti­sches de­sign in­spi­riert. an die­sem foto stimmt kon­zep­tio­nell al­les und es fängt eine stim­mung ein, die schwer zu be­schrei­ben ist, die aber je­der ver­steht, so­bald man das foto sieht. ganz ähn­lich dem bild von ed­ward hop­per.

ich wuss­te, dass das haus am hang der hol­ly­wood-hills vom ar­chi­tek­ten pierre koe­nig ge­baut wur­de und dass es min­des­tens 21 wei­te­re case stu­dy hou­ses gibt.

was ich nicht wuss­te, war, dass die bau­her­ren, die fa­mi­lie stahl, schon vor pierre koe­nig eine ziem­lich ge­naue vor­stel­lung vom haus hat­ten. das steht zwar auch so in der wi­ki­pe­dia …

Stahl pro­vi­ded the in­spi­ra­ti­on for the over­all struc­tu­re, set­ting out his ide­as by mid-1956 in a mo­del of the house he wan­ted for the site. Un­li­ke the house as built, the mo­del has a cur­ved rear wall and but­ter­fly roof.
[…]

Koe­nig ad­he­red to the ba­sic at­tri­bu­tes of Stahl's con­cept but re­fi­ned the de­sign into so­me­thing much more ri­go­rous, geo­me­tric and 'pu­re' in its form and ma­te­ri­als—in es­sence ad­ap­ting it to his own vo­ca­bu­la­ry.

… aber die­ses vi­deo er­klärt die ge­schich­te des hau­ses sehr bild­lich. die kin­der der stahls er­zäh­len da­von wie ihre el­tern das haus plan­ten, bau­ten und wie die fa­mi­lie dar­in leb­te und wie das haus jetzt der öf­fent­lich­keit zu­gäng­lich ist. eine gross­ar­ti­ge klei­ne do­ku­men­ta­ti­on, die nicht nur für ar­chi­tek­tur­in­ter­es­sier­te in­ter­es­sant ist. 

youtube.com: Inside LA's Most Famous House Built on the Edge of a Cliff | Inside History | Architectural Digest

youtube-video laden, info, direktlink

we­gen des gros­sen er­fol­ges vor ein paar ta­gen, heu­te wie­der hähn­chen­bei­ne.